simplify package.json scripts and remove NODE_ENV variables since we dont use them

* Avoid reactivity bugs in how we track external state

Many of our hooks which attempt to bridge external state from an EventEmitter or EventTarget into React had subtle bugs which could cause them to fail to react to certain updates. The conditions necessary for triggering these bugs are explained by the tests that I've included.

In the majority of cases, I don't think we were triggering these bugs in practice. They could've become problems if we refactored our components in certain ways. The one concrete case I'm aware of in which we actually triggered such a bug was the race condition with the useRoomEncryptionSystem shared secret logic (addressed by a1110af6d5).

But, particularly with all the weird reactivity issues we're debugging this week, I think we need to eliminate the possibility that any of the bugs in these hooks are the cause of our current headaches.

* Reuse useTypedEventEmitterState in useLocalStorage

* Fix type error

.github/workflows/blocked.yaml

@@ -1,7 +1,7 @@
 name: Prevent blocked
 on:
   pull_request_target:
-    types: [opened, labeled, unlabeled]
+    types: [opened, labeled, unlabeled, synchronize]
 jobs:
   prevent-blocked:
     name: Prevent blocked

.github/workflows/build-element-call.yaml

@@ -9,6 +9,11 @@ on:
         type: string # This would ideally be a `choice` type, but that isn't supported yet
         description: The package type to be built. Must be one of 'full' or 'embedded'
         required: true
+      build_mode:
+        type: string # This would ideally be a `choice` type, but that isn't supported yet
+        description: The build mode for vite. Must be either 'development' or 'production'
+        required: false
+        default: production
     secrets:
       SENTRY_ORG:
         required: true
@@ -37,20 +42,8 @@ jobs:
           node-version-file: ".node-version"
       - name: Install dependencies
         run: "yarn install --immutable"
-      - name: Build full version
-        if: ${{ inputs.package == 'full' }}
-        run: "yarn run build:full"
-        env:
-          SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
-          SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
-          SENTRY_URL: ${{ secrets.SENTRY_URL }}
-          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
-          VITE_APP_VERSION: ${{ inputs.vite_app_version }}
-          NODE_OPTIONS: "--max-old-space-size=4096"
-      - name: Build embedded
-        if: ${{ inputs.package == 'embedded' }}
-        run: "yarn run build:embedded"
+      - name: Build Element Call
+        run: ${{ format('yarn run build:{0}:{1}', inputs.package, inputs.build_mode) }}
         env:
           SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
           SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}

.github/workflows/build.yaml

@@ -14,6 +14,7 @@ jobs:
     with:
       package: full
       vite_app_version: ${{ github.event.release.tag_name || github.sha }}
+      build_mode: ${{ github.event_name == 'pull_request' && contains(github.event.pull_request.labels.*.name, 'development build') && 'development' || 'production' }}
     secrets:
       SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
       SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
@@ -61,6 +62,7 @@ jobs:
     with:
       package: embedded
       vite_app_version: ${{ github.event.release.tag_name || github.sha }}
+      build_mode: ${{ github.event_name == 'pull_request' && contains(github.event.pull_request.labels.*.name, 'development build') && 'development' || 'production' }}
     secrets:
       SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
       SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}

.github/workflows/test.yaml

@@ -46,7 +46,8 @@ jobs:
         run: yarn playwright install --with-deps
       - name: Run backend components
         run: |
-          docker compose -f playwright-backend-docker-compose.yml up -d
+          docker compose -f playwright-backend-docker-compose.yml -f playwright-backend-docker-compose.override.yml pull
+          docker compose -f playwright-backend-docker-compose.yml -f playwright-backend-docker-compose.override.yml up -d
           docker ps
       - name: Copy config file
         run: cp config/config.devenv.json public/config.json

backend/dev_nginx.conf

@@ -43,6 +43,11 @@ server {
 # MatrixRTC reverse proxy
 # - MatrixRTC Authorization Service
 # - LiveKit SFU websocket signaling connection
+upstream jwt-auth-services {
+    server auth-server:6080;
+    server host.docker.internal:6080;
+}
+
 server {
     listen                  80;
     listen                  [::]:80;
@@ -62,8 +67,9 @@ server {
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header X-Forwarded-Proto $scheme;
 
-      # JWT Service running at port 8080
-      proxy_pass http://auth-server:8080/;
+      # JWT Service running at port 6080
+      proxy_pass http://jwt-auth-services/;
+    
     }
 
     location ^~ /livekit/sfu/ {

dev-backend-docker-compose.yml

@@ -6,7 +6,7 @@ services:
     image: ghcr.io/element-hq/lk-jwt-service:latest-ci
     hostname: auth-server
     environment:
-      - LK_JWT_PORT=8080
+      - LIVEKIT_JWT_PORT=6080
       - LIVEKIT_URL=wss://matrix-rtc.m.localhost/livekit/sfu
       - LIVEKIT_KEY=devkey
       - LIVEKIT_SECRET=secret
@@ -18,7 +18,7 @@ services:
         condition: on-failure
     ports:
       # HOST_PORT:CONTAINER_PORT
-      - 8080:8080
+      - 6080:6080
     networks:
       - ecbackend
 

docs/controls.md

@@ -19,5 +19,3 @@ On mobile platforms (iOS, Android), web views do not reliably support selecting
 - `controls.setAudioEnabled(enabled: boolean)` Enables/disables all audio output from the application. Output is enabled by default.
 - `showNativeAudioDevicePicker: (() => void) | undefined`. Callback called whenever the user presses the output button in the settings menu.
   This button is only shown on iOS. (`userAgent.includes("iPhone")`)
-- `controls.onAudioPlaybackStarted: ((id: string) => void) | undefined`: This will be called the first time we start
-  playing audio in the webview. It can be helpful to do device setup on the native app when the webviews audio is ready.

embedded/android/gradle/libs.versions.toml

@@ -2,7 +2,7 @@
 # https://docs.gradle.org/current/userguide/platforms.html#sub::toml-dependencies-format
 
 [versions]
-android_gradle_plugin = "8.10.0"
+android_gradle_plugin = "8.10.1"
 
 [libraries]
 android_gradle_plugin = { module = "com.android.tools.build:gradle", version.ref = "android_gradle_plugin" }

embedded/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.14-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.1-all.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME

package.json

@@ -8,7 +8,11 @@
     "dev:embedded": "vite --config vite-embedded.config.js",
     "build": "yarn build:full",
     "build:full": "NODE_OPTIONS=--max-old-space-size=16384 vite build",
+    "build:full:production": "yarn build:full",
+    "build:full:development": "yarn build:full --mode development",
     "build:embedded": "yarn build:full --config vite-embedded.config.js",
+    "build:embedded:production": "yarn build:embedded",
+    "build:embedded:development": "yarn build:embedded --mode development",
     "serve": "vite preview",
     "prettier:check": "prettier -c .",
     "prettier:format": "prettier -w .",
@@ -22,6 +26,7 @@
     "test": "vitest",
     "test:coverage": "vitest --coverage",
     "backend": "docker-compose -f dev-backend-docker-compose.yml up",
+    "backend-playwright": "docker-compose -f playwright-backend-docker-compose.yml -f playwright-backend-docker-compose.override.yml up",
     "test:playwright": "playwright test",
     "test:playwright:open": "yarn test:playwright --ui",
     "links:enable": "mv .links.disabled.yaml .links.yaml & touch .links.yaml",
@@ -43,11 +48,11 @@
     "@livekit/track-processors": "^0.5.5",
     "@mediapipe/tasks-vision": "^0.10.18",
     "@opentelemetry/api": "^1.4.0",
-    "@opentelemetry/core": "^1.25.1",
-    "@opentelemetry/exporter-trace-otlp-http": "^0.57.0",
-    "@opentelemetry/resources": "^1.25.1",
-    "@opentelemetry/sdk-trace-base": "^1.25.1",
-    "@opentelemetry/sdk-trace-web": "^1.9.1",
+    "@opentelemetry/core": "^2.0.0",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.201.0",
+    "@opentelemetry/resources": "^2.0.0",
+    "@opentelemetry/sdk-trace-base": "^2.0.0",
+    "@opentelemetry/sdk-trace-web": "^2.0.0",
     "@opentelemetry/semantic-conventions": "^1.25.1",
     "@playwright/test": "^1.52.0",
     "@radix-ui/react-dialog": "^1.0.4",
@@ -76,8 +81,8 @@
     "@typescript-eslint/eslint-plugin": "^8.31.0",
     "@typescript-eslint/parser": "^8.31.0",
     "@use-gesture/react": "^10.2.11",
-    "@vector-im/compound-design-tokens": "^3.0.0",
-    "@vector-im/compound-web": "^7.2.0",
+    "@vector-im/compound-design-tokens": "^4.0.0",
+    "@vector-im/compound-web": "^7.12.0",
     "@vitejs/plugin-react": "^4.0.1",
     "@vitest/coverage-v8": "^3.0.0",
     "babel-plugin-transform-vite-meta-env": "^1.0.3",
@@ -88,7 +93,7 @@
     "eslint-plugin-deprecate": "^0.8.2",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-matrix-org": "^2.0.0",
+    "eslint-plugin-matrix-org": "2.1.0",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-rxjs": "^5.0.3",
@@ -125,7 +130,7 @@
     "unique-names-generator": "^4.6.0",
     "vaul": "^1.0.0",
     "vite": "^6.0.0",
-    "vite-plugin-generate-file": "^0.2.0",
+    "vite-plugin-generate-file": "^0.3.0",
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-svgr": "^4.0.0",
     "vitest": "^3.0.0",

playwright/fixtures/widget-user.ts

@@ -5,7 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type Page, test, expect, type JSHandle } from "@playwright/test";
+import {
+  type Browser,
+  type Page,
+  test,
+  expect,
+  type JSHandle,
+} from "@playwright/test";
 
 import type { MatrixClient } from "matrix-js-sdk";
 
@@ -30,8 +36,8 @@ const PASSWORD = "foobarbaz1!";
 const CONFIG_JSON = {
   default_server_config: {
     "m.homeserver": {
-      base_url: "http://synapse.localhost:8008",
-      server_name: "synapse.localhost",
+      base_url: "https://synapse.m.localhost",
+      server_name: "synapse.m.localhost",
     },
   },
 
@@ -74,6 +80,52 @@ async function setDevToolElementCallDevUrl(page: Page): Promise<void> {
   });
 }
 
+/**
+ * Registers a new user and returns page, clientHandle and mxId.
+ */
+async function registerUser(
+  browser: Browser,
+  username: string,
+): Promise<{ page: Page; clientHandle: JSHandle<MatrixClient>; mxId: string }> {
+  const userContext = await browser.newContext({
+    reducedMotion: "reduce",
+  });
+  const page = await userContext.newPage();
+  await page.goto("http://localhost:8081/#/welcome");
+  await page.getByRole("link", { name: "Create Account" }).click();
+  await page.getByRole("textbox", { name: "Username" }).fill(username);
+  await page
+    .getByRole("textbox", { name: "Password", exact: true })
+    .fill(PASSWORD);
+  await page.getByRole("textbox", { name: "Confirm password" }).click();
+  await page.getByRole("textbox", { name: "Confirm password" }).fill(PASSWORD);
+  await page.getByRole("button", { name: "Register" }).click();
+  const continueButton = page.getByRole("button", { name: "Continue" });
+  try {
+    await expect(continueButton).toBeVisible({ timeout: 5000 });
+    await page
+      .getByRole("textbox", { name: "Password", exact: true })
+      .fill(PASSWORD);
+    await continueButton.click();
+  } catch {
+    // continueButton not visible, continue as normal
+  }
+  await expect(
+    page.getByRole("heading", { name: `Welcome ${username}` }),
+  ).toBeVisible();
+  await setDevToolElementCallDevUrl(page);
+
+  const clientHandle = await page.evaluateHandle(() =>
+    window.mxMatrixClientPeg.get(),
+  );
+  const mxId = (await clientHandle.evaluate(
+    (cli: MatrixClient) => cli.getUserId(),
+    clientHandle,
+  ))!;
+
+  return { page, clientHandle, mxId };
+}
+
 export const widgetTest = test.extend<MyFixtures>({
   asWidget: async ({ browser, context }, pUse) => {
     await context.route(`http://localhost:8081/config.json*`, async (route) => {
@@ -83,61 +135,17 @@ export const widgetTest = test.extend<MyFixtures>({
     const userA = `brooks_${Date.now()}`;
     const userB = `whistler_${Date.now()}`;
 
-    const user1Context = await browser.newContext({
-      reducedMotion: "reduce",
-    });
-    const ewPage1 = await user1Context.newPage();
-    // Register the first user
-    await ewPage1.goto("http://localhost:8081/#/welcome");
-    await ewPage1.getByRole("link", { name: "Create Account" }).click();
-    await ewPage1.getByRole("textbox", { name: "Username" }).fill(userA);
-    await ewPage1
-      .getByRole("textbox", { name: "Password", exact: true })
-      .fill(PASSWORD);
-    await ewPage1.getByRole("textbox", { name: "Confirm password" }).click();
-    await ewPage1
-      .getByRole("textbox", { name: "Confirm password" })
-      .fill(PASSWORD);
-    await ewPage1.getByRole("button", { name: "Register" }).click();
-    await expect(
-      ewPage1.getByRole("heading", { name: `Welcome ${userA}` }),
-    ).toBeVisible();
-    await setDevToolElementCallDevUrl(ewPage1);
-
-    const brooksClientHandle = await ewPage1.evaluateHandle(() =>
-      window.mxMatrixClientPeg.get(),
-    );
-    const brooksMxId = (await brooksClientHandle.evaluate((cli) => {
-      return cli.getUserId();
-    }, brooksClientHandle))!;
-
-    const user2Context = await browser.newContext({
-      reducedMotion: "reduce",
-    });
-    const ewPage2 = await user2Context.newPage();
-    // Register the second user
-    await ewPage2.goto("http://localhost:8081/#/welcome");
-    await ewPage2.getByRole("link", { name: "Create Account" }).click();
-    await ewPage2.getByRole("textbox", { name: "Username" }).fill(userB);
-    await ewPage2
-      .getByRole("textbox", { name: "Password", exact: true })
-      .fill(PASSWORD);
-    await ewPage2.getByRole("textbox", { name: "Confirm password" }).click();
-    await ewPage2
-      .getByRole("textbox", { name: "Confirm password" })
-      .fill(PASSWORD);
-    await ewPage2.getByRole("button", { name: "Register" }).click();
-    await expect(
-      ewPage2.getByRole("heading", { name: `Welcome ${userB}` }),
-    ).toBeVisible();
-    await setDevToolElementCallDevUrl(ewPage2);
-
-    const whistlerClientHandle = await ewPage2.evaluateHandle(() =>
-      window.mxMatrixClientPeg.get(),
-    );
-    const whistlerMxId = (await whistlerClientHandle.evaluate((cli) => {
-      return cli.getUserId();
-    }, whistlerClientHandle))!;
+    // Register users
+    const {
+      page: ewPage1,
+      clientHandle: brooksClientHandle,
+      mxId: brooksMxId,
+    } = await registerUser(browser, userA);
+    const {
+      page: ewPage2,
+      clientHandle: whistlerClientHandle,
+      mxId: whistlerMxId,
+    } = await registerUser(browser, userB);
 
     // Invite the second user
     await ewPage1.getByRole("button", { name: "Add room" }).click();

playwright/widget/simple-create.spec.ts

@@ -9,11 +9,14 @@ import { expect, test } from "@playwright/test";
 
 import { widgetTest } from "../fixtures/widget-user.ts";
 
+// Skip test, including Fixtures
+widgetTest.skip(
+  ({ browserName }) => browserName === "firefox",
+  "This test is not working on firefox, after hangup brooks is locked in a strange state with a blank widget",
+);
+
 widgetTest("Start a new call as widget", async ({ asWidget, browserName }) => {
-  test.skip(
-    browserName === "firefox",
-    "This test is not working on firefox, after hangup brooks is locked in a strange state with a blank widget",
-  );
+  test.slow(); // Triples the timeout
 
   const { brooks, whistler } = asWidget;
 

renovate.json

@@ -59,7 +59,7 @@
     }
   ],
   "semanticCommits": "disabled",
-  "ignoreDeps": ["posthog-js"],
+  "ignoreDeps": ["posthog-js", "eslint-plugin-matrix-org"],
   "vulnerabilityAlerts": {
     "schedule": ["at any time"],
     "prHourlyLimit": 0,

src/FullScreenView.tsx

@@ -10,7 +10,7 @@ import classNames from "classnames";
 import { useTranslation } from "react-i18next";
 import * as Sentry from "@sentry/react";
 import { logger } from "matrix-js-sdk/lib/logger";
-import { ErrorIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { ErrorSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { Header, HeaderLogo, LeftNav, RightNav } from "./Header";
 import styles from "./FullScreenView.module.css";
@@ -67,7 +67,7 @@ export const ErrorPage = ({ error, widget }: ErrorPageProps): ReactElement => {
       ) : (
         <ErrorView
           widget={widget}
-          Icon={ErrorIcon}
+          Icon={ErrorSolidIcon}
           title={t("error.generic")}
           rageshake
           fatal

src/__snapshots__/Modal.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`the content is rendered when the modal is open 1`] = `
 <div
   aria-labelledby="radix-:r4:"
-  class="overlay animate modal dialog _glass_1x9g9_17"
+  class="overlay animate modal dialog _glass_sepwu_8"
   data-state="open"
   id="radix-:r3:"
   role="dialog"
@@ -17,7 +17,7 @@ exports[`the content is rendered when the modal is open 1`] = `
       class="header"
     >
       <h2
-        class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
+        class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
         id="radix-:r4:"
       >
         My modal

src/__snapshots__/Toast.test.tsx.snap

@@ -12,7 +12,7 @@ exports[`Toast > renders 1`] = `
   type="button"
 >
   <h3
-    class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45"
+    class="_typography_6v6n8_153 _font-body-sm-semibold_6v6n8_36"
     id="radix-:r4:"
   >
     Hello world!

src/analytics/RageshakeSpanProcessor.ts

@@ -107,13 +107,13 @@ export class RageshakeSpanProcessor implements SpanProcessor {
             startTime,
             duration,
             references:
-              span.parentSpanId === undefined
+              span.parentSpanContext?.spanId === undefined
                 ? []
                 : [
                     {
                       refType: "CHILD_OF",
                       traceID: traceId,
-                      spanID: span.parentSpanId,
+                      spanID: span.parentSpanContext?.spanId,
                     },
                   ],
             tags: dumpAttributes(span.attributes),

src/button/__snapshots__/ReactionToggleButton.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`Can close reaction dialog 1`] = `
     aria-expanded="true"
     aria-haspopup="true"
     aria-labelledby=":rb5:"
-    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
+    class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
     data-kind="primary"
     data-size="lg"
     role="button"
@@ -26,7 +26,7 @@ exports[`Can close reaction dialog 1`] = `
     >
       <path
         clip-rule="evenodd"
-        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm3.536-6.464a1 1 0 0 0-1.415-1.415A2.988 2.988 0 0 1 12 15a2.988 2.988 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10m3.536-6.464a1 1 0 0 0-1.415-1.415A3 3 0 0 1 12 15a3 3 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A5 5 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464M10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
         fill-rule="evenodd"
       />
     </svg>
@@ -44,7 +44,7 @@ exports[`Can fully expand emoji picker 1`] = `
     aria-expanded="true"
     aria-haspopup="true"
     aria-labelledby=":r7m:"
-    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
+    class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
     data-kind="primary"
     data-size="lg"
     role="button"
@@ -60,7 +60,7 @@ exports[`Can fully expand emoji picker 1`] = `
     >
       <path
         clip-rule="evenodd"
-        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm3.536-6.464a1 1 0 0 0-1.415-1.415A2.988 2.988 0 0 1 12 15a2.988 2.988 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10m3.536-6.464a1 1 0 0 0-1.415-1.415A3 3 0 0 1 12 15a3 3 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A5 5 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464M10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
         fill-rule="evenodd"
       />
     </svg>
@@ -75,7 +75,7 @@ exports[`Can lower hand 1`] = `
     aria-expanded="false"
     aria-haspopup="true"
     aria-labelledby=":r36:"
-    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
+    class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
     data-kind="secondary"
     data-size="lg"
     role="button"
@@ -91,7 +91,7 @@ exports[`Can lower hand 1`] = `
     >
       <path
         clip-rule="evenodd"
-        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm3.536-6.464a1 1 0 0 0-1.415-1.415A2.988 2.988 0 0 1 12 15a2.988 2.988 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10m3.536-6.464a1 1 0 0 0-1.415-1.415A3 3 0 0 1 12 15a3 3 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A5 5 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464M10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
         fill-rule="evenodd"
       />
     </svg>
@@ -109,7 +109,7 @@ exports[`Can open menu 1`] = `
     aria-expanded="true"
     aria-haspopup="true"
     aria-labelledby=":r0:"
-    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
+    class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
     data-kind="primary"
     data-size="lg"
     role="button"
@@ -125,7 +125,7 @@ exports[`Can open menu 1`] = `
     >
       <path
         clip-rule="evenodd"
-        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm3.536-6.464a1 1 0 0 0-1.415-1.415A2.988 2.988 0 0 1 12 15a2.988 2.988 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10m3.536-6.464a1 1 0 0 0-1.415-1.415A3 3 0 0 1 12 15a3 3 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A5 5 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464M10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
         fill-rule="evenodd"
       />
     </svg>
@@ -140,7 +140,7 @@ exports[`Can raise hand 1`] = `
     aria-expanded="false"
     aria-haspopup="true"
     aria-labelledby=":r1j:"
-    class="_button_i91xf_17 raisedButton _has-icon_i91xf_66 _icon-only_i91xf_59"
+    class="_button_vczzf_8 raisedButton _has-icon_vczzf_57 _icon-only_vczzf_50"
     data-kind="primary"
     data-size="lg"
     role="button"
@@ -155,7 +155,7 @@ exports[`Can raise hand 1`] = `
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M11 3a1 1 0 1 1 2 0v8.5a.5.5 0 0 0 1 0V4a1 1 0 1 1 2 0v10.2l3.284-2.597a1.081 1.081 0 0 1 1.47 1.577c-.613.673-1.214 1.367-1.818 2.064-1.267 1.463-2.541 2.934-3.944 4.235A6 6 0 0 1 5 15V7a1 1 0 0 1 2 0v5.5a.5.5 0 0 0 1 0V4a1 1 0 0 1 2 0v7.5a.5.5 0 0 0 1 0V3Z"
+        d="M11 3a1 1 0 1 1 2 0v8.5a.5.5 0 0 0 1 0V4a1 1 0 1 1 2 0v10.2l3.284-2.597a1.081 1.081 0 0 1 1.47 1.577c-.613.673-1.214 1.367-1.818 2.064-1.267 1.463-2.541 2.934-3.943 4.235A6 6 0 0 1 5 15V7a1 1 0 0 1 1.999 0v5.5a.5.5 0 0 0 1 0V4a1 1 0 0 1 2 0v7.5a.5.5 0 0 0 1 0z"
       />
     </svg>
   </button>

src/controls.ts

@@ -20,7 +20,6 @@ export interface Controls {
   /** @deprecated use  onAudioDeviceSelect instead*/
   onOutputDeviceSelect?: (id: string) => void;
   onAudioDeviceSelect?: (id: string) => void;
-  onAudioPlaybackStarted?: () => void;
   /** @deprecated use  setAudioEnabled instead*/
   setOutputEnabled(enabled: boolean): void;
   setAudioEnabled(enabled: boolean): void;
@@ -55,13 +54,7 @@ export const outputDevice$ = new BehaviorSubject<string | undefined>(undefined);
  * This should also be used to display a darkened overlay screen letting the user know that audio is muted.
  */
 export const setAudioEnabled$ = new Subject<boolean>();
-let playbackStartedEmitted = false;
-export const setPlaybackStarted = (): void => {
-  if (!playbackStartedEmitted) {
-    playbackStartedEmitted = true;
-    window.controls.onAudioPlaybackStarted?.();
-  }
-};
+
 window.controls = {
   canEnterPip(): boolean {
     return setPipEnabled$.observed;

src/e2ee/sharedKeyManagement.ts

@@ -6,64 +6,70 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { useEffect, useMemo } from "react";
+import { logger } from "matrix-js-sdk/lib/logger";
 
 import {
   setLocalStorageItemReactive,
   useLocalStorage,
 } from "../useLocalStorage";
-import { type UrlParams, getUrlParams, useUrlParams } from "../UrlParams";
+import { getUrlParams } from "../UrlParams";
 import { E2eeType } from "./e2eeType";
 import { useClient } from "../ClientContext";
 
+/**
+ * This setter will update the state for all `useRoomSharedKey` hooks
+ * if the password is different from the one in local storage or if its not yet in the local storage.
+ */
 export function saveKeyForRoom(roomId: string, password: string): void {
-  setLocalStorageItemReactive(
-    getRoomSharedKeyLocalStorageKey(roomId),
-    password,
-  );
+  if (
+    localStorage.getItem(getRoomSharedKeyLocalStorageKey(roomId)) !== password
+  )
+    setLocalStorageItemReactive(
+      getRoomSharedKeyLocalStorageKey(roomId),
+      password,
+    );
 }
 
 const getRoomSharedKeyLocalStorageKey = (roomId: string): string =>
   `room-shared-key-${roomId}`;
 
-const useInternalRoomSharedKey = (roomId: string): string | null => {
-  const key = getRoomSharedKeyLocalStorageKey(roomId);
-  const [roomSharedKey] = useLocalStorage(key);
+/**
+ * An upto-date shared key for the room. Either from local storage or the value from `setInitialValue`.
+ * @param roomId
+ * @param setInitialValue The value we get from the URL. The hook will overwrite the local storage value with this.
+ * @returns [roomSharedKey, setRoomSharedKey] like a react useState hook.
+ */
+const useRoomSharedKey = (
+  roomId: string,
+  setInitialValue?: string,
+): [string | null, setKey: (key: string) => void] => {
+  const [roomSharedKey, setRoomSharedKey] = useLocalStorage(
+    getRoomSharedKeyLocalStorageKey(roomId),
+  );
+  useEffect(() => {
+    // If setInitialValue is available, update the local storage (usually the password from the url).
+    // This will update roomSharedKey but wont update the returned value since
+    // that already defaults to setInitialValue.
+    if (setInitialValue) setRoomSharedKey(setInitialValue);
+  }, [setInitialValue, setRoomSharedKey]);
 
-  return roomSharedKey;
+  // make sure we never return the initial null value from `useLocalStorage`
+  return [setInitialValue ?? roomSharedKey, setRoomSharedKey];
 };
 
 export function getKeyForRoom(roomId: string): string | null {
-  saveKeyFromUrlParams(getUrlParams());
-  const key = getRoomSharedKeyLocalStorageKey(roomId);
-  return localStorage.getItem(key);
+  const { roomId: urlRoomId, password } = getUrlParams();
+  if (roomId !== urlRoomId)
+    logger.warn(
+      "requested key for a roomId which is not the current call room id (from the URL)",
+      roomId,
+      urlRoomId,
+    );
+  return (
+    password ?? localStorage.getItem(getRoomSharedKeyLocalStorageKey(roomId))
+  );
 }
 
-function saveKeyFromUrlParams(urlParams: UrlParams): void {
-  if (!urlParams.password || !urlParams.roomId) return;
-
-  // Take the key from the URL and save it.
-  // It's important to always use the room ID specified in the URL
-  // when saving keys rather than whatever the current room ID might be,
-  // in case we've moved to a different room but the URL hasn't changed.
-  saveKeyForRoom(urlParams.roomId, urlParams.password);
-}
-
-/**
- * Extracts the room password from the URL if one is present, saving it in localstorage
- * and returning it in a tuple with the corresponding room ID from the URL.
- * @returns A tuple of the roomId and password from the URL if the URL has both,
- *          otherwise [undefined, undefined]
- */
-const useKeyFromUrl = (): [string, string] | [undefined, undefined] => {
-  const urlParams = useUrlParams();
-
-  useEffect(() => saveKeyFromUrlParams(urlParams), [urlParams]);
-
-  return urlParams.roomId && urlParams.password
-    ? [urlParams.roomId, urlParams.password]
-    : [undefined, undefined];
-};
-
 export type Unencrypted = { kind: E2eeType.NONE };
 export type SharedSecret = { kind: E2eeType.SHARED_KEY; secret: string };
 export type PerParticipantE2EE = { kind: E2eeType.PER_PARTICIPANT };
@@ -72,12 +78,11 @@ export type EncryptionSystem = Unencrypted | SharedSecret | PerParticipantE2EE;
 export function useRoomEncryptionSystem(roomId: string): EncryptionSystem {
   const { client } = useClient();
 
-  // make sure we've extracted the key from the URL first
-  // (and we still need to take the value it returns because
-  // the effect won't run in time for it to save to localstorage in
-  // time for us to read it out again).
-  const [urlRoomId, passwordFromUrl] = useKeyFromUrl();
-  const storedPassword = useInternalRoomSharedKey(roomId);
+  const [storedPassword] = useRoomSharedKey(
+    getRoomSharedKeyLocalStorageKey(roomId),
+    getKeyForRoom(roomId) ?? undefined,
+  );
+
   const room = client?.getRoom(roomId);
   const e2eeSystem = <EncryptionSystem>useMemo(() => {
     if (!room) return { kind: E2eeType.NONE };
@@ -86,15 +91,10 @@ export function useRoomEncryptionSystem(roomId: string): EncryptionSystem {
         kind: E2eeType.SHARED_KEY,
         secret: storedPassword,
       };
-    if (urlRoomId === roomId)
-      return {
-        kind: E2eeType.SHARED_KEY,
-        secret: passwordFromUrl,
-      };
     if (room.hasEncryptionStateEvent()) {
       return { kind: E2eeType.PER_PARTICIPANT };
     }
     return { kind: E2eeType.NONE };
-  }, [passwordFromUrl, room, roomId, storedPassword, urlRoomId]);
+  }, [room, storedPassword]);
   return e2eeSystem;
 }

src/home/useGroupCallRooms.ts

@@ -81,8 +81,9 @@ function sortRooms(client: MatrixClient, rooms: Room[]): Room[] {
 }
 
 const roomIsJoinable = (room: Room): boolean => {
-  if (!room.hasEncryptionStateEvent() && !getKeyForRoom(room.roomId)) {
-    // if we have an non encrypted room (no encryption state event) we need a locally stored shared key.
+  const password = getKeyForRoom(room.roomId);
+  if (!room.hasEncryptionStateEvent() && !password) {
+    // if we have a non encrypted room (no encryption state event) we need a locally stored shared key.
     // in case this key also does not exists we cannot join the room.
     return false;
   }

src/livekit/MatrixAudioRenderer.test.tsx

@@ -16,18 +16,15 @@ import { type RemoteAudioTrack } from "livekit-client";
 import { type ReactNode } from "react";
 import { useTracks } from "@livekit/components-react";
 
-import {
-  TestAudioConstructor,
-  testAudioContext,
-  TestAudioContextConstructor,
-} from "../useAudioContext.test";
+import { testAudioContext } from "../useAudioContext.test";
 import * as MediaDevicesContext from "./MediaDevicesContext";
 import { MatrixAudioRenderer } from "./MatrixAudioRenderer";
 import { mockTrack } from "../utils/test";
 
+export const TestAudioContextConstructor = vi.fn(() => testAudioContext);
+
 beforeEach(() => {
   vi.stubGlobal("AudioContext", TestAudioContextConstructor);
-  vi.stubGlobal("Audio", TestAudioConstructor);
 });
 
 afterEach(() => {

src/livekit/MatrixAudioRenderer.tsx

@@ -18,7 +18,7 @@ import { logger } from "matrix-js-sdk/lib/logger";
 
 import { useEarpieceAudioConfig } from "./MediaDevicesContext";
 import { useReactiveState } from "../useReactiveState";
-import * as controls from "../controls";
+
 export interface MatrixAudioRendererProps {
   /**
    * The list of participants to render audio for.
@@ -204,7 +204,6 @@ function AudioTrackWithAudioNodes({
       useContext ? [audioNodes.gain!, audioNodes.pan!] : [],
     );
     setTrackReady(true);
-    controls.setPlaybackStarted();
   }, [audioContext, audioNodes, setTrackReady, trackReady, trackRef]);
 
   return (

src/livekit/MediaDevicesContext.tsx

@@ -20,7 +20,7 @@ import { createMediaDeviceObserver } from "@livekit/components-core";
 import { combineLatest, distinctUntilChanged, map, startWith } from "rxjs";
 import { useObservable, useObservableEagerState } from "observable-hooks";
 import { logger } from "matrix-js-sdk/lib/logger";
-import { isEqual } from "lodash-es";
+import { deepCompare } from "matrix-js-sdk/lib/utils";
 
 import {
   useSetting,
@@ -141,13 +141,16 @@ function useMediaDeviceHandle(
         kind,
         () => logger.error("Error creating MediaDeviceObserver"),
         requestPermissions,
+      ).pipe(
+        startWith([]),
         // This Observable emits new values whenever the browser fires a
         // MediaDevices 'devicechange' event. One would think, innocently, that
         // a 'devicechange' event means the devices have changed. But as of the
         // time of writing, we are seeing mobile Safari firing spurious
         // 'devicechange' events (where no change has actually occurred) when
         // we call MediaDevices.getUserMedia. So, filter by deep equality.
-      ).pipe(startWith([]), distinctUntilChanged<MediaDeviceInfo[]>(isEqual)),
+        distinctUntilChanged<MediaDeviceInfo[]>(deepCompare),
+      ),
     [kind, requestPermissions],
   );
   const available = useObservableEagerState(

src/livekit/useLivekit.ts

@@ -14,7 +14,7 @@ import {
   type RoomOptions,
   Track,
 } from "livekit-client";
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useRef } from "react";
 import E2EEWorker from "livekit-client/e2ee-worker?worker";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
@@ -24,11 +24,7 @@ import { map } from "rxjs";
 import { defaultLiveKitOptions } from "./options";
 import { type SFUConfig } from "./openIDSFU";
 import { type MuteStates } from "../room/MuteStates";
-import {
-  type MediaDeviceHandle,
-  type MediaDevices,
-  useMediaDevices,
-} from "./MediaDevicesContext";
+import { type MediaDeviceHandle, useMediaDevices } from "./MediaDevicesContext";
 import {
   type ECConnectionState,
   useECConnectionState,
@@ -40,9 +36,9 @@ import {
   useTrackProcessor,
   useTrackProcessorSync,
 } from "./TrackProcessorContext";
-import { useInitial } from "../useInitial";
 import { observeTrackReference$ } from "../state/MediaViewModel";
 import { useUrlParams } from "../UrlParams";
+import { useInitial } from "../useInitial";
 
 interface UseLivekitResult {
   livekitRoom?: Room;
@@ -57,27 +53,78 @@ export function useLivekit(
 ): UseLivekitResult {
   const { controlledAudioDevices } = useUrlParams();
 
-  const e2eeOptions = useMemo((): E2EEManagerOptions | undefined => {
-    if (e2eeSystem.kind === E2eeType.NONE) return undefined;
+  const initialMuteStates = useInitial(() => muteStates);
 
+  const devices = useMediaDevices();
+  const initialDevices = useInitial(() => devices);
+
+  // Store if audio/video are currently updating. If to prohibit unnecessary calls
+  // to setMicrophoneEnabled/setCameraEnabled
+  const audioMuteUpdating = useRef(false);
+  const videoMuteUpdating = useRef(false);
+  // Store the current button mute state that gets passed to this hook via props.
+  // We need to store it for awaited code that relies on the current value.
+  const buttonEnabled = useRef({
+    audio: initialMuteStates.audio.enabled,
+    video: initialMuteStates.video.enabled,
+  });
+
+  const { processor } = useTrackProcessor();
+
+  // Only ever create the room once via useInitial.
+  const room = useInitial(() => {
+    logger.info("[LivekitRoom] Create LiveKit room");
+
+    let e2ee: E2EEManagerOptions | undefined;
     if (e2eeSystem.kind === E2eeType.PER_PARTICIPANT) {
       logger.info("Created MatrixKeyProvider (per participant)");
-      return {
+      e2ee = {
         keyProvider: new MatrixKeyProvider(),
         worker: new E2EEWorker(),
       };
     } else if (e2eeSystem.kind === E2eeType.SHARED_KEY && e2eeSystem.secret) {
       logger.info("Created ExternalE2EEKeyProvider (shared key)");
-
-      return {
+      e2ee = {
         keyProvider: new ExternalE2EEKeyProvider(),
         worker: new E2EEWorker(),
       };
     }
-  }, [e2eeSystem]);
 
+    const roomOptions: RoomOptions = {
+      ...defaultLiveKitOptions,
+      videoCaptureDefaults: {
+        ...defaultLiveKitOptions.videoCaptureDefaults,
+        deviceId: initialDevices.videoInput.selectedId,
+        processor,
+      },
+      audioCaptureDefaults: {
+        ...defaultLiveKitOptions.audioCaptureDefaults,
+        deviceId: initialDevices.audioInput.selectedId,
+      },
+      audioOutput: {
+        deviceId: initialDevices.audioOutput.selectedId,
+      },
+      e2ee,
+    };
+    // We have to create the room manually here due to a bug inside
+    // @livekit/components-react. JSON.stringify() is used in deps of a
+    // useEffect() with an argument that references itself, if E2EE is enabled
+    const room = new Room(roomOptions);
+    room.setE2EEEnabled(e2eeSystem.kind !== E2eeType.NONE).catch((e) => {
+      logger.error("Failed to set E2EE enabled on room", e);
+    });
+
+    return room;
+  });
+
+  // Setup and update the keyProvider which was create by `createRoom`
   useEffect(() => {
-    if (e2eeSystem.kind === E2eeType.NONE || !e2eeOptions) return;
+    const e2eeOptions = room.options.e2ee;
+    if (
+      e2eeSystem.kind === E2eeType.NONE ||
+      !(e2eeOptions && "keyProvider" in e2eeOptions)
+    )
+      return;
 
     if (e2eeSystem.kind === E2eeType.PER_PARTICIPANT) {
       (e2eeOptions.keyProvider as MatrixKeyProvider).setRTCSession(rtcSession);
@@ -88,56 +135,7 @@ export function useLivekit(
           logger.error("Failed to set shared key for E2EE", e);
         });
     }
-  }, [e2eeOptions, e2eeSystem, rtcSession]);
-
-  const initialMuteStates = useRef<MuteStates>(muteStates);
-  const devices = useMediaDevices();
-  const initialDevices = useRef<MediaDevices>(devices);
-
-  const { processor } = useTrackProcessor();
-  const initialProcessor = useInitial(() => processor);
-  const roomOptions = useMemo(
-    (): RoomOptions => ({
-      ...defaultLiveKitOptions,
-      videoCaptureDefaults: {
-        ...defaultLiveKitOptions.videoCaptureDefaults,
-        deviceId: initialDevices.current.videoInput.selectedId,
-        processor: initialProcessor,
-      },
-      audioCaptureDefaults: {
-        ...defaultLiveKitOptions.audioCaptureDefaults,
-        deviceId: initialDevices.current.audioInput.selectedId,
-      },
-      audioOutput: {
-        deviceId: initialDevices.current.audioOutput.selectedId,
-      },
-      e2ee: e2eeOptions,
-    }),
-    [e2eeOptions, initialProcessor],
-  );
-
-  // Store if audio/video are currently updating. If to prohibit unnecessary calls
-  // to setMicrophoneEnabled/setCameraEnabled
-  const audioMuteUpdating = useRef(false);
-  const videoMuteUpdating = useRef(false);
-  // Store the current button mute state that gets passed to this hook via props.
-  // We need to store it for awaited code that relies on the current value.
-  const buttonEnabled = useRef({
-    audio: initialMuteStates.current.audio.enabled,
-    video: initialMuteStates.current.video.enabled,
-  });
-
-  // We have to create the room manually here due to a bug inside
-  // @livekit/components-react. JSON.stringify() is used in deps of a
-  // useEffect() with an argument that references itself, if E2EE is enabled
-  const room = useMemo(() => {
-    logger.info("[LivekitRooms] Create LiveKit room with options", roomOptions);
-    const r = new Room(roomOptions);
-    r.setE2EEEnabled(e2eeSystem.kind !== E2eeType.NONE).catch((e) => {
-      logger.error("Failed to set E2EE enabled on room", e);
-    });
-    return r;
-  }, [roomOptions, e2eeSystem]);
+  }, [room.options.e2ee, e2eeSystem, rtcSession]);
 
   // Sync the requested track processors with LiveKit
   useTrackProcessorSync(
@@ -159,8 +157,8 @@ export function useLivekit(
   );
 
   const connectionState = useECConnectionState(
-    initialDevices.current.audioInput.selectedId,
-    initialMuteStates.current.audio.enabled,
+    initialDevices.audioInput.selectedId,
+    initialMuteStates.audio.enabled,
     room,
     sfuConfig,
   );

src/otel/otel.ts

@@ -5,12 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { SimpleSpanProcessor } from "@opentelemetry/sdk-trace-base";
+import {
+  SimpleSpanProcessor,
+  type SpanProcessor,
+} from "@opentelemetry/sdk-trace-base";
 import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-http";
 import { WebTracerProvider } from "@opentelemetry/sdk-trace-web";
 import opentelemetry, { type Tracer } from "@opentelemetry/api";
-import { Resource } from "@opentelemetry/resources";
-import { SemanticResourceAttributes } from "@opentelemetry/semantic-conventions";
+import { resourceFromAttributes } from "@opentelemetry/resources";
+import { ATTR_SERVICE_NAME } from "@opentelemetry/semantic-conventions";
 import { logger } from "matrix-js-sdk/lib/logger";
 
 import { PosthogSpanProcessor } from "../analytics/PosthogSpanProcessor";
@@ -59,34 +62,34 @@ export class ElementCallOpenTelemetry {
     collectorUrl: string | undefined,
     rageshakeUrl: string | undefined,
   ) {
-    // This is how we can make Jaeger show a reasonable service in the dropdown on the left.
-    const providerConfig = {
-      resource: new Resource({
-        [SemanticResourceAttributes.SERVICE_NAME]: SERVICE_NAME,
-      }),
-    };
-    this._provider = new WebTracerProvider(providerConfig);
+    const spanProcessors: SpanProcessor[] = [];
 
     if (collectorUrl) {
       logger.info("Enabling OTLP collector with URL " + collectorUrl);
       this.otlpExporter = new OTLPTraceExporter({
         url: collectorUrl,
       });
-      this._provider.addSpanProcessor(
-        new SimpleSpanProcessor(this.otlpExporter),
-      );
+      spanProcessors.push(new SimpleSpanProcessor(this.otlpExporter));
     } else {
       logger.info("OTLP collector disabled");
     }
 
     if (rageshakeUrl) {
       this.rageshakeProcessor = new RageshakeSpanProcessor();
-      this._provider.addSpanProcessor(this.rageshakeProcessor);
+      spanProcessors.push(this.rageshakeProcessor);
     }
 
-    this._provider.addSpanProcessor(new PosthogSpanProcessor());
-    opentelemetry.trace.setGlobalTracerProvider(this._provider);
+    spanProcessors.push(new PosthogSpanProcessor());
 
+    this._provider = new WebTracerProvider({
+      resource: resourceFromAttributes({
+        // This is how we can make Jaeger show a reasonable service in the dropdown on the left.
+        [ATTR_SERVICE_NAME]: SERVICE_NAME,
+      }),
+      spanProcessors,
+    });
+
+    opentelemetry.trace.setGlobalTracerProvider(this._provider);
     this._tracer = opentelemetry.trace.getTracer(
       // This is not the serviceName shown in jaeger
       "my-element-call-otl-tracer",

src/room/GroupCallErrorBoundary.tsx

@@ -16,7 +16,7 @@ import {
 } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import {
-  ErrorIcon,
+  ErrorSolidIcon,
   HostIcon,
   OfflineIcon,
   WebBrowserIcon,
@@ -63,7 +63,7 @@ const ErrorPage: FC<ErrorPageProps> = ({
       icon = WebBrowserIcon;
       break;
     default:
-      icon = ErrorIcon;
+      icon = ErrorSolidIcon;
   }
 
   const actions: { label: string; onClick: () => void }[] = [];

src/room/GroupCallView.tsx

@@ -43,7 +43,10 @@ import { MUTE_PARTICIPANT_COUNT, type MuteStates } from "./MuteStates";
 import { useMediaDevices } from "../livekit/MediaDevicesContext";
 import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships";
 import { enterRTCSession, leaveRTCSession } from "../rtcSessionHelpers";
-import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
+import {
+  saveKeyForRoom,
+  useRoomEncryptionSystem,
+} from "../e2ee/sharedKeyManagement";
 import { useRoomAvatar } from "./useRoomAvatar";
 import { useRoomName } from "./useRoomName";
 import { useJoinRule } from "./useJoinRule";
@@ -167,6 +170,12 @@ export const GroupCallView: FC<Props> = ({
     useExperimentalToDeviceTransportSetting,
   );
 
+  // Save the password once we start the groupCallView
+  const { password: passwordFromUrl } = useUrlParams();
+  useEffect(() => {
+    if (passwordFromUrl) saveKeyForRoom(room.roomId, passwordFromUrl);
+  }, [passwordFromUrl, room.roomId]);
+
   usePageTitle(roomName);
 
   const matrixInfo = useMemo((): MatrixInfo => {

src/room/InCallView.tsx

@@ -148,8 +148,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
           logger.error("[Lifecycle] Failed to disconnect from livekit room", e);
         });
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [livekitRoom]);
 
   useEffect(() => {
     if (livekitRoom !== undefined) {

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

@@ -108,7 +108,7 @@ exports[`ConnectionLostError: Action handling should reset error state 1`] = `
           class="error"
         >
           <div
-            class="_content_md016_17 icon"
+            class="_content_o77nw_8 icon"
             data-size="large"
           >
             <svg
@@ -119,12 +119,12 @@ exports[`ConnectionLostError: Action handling should reset error state 1`] = `
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M3.5 3.5a1 1 0 1 0-1.414 1.414l4.113 4.114a5.484 5.484 0 0 0-.184 1.069A5.002 5.002 0 0 0 7 20h10.172l1.914 1.914A1 1 0 0 0 20.5 20.5l-.979-.979.004-.002L7.145 7.14l-.002.004L3.5 3.5Zm18.5 12a4.48 4.48 0 0 1-.928 2.738L8.637 5.803A5.474 5.474 0 0 1 11.5 5a5.49 5.49 0 0 1 4.25 2.008 4 4 0 0 1 4.187 4.708A4.497 4.497 0 0 1 22 15.5Z"
+                d="M3.5 3.5a1 1 0 1 0-1.414 1.414l4.113 4.114a5.5 5.5 0 0 0-.184 1.07A5.002 5.002 0 0 0 7 20h10.172l1.914 1.914A1 1 0 1 0 20.5 20.5l-.979-.979.004-.001L7.145 7.14l-.002.003zm18.5 12a4.48 4.48 0 0 1-.928 2.738L8.637 5.803A5.47 5.47 0 0 1 11.5 5a5.49 5.49 0 0 1 4.25 2.008 4 4 0 0 1 4.187 4.708A4.5 4.5 0 0 1 22 15.5"
               />
             </svg>
           </div>
           <h1
-            class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
+            class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
           >
             Connection lost
           </h1>
@@ -135,7 +135,7 @@ exports[`ConnectionLostError: Action handling should reset error state 1`] = `
             Reconnect
           </button>
           <button
-            class="_button_i91xf_17 homeLink"
+            class="_button_vczzf_8 homeLink"
             data-kind="tertiary"
             data-size="lg"
             role="button"
@@ -258,7 +258,7 @@ exports[`should have a close button in widget mode 1`] = `
           class="error"
         >
           <div
-            class="_content_md016_17 icon"
+            class="_content_o77nw_8 icon"
             data-size="large"
           >
             <svg
@@ -269,17 +269,17 @@ exports[`should have a close button in widget mode 1`] = `
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M16.712 6.713A.968.968 0 0 1 16 7a.968.968 0 0 1-.713-.287A.967.967 0 0 1 15 6c0-.283.096-.52.287-.713A.968.968 0 0 1 16 5a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713Z"
+                d="M16.713 6.713A.97.97 0 0 1 16 7a.97.97 0 0 1-.713-.287A.97.97 0 0 1 15 6q0-.424.287-.713A.97.97 0 0 1 16 5q.424 0 .712.287Q17 5.576 17 6t-.288.713"
               />
               <path
                 clip-rule="evenodd"
-                d="M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H6Zm12 2H6v4h12V4ZM6 12v-2h12v2H6Zm0 2v2h12v-2H6Zm0 6v-2h12v2H6Z"
+                d="M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm12 2H6v4h12zM6 12v-2h12v2zm0 2v2h12v-2zm0 6v-2h12v2z"
                 fill-rule="evenodd"
               />
             </svg>
           </div>
           <h1
-            class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
+            class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
           >
             Call is not supported
           </h1>
@@ -287,7 +287,7 @@ exports[`should have a close button in widget mode 1`] = `
             The server is not configured to work with Element Call. Please contact your server admin (Domain: example.com, Error Code: MISSING_MATRIX_RTC_FOCUS).
           </p>
           <button
-            class="_button_i91xf_17"
+            class="_button_vczzf_8"
             data-kind="primary"
             data-size="lg"
             role="button"
@@ -410,7 +410,7 @@ exports[`should render the error page with link back to home 1`] = `
           class="error"
         >
           <div
-            class="_content_md016_17 icon"
+            class="_content_o77nw_8 icon"
             data-size="large"
           >
             <svg
@@ -421,17 +421,17 @@ exports[`should render the error page with link back to home 1`] = `
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M16.712 6.713A.968.968 0 0 1 16 7a.968.968 0 0 1-.713-.287A.967.967 0 0 1 15 6c0-.283.096-.52.287-.713A.968.968 0 0 1 16 5a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713Z"
+                d="M16.713 6.713A.97.97 0 0 1 16 7a.97.97 0 0 1-.713-.287A.97.97 0 0 1 15 6q0-.424.287-.713A.97.97 0 0 1 16 5q.424 0 .712.287Q17 5.576 17 6t-.288.713"
               />
               <path
                 clip-rule="evenodd"
-                d="M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H6Zm12 2H6v4h12V4ZM6 12v-2h12v2H6Zm0 2v2h12v-2H6Zm0 6v-2h12v2H6Z"
+                d="M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm12 2H6v4h12zM6 12v-2h12v2zm0 2v2h12v-2zm0 6v-2h12v2z"
                 fill-rule="evenodd"
               />
             </svg>
           </div>
           <h1
-            class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
+            class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
           >
             Call is not supported
           </h1>
@@ -439,7 +439,7 @@ exports[`should render the error page with link back to home 1`] = `
             The server is not configured to work with Element Call. Please contact your server admin (Domain: example.com, Error Code: MISSING_MATRIX_RTC_FOCUS).
           </p>
           <button
-            class="_button_i91xf_17 homeLink"
+            class="_button_vczzf_8 homeLink"
             data-kind="tertiary"
             data-size="lg"
             role="button"
@@ -562,7 +562,7 @@ exports[`should report correct error for 'Call is not supported' 1`] = `
           class="error"
         >
           <div
-            class="_content_md016_17 icon"
+            class="_content_o77nw_8 icon"
             data-size="large"
           >
             <svg
@@ -573,17 +573,17 @@ exports[`should report correct error for 'Call is not supported' 1`] = `
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M16.712 6.713A.968.968 0 0 1 16 7a.968.968 0 0 1-.713-.287A.967.967 0 0 1 15 6c0-.283.096-.52.287-.713A.968.968 0 0 1 16 5a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713Z"
+                d="M16.713 6.713A.97.97 0 0 1 16 7a.97.97 0 0 1-.713-.287A.97.97 0 0 1 15 6q0-.424.287-.713A.97.97 0 0 1 16 5q.424 0 .712.287Q17 5.576 17 6t-.288.713"
               />
               <path
                 clip-rule="evenodd"
-                d="M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H6Zm12 2H6v4h12V4ZM6 12v-2h12v2H6Zm0 2v2h12v-2H6Zm0 6v-2h12v2H6Z"
+                d="M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm12 2H6v4h12zM6 12v-2h12v2zm0 2v2h12v-2zm0 6v-2h12v2z"
                 fill-rule="evenodd"
               />
             </svg>
           </div>
           <h1
-            class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
+            class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
           >
             Call is not supported
           </h1>
@@ -591,7 +591,7 @@ exports[`should report correct error for 'Call is not supported' 1`] = `
             The server is not configured to work with Element Call. Please contact your server admin (Domain: example.com, Error Code: MISSING_MATRIX_RTC_FOCUS).
           </p>
           <button
-            class="_button_i91xf_17 homeLink"
+            class="_button_vczzf_8 homeLink"
             data-kind="tertiary"
             data-size="lg"
             role="button"
@@ -714,7 +714,7 @@ exports[`should report correct error for 'Connection lost' 1`] = `
           class="error"
         >
           <div
-            class="_content_md016_17 icon"
+            class="_content_o77nw_8 icon"
             data-size="large"
           >
             <svg
@@ -725,12 +725,12 @@ exports[`should report correct error for 'Connection lost' 1`] = `
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M3.5 3.5a1 1 0 1 0-1.414 1.414l4.113 4.114a5.484 5.484 0 0 0-.184 1.069A5.002 5.002 0 0 0 7 20h10.172l1.914 1.914A1 1 0 0 0 20.5 20.5l-.979-.979.004-.002L7.145 7.14l-.002.004L3.5 3.5Zm18.5 12a4.48 4.48 0 0 1-.928 2.738L8.637 5.803A5.474 5.474 0 0 1 11.5 5a5.49 5.49 0 0 1 4.25 2.008 4 4 0 0 1 4.187 4.708A4.497 4.497 0 0 1 22 15.5Z"
+                d="M3.5 3.5a1 1 0 1 0-1.414 1.414l4.113 4.114a5.5 5.5 0 0 0-.184 1.07A5.002 5.002 0 0 0 7 20h10.172l1.914 1.914A1 1 0 1 0 20.5 20.5l-.979-.979.004-.001L7.145 7.14l-.002.003zm18.5 12a4.48 4.48 0 0 1-.928 2.738L8.637 5.803A5.47 5.47 0 0 1 11.5 5a5.49 5.49 0 0 1 4.25 2.008 4 4 0 0 1 4.187 4.708A4.5 4.5 0 0 1 22 15.5"
               />
             </svg>
           </div>
           <h1
-            class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
+            class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
           >
             Connection lost
           </h1>
@@ -741,7 +741,7 @@ exports[`should report correct error for 'Connection lost' 1`] = `
             Reconnect
           </button>
           <button
-            class="_button_i91xf_17 homeLink"
+            class="_button_vczzf_8 homeLink"
             data-kind="tertiary"
             data-size="lg"
             role="button"
@@ -864,7 +864,7 @@ exports[`should report correct error for 'Incompatible browser' 1`] = `
           class="error"
         >
           <div
-            class="_content_md016_17 icon"
+            class="_content_o77nw_8 icon"
             data-size="large"
           >
             <svg
@@ -875,12 +875,12 @@ exports[`should report correct error for 'Incompatible browser' 1`] = `
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M4 20c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 18V6c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 4 4h16c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412v12c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 20 20H4Zm0-2h16V8H4v10Z"
+                d="M4 20q-.824 0-1.412-.587A1.93 1.93 0 0 1 2 18V6q0-.824.587-1.412A1.93 1.93 0 0 1 4 4h16q.824 0 1.413.588Q22 5.175 22 6v12q0 .824-.587 1.413A1.93 1.93 0 0 1 20 20zm0-2h16V8H4z"
               />
             </svg>
           </div>
           <h1
-            class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
+            class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
           >
             Incompatible browser
           </h1>
@@ -888,7 +888,7 @@ exports[`should report correct error for 'Incompatible browser' 1`] = `
             Your web browser does not support encrypted calls. Supported browsers include Chrome, Safari, and Firefox 117+.
           </p>
           <button
-            class="_button_i91xf_17 homeLink"
+            class="_button_vczzf_8 homeLink"
             data-kind="tertiary"
             data-size="lg"
             role="button"
@@ -1011,7 +1011,7 @@ exports[`should report correct error for 'Insufficient capacity' 1`] = `
           class="error"
         >
           <div
-            class="_content_md016_17 icon"
+            class="_content_o77nw_8 icon"
             data-size="large"
           >
             <svg
@@ -1022,12 +1022,12 @@ exports[`should report correct error for 'Insufficient capacity' 1`] = `
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 15a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 16c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-4c.283 0 .52-.096.713-.287A.968.968 0 0 0 13 12V8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8v4c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 9a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
+                d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
               />
             </svg>
           </div>
           <h1
-            class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
+            class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
           >
             Insufficient capacity
           </h1>
@@ -1035,7 +1035,7 @@ exports[`should report correct error for 'Insufficient capacity' 1`] = `
             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.
           </p>
           <button
-            class="_button_i91xf_17 homeLink"
+            class="_button_vczzf_8 homeLink"
             data-kind="tertiary"
             data-size="lg"
             role="button"

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

@@ -47,7 +47,7 @@ exports[`InCallView > rendering > renders 1`] = `
         <button
           aria-disabled="false"
           aria-labelledby=":r0:"
-          class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
+          class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
           data-kind="primary"
           data-size="lg"
           data-testid="incall_mute"
@@ -63,14 +63,14 @@ exports[`InCallView > rendering > renders 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M8 8v-.006l6.831 6.832-.002.002 1.414 1.415.003-.003 1.414 1.414-.003.003L20.5 20.5a1 1 0 0 1-1.414 1.414l-3.022-3.022A7.949 7.949 0 0 1 13 19.938V21a1 1 0 0 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 1 1 2 0 6 6 0 0 0 8.587 5.415l-1.55-1.55A4.005 4.005 0 0 1 8 12v-1.172L2.086 4.914A1 1 0 0 1 3.5 3.5L8 8Zm9.417 6.583 1.478 1.477A7.963 7.963 0 0 0 20 12a1 1 0 0 0-2 0c0 .925-.21 1.8-.583 2.583ZM8.073 5.238l7.793 7.793c.087-.329.134-.674.134-1.031V6a4 4 0 0 0-7.927-.762Z"
+              d="M8 8v-.006l6.831 6.832-.002.002 1.414 1.415.003-.003 1.414 1.414-.003.003L20.5 20.5a1 1 0 0 1-1.414 1.414l-3.022-3.022A7.95 7.95 0 0 1 13 19.938V21a1 1 0 0 1-2 0v-1.062A8 8 0 0 1 4 12a1 1 0 1 1 2 0 6 6 0 0 0 8.587 5.415l-1.55-1.55A4.005 4.005 0 0 1 8 12v-1.172L2.086 4.914A1 1 0 0 1 3.5 3.5zm9.417 6.583 1.478 1.477A7.96 7.96 0 0 0 20 12a1 1 0 0 0-2 0c0 .925-.21 1.8-.583 2.583M8.073 5.238l7.793 7.793q.132-.495.134-1.031V6a4 4 0 0 0-7.927-.762"
             />
           </svg>
         </button>
         <button
           aria-disabled="false"
           aria-labelledby=":r5:"
-          class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
+          class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
           data-kind="primary"
           data-size="lg"
           data-testid="incall_videomute"
@@ -86,13 +86,13 @@ exports[`InCallView > rendering > renders 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M2.747 2.753 4.35 4.355l.007-.003L18 17.994v.012l3.247 3.247a1 1 0 0 1-1.414 1.414l-2.898-2.898A1.992 1.992 0 0 1 16 20H6a4 4 0 0 1-4-4V8c0-.892.292-1.715.785-2.38L1.333 4.166a1 1 0 0 1 1.414-1.414ZM18 15.166 6.834 4H16a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715v1.45Z"
+              d="M2.747 2.753 4.35 4.355l.007-.003L18 17.994v.012l3.247 3.247a1 1 0 0 1-1.414 1.414l-2.898-2.898A2 2 0 0 1 16 20H6a4 4 0 0 1-4-4V8c0-.892.292-1.715.785-2.38L1.333 4.166a1 1 0 0 1 1.414-1.414M18 15.166 6.834 4H16a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715z"
             />
           </svg>
         </button>
         <button
           aria-labelledby=":ra:"
-          class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
+          class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
           data-kind="secondary"
           data-size="lg"
           role="button"
@@ -107,13 +107,13 @@ exports[`InCallView > rendering > renders 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M12.731 2C13.432 2 14 2.568 14 3.269c0 .578.396 1.074.935 1.286.085.034.17.07.253.106.531.23 1.162.16 1.572-.25a1.269 1.269 0 0 1 1.794 0l1.034 1.035a1.269 1.269 0 0 1 0 1.794c-.41.41-.48 1.04-.248 1.572.036.084.07.168.105.253.212.539.708.935 1.286.935.701 0 1.269.568 1.269 1.269v1.462c0 .701-.568 1.269-1.269 1.269-.578 0-1.074.396-1.287.935-.033.085-.068.17-.104.253-.232.531-.161 1.162.248 1.572a1.269 1.269 0 0 1 0 1.794l-1.034 1.034a1.269 1.269 0 0 1-1.794 0c-.41-.41-1.04-.48-1.572-.248a7.935 7.935 0 0 1-.253.105c-.539.212-.935.708-.935 1.286 0 .701-.568 1.269-1.269 1.269H11.27c-.702 0-1.27-.568-1.27-1.269 0-.578-.396-1.074-.935-1.287a7.975 7.975 0 0 1-.253-.104c-.531-.232-1.162-.161-1.572.248a1.269 1.269 0 0 1-1.794 0l-1.034-1.034a1.269 1.269 0 0 1 0-1.794c.41-.41.48-1.04.249-1.572a7.89 7.89 0 0 1-.106-.253C4.343 14.396 3.847 14 3.27 14 2.568 14 2 13.432 2 12.731V11.27c0-.702.568-1.27 1.269-1.27.578 0 1.074-.396 1.286-.935.034-.085.07-.17.106-.253.23-.531.16-1.162-.25-1.572a1.269 1.269 0 0 1 0-1.794l1.035-1.034a1.269 1.269 0 0 1 1.794 0c.41.41 1.04.48 1.572.249a7.93 7.93 0 0 1 .253-.106c.539-.212.935-.708.935-1.286C10 2.568 10.568 2 11.269 2h1.462ZM12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"
+              d="M12.731 2C13.432 2 14 2.568 14 3.269c0 .578.396 1.074.935 1.286q.128.052.253.106c.531.23 1.162.16 1.572-.25a1.27 1.27 0 0 1 1.794 0l1.034 1.035a1.27 1.27 0 0 1 0 1.794c-.41.41-.48 1.04-.248 1.572l.105.253c.212.539.708.935 1.286.935.701 0 1.269.568 1.269 1.269v1.462c0 .701-.568 1.269-1.269 1.269-.578 0-1.074.396-1.287.935q-.05.128-.104.253c-.232.531-.161 1.162.248 1.572a1.27 1.27 0 0 1 0 1.794l-1.034 1.034a1.27 1.27 0 0 1-1.794 0c-.41-.41-1.04-.48-1.572-.248a8 8 0 0 1-.253.105c-.539.212-.935.708-.935 1.286 0 .701-.568 1.269-1.269 1.269H11.27c-.702 0-1.27-.568-1.27-1.269 0-.578-.396-1.074-.935-1.287a8 8 0 0 1-.253-.104c-.531-.232-1.162-.161-1.572.248a1.27 1.27 0 0 1-1.794 0l-1.034-1.034a1.27 1.27 0 0 1 0-1.794c.41-.41.48-1.04.249-1.572a8 8 0 0 1-.106-.253C4.343 14.396 3.847 14 3.27 14 2.568 14 2 13.432 2 12.731V11.27c0-.702.568-1.27 1.269-1.27.578 0 1.074-.396 1.286-.935q.052-.128.106-.253c.23-.531.16-1.162-.25-1.572a1.27 1.27 0 0 1 0-1.794l1.035-1.034a1.27 1.27 0 0 1 1.794 0c.41.41 1.04.48 1.572.249a8 8 0 0 1 .253-.106c.539-.212.935-.708.935-1.286C10 2.568 10.568 2 11.269 2zM12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8"
             />
           </svg>
         </button>
         <button
           aria-labelledby=":rf:"
-          class="_button_i91xf_17 endCall _has-icon_i91xf_66 _icon-only_i91xf_59 _destructive_i91xf_116"
+          class="_button_vczzf_8 endCall _has-icon_vczzf_57 _icon-only_vczzf_50 _destructive_vczzf_107"
           data-kind="primary"
           data-size="lg"
           data-testid="incall_leave"
@@ -129,7 +129,7 @@ exports[`InCallView > rendering > renders 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="m2.765 16.02-2.47-2.416A1.018 1.018 0 0 1 0 12.852c0-.304.098-.555.295-.751a15.64 15.64 0 0 1 5.316-3.786A15.89 15.89 0 0 1 12 7c2.237 0 4.367.443 6.39 1.329a15.977 15.977 0 0 1 5.315 3.772c.197.196.295.447.295.751 0 .305-.098.555-.295.752l-2.47 2.416a1.047 1.047 0 0 1-1.396.108l-3.114-2.363a1.067 1.067 0 0 1-.322-.376 1.066 1.066 0 0 1-.108-.483v-2.27a13.593 13.593 0 0 0-2.12-.524C13.459 9.996 12 9.937 12 9.937s-1.459.059-2.175.175c-.715.116-1.422.29-2.12.523v2.271c0 .179-.036.34-.108.483a1.066 1.066 0 0 1-.322.376l-3.114 2.363a1.047 1.047 0 0 1-1.396-.107Z"
+              d="m2.765 16.02-2.47-2.416A1.02 1.02 0 0 1 0 12.852q0-.456.295-.751a15.6 15.6 0 0 1 5.316-3.786A15.9 15.9 0 0 1 12 7q3.355 0 6.39 1.329a16 16 0 0 1 5.315 3.772q.295.294.295.751t-.295.752l-2.47 2.416a1.047 1.047 0 0 1-1.396.108l-3.114-2.363a1.1 1.1 0 0 1-.322-.376 1.1 1.1 0 0 1-.108-.483v-2.27a13.6 13.6 0 0 0-2.12-.524C13.459 9.996 12 9.937 12 9.937s-1.459.059-2.174.175q-1.074.174-2.121.523v2.271q0 .268-.108.483a1.1 1.1 0 0 1-.322.376l-3.114 2.363a1.047 1.047 0 0 1-1.396-.107"
             />
           </svg>
         </button>
@@ -152,7 +152,7 @@ exports[`InCallView > rendering > renders 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M5 5h14v8h-5a1 1 0 0 0-1 1v5H5V5Zm10 14v-4h4v4h-4ZM5 21h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2Z"
+            d="M5 5h14v8h-5a1 1 0 0 0-1 1v5H5zm10 14v-4h4v4zM5 21h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2"
           />
         </svg>
         <input
@@ -171,7 +171,7 @@ exports[`InCallView > rendering > renders 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M4 11a.967.967 0 0 1-.712-.287A.968.968 0 0 1 3 10V4c0-.283.096-.52.288-.712A.968.968 0 0 1 4 3h6a.97.97 0 0 1 .713.288A.968.968 0 0 1 11 4v6c0 .283-.096.52-.287.713A.968.968 0 0 1 10 11H4Zm5-2V5H5v4h4Zm5 12a.968.968 0 0 1-.713-.288A.968.968 0 0 1 13 20v-6c0-.283.096-.52.287-.713A.968.968 0 0 1 14 13h6a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v6c0 .283-.096.52-.288.712A.968.968 0 0 1 20 21h-6Zm5-2v-4h-4v4h4ZM4 21a.967.967 0 0 1-.712-.288A.968.968 0 0 1 3 20v-6a.97.97 0 0 1 .288-.713A.967.967 0 0 1 4 13h6c.283 0 .52.096.713.287.191.192.287.43.287.713v6a.97.97 0 0 1-.287.712A.968.968 0 0 1 10 21H4Zm5-2v-4H5v4h4Zm5-8a.968.968 0 0 1-.713-.287A.968.968 0 0 1 13 10V4a.97.97 0 0 1 .287-.712A.968.968 0 0 1 14 3h6c.283 0 .52.096.712.288A.965.965 0 0 1 21 4v6a.97.97 0 0 1-.288.713A.968.968 0 0 1 20 11h-6Zm5-2V5h-4v4h4Z"
+            d="M4 11a.97.97 0 0 1-.712-.287A.97.97 0 0 1 3 10V4q0-.424.288-.712A.97.97 0 0 1 4 3h6q.424 0 .713.288Q11 3.575 11 4v6q0 .424-.287.713A.97.97 0 0 1 10 11zm5-2V5H5v4zm5 12a.97.97 0 0 1-.713-.288A.97.97 0 0 1 13 20v-6q0-.424.287-.713A.97.97 0 0 1 14 13h6q.424 0 .712.287.288.288.288.713v6q0 .424-.288.712A.97.97 0 0 1 20 21zm5-2v-4h-4v4zM4 21a.97.97 0 0 1-.712-.288A.97.97 0 0 1 3 20v-6q0-.424.288-.713A.97.97 0 0 1 4 13h6q.424 0 .713.287.287.288.287.713v6q0 .424-.287.712A.97.97 0 0 1 10 21zm5-2v-4H5v4zm5-8a.97.97 0 0 1-.713-.287A.97.97 0 0 1 13 10V4q0-.424.287-.712A.97.97 0 0 1 14 3h6q.424 0 .712.288Q21 3.575 21 4v6q0 .424-.288.713A.97.97 0 0 1 20 11zm5-2V5h-4v4z"
           />
         </svg>
       </div>

src/settings/FeedbackSettingsTab.tsx

@@ -57,7 +57,7 @@ export const FeedbackSettingsTab: FC<Props> = ({ roomId }) => {
 
   const [optInAnalytics, setOptInAnalytics] = useOptInAnalytics();
   const optInDescription = (
-    <Text size="sm">
+    <Text size="sm" as="span">
       <Trans i18nKey="settings.opt_in_description">
         <AnalyticsNotice />
         <br />

src/settings/SettingsModal.tsx

@@ -129,7 +129,7 @@ export const SettingsModal: FC<Props> = ({
               }
             />
           )}
-          {iosDeviceMenu && (
+          {iosDeviceMenu && controlledAudioDevices && (
             <Button
               onClick={(e): void => {
                 e.preventDefault();

src/state/CallViewModel.test.ts

@@ -26,11 +26,11 @@ import {
   type RemoteParticipant,
 } from "livekit-client";
 import * as ComponentsCore from "@livekit/components-core";
-import { isEqual } from "lodash-es";
 import {
   type CallMembership,
   type MatrixRTCSession,
 } from "matrix-js-sdk/lib/matrixrtc";
+import { deepCompare } from "matrix-js-sdk/lib/utils";
 
 import { CallViewModel, type Layout } from "./CallViewModel";
 import {
@@ -200,7 +200,7 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
     // care about the most recent value for each time step, so discard these
     // extra values.
     debounceTime(0),
-    distinctUntilChanged(isEqual),
+    distinctUntilChanged(deepCompare),
   );
 }
 

src/tabs/Tabs.tsx

@@ -36,6 +36,7 @@ export function TabContainer<K extends Key>({
       <NavBar role="tablist" aria-label={label} className={styles.tabList}>
         {tabs.map(({ key, name }) => (
           <NavItem
+            key={key}
             aria-controls={`${idPrefix}[${key}]`}
             onClick={() => onTabChange(key)}
             active={key === tab}
@@ -46,6 +47,7 @@ export function TabContainer<K extends Key>({
       </NavBar>
       {tabs.map(({ key, content }) => (
         <div
+          key={key}
           id={`${idPrefix}[${key}]`}
           style={{ display: key === tab ? undefined : "none" }}
         >

src/tile/MediaView.tsx

@@ -13,7 +13,7 @@ import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import { VideoTrack } from "@livekit/components-react";
 import { Text, Tooltip } from "@vector-im/compound-web";
-import { ErrorIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { ErrorSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import styles from "./MediaView.module.css";
 import { Avatar } from "../Avatar";
@@ -168,7 +168,7 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
                 placement="bottom"
                 isTriggerInteractive={false}
               >
-                <ErrorIcon
+                <ErrorSolidIcon
                   width={20}
                   height={20}
                   className={styles.errorIcon}

src/useAudioContext.test.tsx

@@ -87,19 +87,12 @@ export const testAudioContext = {
   createGain: vi.fn().mockReturnValue(gainNode),
   createStereoPanner: vi.fn().mockReturnValue(panNode),
   close: vi.fn().mockResolvedValue(undefined),
-  createMediaStreamDestination: vi.fn().mockReturnValue({ stream: undefined }),
 };
 export const TestAudioContextConstructor = vi.fn(() => testAudioContext);
-export const testAudioElement = {
-  setSinkId: vi.fn().mockResolvedValue(null),
-};
-export const TestAudioConstructor = vi.fn(() => testAudioElement);
 
 let user: UserEvent;
 beforeEach(() => {
   vi.stubGlobal("AudioContext", TestAudioContextConstructor);
-  vi.stubGlobal("Audio", TestAudioConstructor);
-
   user = userEvent.setup();
 });
 
@@ -121,7 +114,6 @@ test("will ignore sounds that are not registered", async () => {
 });
 
 test("will use the correct device", () => {
-  testAudioElement.setSinkId.mockClear();
   render(
     <MediaDevicesContext.Provider
       value={{
@@ -142,7 +134,7 @@ test("will use the correct device", () => {
     </MediaDevicesContext.Provider>,
   );
   expect(testAudioContext.createBufferSource).not.toHaveBeenCalled();
-  expect(testAudioElement.setSinkId).toHaveBeenCalledWith("chosen-device");
+  expect(testAudioContext.setSinkId).toHaveBeenCalledWith("chosen-device");
 });
 
 test("will use the correct volume level", async () => {

src/useAudioContext.tsx

@@ -18,8 +18,6 @@ import {
 } from "./livekit/MediaDevicesContext";
 import { type PrefetchedSounds } from "./soundUtils";
 import { useUrlParams } from "./UrlParams";
-import { useInitial } from "./useInitial";
-import * as controls from "./controls";
 
 /**
  * Play a sound though a given AudioContext. Will take
@@ -44,7 +42,6 @@ async function playSound(
   src.buffer = buffer;
   src.connect(gain).connect(pan).connect(ctx.destination);
   const p = new Promise<void>((r) => src.addEventListener("ended", () => r()));
-  controls.setPlaybackStarted();
   src.start();
   return p;
 }
@@ -79,18 +76,15 @@ export function useAudioContext<S extends string>(
   const [audioContext, setAudioContext] = useState<AudioContext>();
   const [audioBuffers, setAudioBuffers] = useState<Record<S, AudioBuffer>>();
 
-  const htmlAudioElement = useInitial((): HTMLAudioElement => new Audio());
-
   useEffect(() => {
     const sounds = props.sounds;
-    if (!sounds || !htmlAudioElement) {
+    if (!sounds) {
       return;
     }
     const ctx = new AudioContext({
       // We want low latency for these effects.
       latencyHint: props.latencyHint,
     });
-    htmlAudioElement.srcObject = ctx.createMediaStreamDestination().stream;
 
     // We want to clone the content of our preloaded
     // sound buffers into this context. The context may
@@ -113,16 +107,22 @@ export function useAudioContext<S extends string>(
       });
       setAudioContext(undefined);
     };
-  }, [props.sounds, props.latencyHint, htmlAudioElement]);
+  }, [props.sounds, props.latencyHint]);
 
   // Update the sink ID whenever we change devices.
   useEffect(() => {
-    if (!controlledAudioDevices && audioOutput.selectedId) {
-      htmlAudioElement.setSinkId(audioOutput.selectedId).catch((ex) => {
+    if (
+      audioContext &&
+      "setSinkId" in audioContext &&
+      !controlledAudioDevices
+    ) {
+      // https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/setSinkId
+      // @ts-expect-error - setSinkId doesn't exist yet in types, maybe because it's not supported everywhere.
+      audioContext.setSinkId(audioOutput.selectedId).catch((ex) => {
         logger.warn("Unable to change sink for audio context", ex);
       });
     }
-  }, [audioOutput.selectedId, controlledAudioDevices, htmlAudioElement]);
+  }, [audioContext, audioOutput.selectedId, controlledAudioDevices]);
   const { pan: earpiecePan, volume: earpieceVolume } = useEarpieceAudioConfig();
 
   // Don't return a function until we're ready.

src/useLocalStorage.ts

@@ -43,14 +43,6 @@ export const setLocalStorageItemReactive = (
   key: string,
   value: string,
 ): void => {
-  // Avoid unnecessary updates. Not avoiding them so can cause unexpected state updates across hooks.
-  // For instance:
-  // - In call view uses useRoomEncryptionSystem
-  // - This will set the key again.
-  // - All other instances of useRoomEncryptionSystem will now do a useMemo update of the e2eeSystem
-  //   - because the dependency `storedPassword = useInternalRoomSharedKey(roomId);` would change.
-  if (localStorage.getItem(key) === value) return;
-
   localStorage.setItem(key, value);
   localStorageBus.emit(key);
 };

tsconfig.json

@@ -22,6 +22,9 @@
       // These imports within @livekit/components-core and
       // @livekit/components-react are broken under the "bundler" module
       // resolution mode, so we need to resolve them manually
+      "livekit-client/dist/src/room/types": [
+        "./node_modules/livekit-client/dist/src/room/types.d.ts"
+      ],
       "livekit-client/dist/src/room/Room": [
         "./node_modules/livekit-client/dist/src/room/Room.d.ts"
       ],

vite.config.js

@@ -89,6 +89,7 @@ export default defineConfig(({ mode, packageType }) => {
       },
     },
     build: {
+      minify: mode === "production" ? true : false,
       sourcemap: true,
       rollupOptions: {
         output: {