Precompress assets and set the right cache headers

* Load the Intl.Segmenter polyfill only if needed

* Also polyfill Intl.DurationFormat only if needed

* Polyfill Intl.* in tests

* Load the default translations in tests

* Instanciate the Intl.DurationFormat in the component

.eslintrc.cjs

@@ -8,12 +8,13 @@ Please see LICENSE in the repository root for full details.
 `;
 
 module.exports = {
-  plugins: ["matrix-org"],
+  plugins: ["matrix-org", "rxjs"],
   extends: [
     "plugin:matrix-org/react",
     "plugin:matrix-org/a11y",
     "plugin:matrix-org/typescript",
     "prettier",
+    "plugin:rxjs/recommended",
   ],
   parserOptions: {
     ecmaVersion: "latest",

.github/workflows/build.yaml

@@ -23,3 +23,4 @@ jobs:
       SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
       SENTRY_URL: ${{ secrets.SENTRY_URL }}
       SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+      CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}

.github/workflows/docker.yaml

@@ -23,7 +23,7 @@ jobs:
       packages: write
     steps:
       - name: Check it out
-        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
 
       - name: 📥 Download artifact
         uses: actions/download-artifact@fa0a91b85d4f404e444e00e005971372dc801d16 # v4
@@ -48,10 +48,10 @@ jobs:
           tags: ${{ inputs.docker_tags}}
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@988b5a0280414f521da01fcc63a27aeeb4b104db # v3.6.1
+        uses: docker/setup-buildx-action@c47758b77c9736f4b2ef4073d4d51994fabfe349 # v3.7.1
 
       - name: Build and push Docker image
-        uses: docker/build-push-action@5cd11c3a4ced054e52742c5fd54dca954e0edd85 # v6.7.0
+        uses: docker/build-push-action@4f58ea79222b3b9dc2c8bbdd6debcef730109a75 # v6.9.0
         with:
           context: .
           platforms: linux/amd64,linux/arm64

.github/workflows/e2e.yml

@@ -12,7 +12,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out test private repo
-        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
         with:
           repository: element-hq/static-call-participant
           ref: refs/heads/main

.github/workflows/element-call.yaml

@@ -14,6 +14,8 @@ on:
         required: true
       SENTRY_AUTH_TOKEN:
         required: true
+      CODECOV_TOKEN:
+        required: false
 
 jobs:
   build:
@@ -21,9 +23,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
       - name: Yarn cache
-        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4
+        uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4
         with:
           cache: "yarn"
           node-version: "lts/*"
@@ -36,10 +38,11 @@ jobs:
           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: Upload Artifact
-        uses: actions/upload-artifact@50769540e7f4bd5e21e526ee35c689e35e0d6874 # v4
+        uses: actions/upload-artifact@b4b15b8c7c6ac21ea08fcf65892d2ee8f75cf882 # v4
         with:
           name: build-output
           path: dist

.github/workflows/lint.yaml

@@ -7,9 +7,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
       - name: Yarn cache
-        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4
+        uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4
         with:
           cache: "yarn"
           node-version: "lts/*"

.github/workflows/publish.yaml

@@ -51,7 +51,7 @@ jobs:
         run: |
           tar --numeric-owner --transform "s/dist/element-call-${TARBALL_VERSION}/" -cvzf element-call-${TARBALL_VERSION}.tar.gz dist
       - name: Upload
-        uses: actions/upload-artifact@50769540e7f4bd5e21e526ee35c689e35e0d6874 # v4.4.0
+        uses: actions/upload-artifact@b4b15b8c7c6ac21ea08fcf65892d2ee8f75cf882 # v4.4.3
         env:
           GITHUB_TOKEN: ${{ github.token }}
         with:

.github/workflows/test.yaml

@@ -9,9 +9,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
       - name: Yarn cache
-        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4
+        uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4
         with:
           cache: "yarn"
           node-version: "lts/*"
@@ -20,7 +20,7 @@ jobs:
       - name: Vitest
         run: "yarn run test:coverage"
       - name: Upload to codecov
-        uses: codecov/codecov-action@e28ff129e5465c2c0dcc6f003fc735cb6ae0c673 # v4
+        uses: codecov/codecov-action@b9fd7d16f6d7d1b5d2bec1a2887e65ceed900238 # v4
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
         with:

.github/workflows/translations-download.yaml

@@ -13,9 +13,9 @@ jobs:
 
     steps:
       - name: Checkout the code
-        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
 
-      - uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4
+      - uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4
         with:
           cache: "yarn"
           node-version: "lts/*"
@@ -39,7 +39,7 @@ jobs:
 
       - name: Create Pull Request
         id: cpr
-        uses: peter-evans/create-pull-request@d121e62763d8cc35b5fb1710e887d6e69a52d3a4 # v7.0.2
+        uses: peter-evans/create-pull-request@5e914681df9dc83aa4e4905692ca88beb2f9e91f # v7.0.5
         with:
           token: ${{ secrets.ELEMENT_BOT_TOKEN }}
           branch: actions/localazy-download

.github/workflows/translations-upload.yaml

@@ -14,7 +14,7 @@ jobs:
 
     steps:
       - name: Checkout the code
-        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
 
       - name: Upload
         uses: localazy/upload@27e6b5c0fddf4551596b42226b1c24124335d24a # v1

.gitignore

@@ -6,5 +6,6 @@ dist-ssr
 *.local
 .idea/
 public/config.json
+backend/synapse_tmp/*
 /coverage
 yarn-error.log

Dockerfile

@@ -2,9 +2,3 @@ FROM nginxinc/nginx-unprivileged:alpine
 
 COPY ./dist /app
 COPY config/nginx.conf /etc/nginx/conf.d/default.conf
-
-USER root
-
-RUN rm -rf /usr/share/nginx/html
-
-USER 101

README.md

@@ -3,17 +3,24 @@
 [![Chat](https://img.shields.io/matrix/webrtc:matrix.org)](https://matrix.to/#/#webrtc:matrix.org)
 [![Localazy](https://img.shields.io/endpoint?url=https%3A%2F%2Fconnect.localazy.com%2Fstatus%2Felement-call%2Fdata%3Fcontent%3Dall%26title%3Dlocalazy%26logo%3Dtrue)](https://localazy.com/p/element-call)
 
-Group calls with WebRTC that leverage [Matrix](https://matrix.org) and an open-source WebRTC toolkit from [LiveKit](https://livekit.io/).
+Group calls with WebRTC that leverage [Matrix](https://matrix.org) and an
+open-source WebRTC toolkit from [LiveKit](https://livekit.io/).
 
-For prior version of the Element Call that relied solely on full-mesh logic, check [`full-mesh`](https://github.com/element-hq/element-call/tree/full-mesh) branch.
+For prior version of the Element Call that relied solely on full-mesh logic,
+check [`full-mesh`](https://github.com/element-hq/element-call/tree/full-mesh)
+branch.
 
 ![A demo of Element Call with six people](demo.jpg)
 
-To try it out, visit our hosted version at [call.element.io](https://call.element.io). You can also find the latest development version continuously deployed to [call.element.dev](https://call.element.dev/).
+To try it out, visit our hosted version at
+[call.element.io](https://call.element.io). You can also find the latest
+development version continuously deployed to
+[call.element.dev](https://call.element.dev/).
 
 ## Host it yourself
 
-Until prebuilt tarballs are available, you'll need to build Element Call from source. First, clone and install the package:
+Until prebuilt tarballs are available, you'll need to build Element Call from
+source. First, clone and install the package:
 
 ```
 git clone https://github.com/element-hq/element-call.git
@@ -22,17 +29,23 @@ yarn
 yarn build
 ```
 
-If all went well, you can now find the build output under `dist` as a series of static files. These can be hosted using any web server that can be configured with custom routes (see below).
+If all went well, you can now find the build output under `dist` as a series of
+static files. These can be hosted using any web server that can be configured
+with custom routes (see below).
 
-You may also wish to add a configuration file (Element Call uses the domain it's hosted on as a Homeserver URL by default,
-but you can change this in the config file). This goes in `public/config.json` - you can use the sample as a starting point:
+You may also wish to add a configuration file (Element Call uses the domain it's
+hosted on as a Homeserver URL by default, but you can change this in the config
+file). This goes in `public/config.json` - you can use the sample as a starting
+point:
 
 ```
 cp config/config.sample.json public/config.json
 # edit public/config.json
 ```
 
-Because Element Call uses client-side routing, your server must be able to route any requests to non-existing paths back to `/index.html`. For example, in Nginx you can achieve this with the `try_files` directive:
+Because Element Call uses client-side routing, your server must be able to route
+any requests to non-existing paths back to `/index.html`. For example, in Nginx
+you can achieve this with the `try_files` directive:
 
 ```
 server {
@@ -44,28 +57,63 @@ server {
 }
 ```
 
-By default, the app expects you to have a Matrix homeserver (such as [Synapse](https://matrix-org.github.io/synapse/latest/setup/installation.html)) installed locally and running on port 8008. If you wish to use a homeserver on a different URL or one that is hosted on a different server, you can add a config file as above, and include the homeserver URL that you'd like to use.
+By default, the app expects you to have a Matrix homeserver (such as
+[Synapse](https://element-hq.github.io/synapse/latest/setup/installation.html))
+installed locally and running on port 8008. If you wish to use a homeserver on a
+different URL or one that is hosted on a different server, you can add a config
+file as above, and include the homeserver URL that you'd like to use.
 
-Element Call requires a homeserver with registration enabled without any 3pid or token requirements, if you want it to be used by unregistered users. Furthermore, it is not recommended to use it with an existing homeserver where user accounts have joined normal rooms, as it may not be able to handle those yet and it may behave unreliably.
+Element Call requires a homeserver with registration enabled without any 3pid or
+token requirements, if you want it to be used by unregistered users.
+Furthermore, it is not recommended to use it with an existing homeserver where
+user accounts have joined normal rooms, as it may not be able to handle those
+yet and it may behave unreliably.
 
-Therefore, to use a self-hosted homeserver, this is recommended to be a new server where any user account created has not joined any normal rooms anywhere in the Matrix federated network. The homeserver used can be setup to disable federation, so as to prevent spam registrations (if you keep registrations open) and to ensure Element Call continues to work in case any user decides to log in to their Element Call account using the standard Element app and joins normal rooms that Element Call cannot handle.
+Therefore, to use a self-hosted homeserver, this is recommended to be a new
+server where any user account created has not joined any normal rooms anywhere
+in the Matrix federated network. The homeserver used can be setup to disable
+federation, so as to prevent spam registrations (if you keep registrations open)
+and to ensure Element Call continues to work in case any user decides to log in
+to their Element Call account using the standard Element app and joins normal
+rooms that Element Call cannot handle.
 
 ## Configuration
 
-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).
+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).
 
-If you're using [Synapse](https://github.com/element-hq/synapse/), you'll need to additionally add the following to `homeserver.yaml` or Element Call won't work:
+If you're using [Synapse](https://github.com/element-hq/synapse/), you'll need
+to additionally add the following to `homeserver.yaml` or Element Call won't
+work:
 
 ```
 experimental_features:
+    # MSC3266: Room summary API. Used for knocking over federation
     msc3266_enabled: true
+
+# The maximum allowed duration by which sent events can be delayed, as
+# per MSC4140.
+max_event_delay_duration: 24h
+
+rc_message:
+  # This needs to match at least the heart-beat frequency plus a bit of headroom
+  # Currently the heart-beat is every 5 seconds which translates into a rate of 0.2s
+  per_second: 0.5
+  burst_count: 30
 ```
 
-MSC3266 allows to request a room summary of rooms you are not joined.
-The summary contains the room join rules. We need that to decide if the user gets prompted with the option to knock ("ask to join"), a cannot join error or the join view.
+MSC3266 allows to request a room summary of rooms you are not joined. The
+summary contains the room join rules. We need that to decide if the user gets
+prompted with the option to knock ("Request to join call"), a cannot join error or the
+join view.
 
-Element Call requires a Livekit SFU behind a Livekit jwt service to work. The url to the Livekit jwt service can either be configured in the config of Element Call (fallback/legacy configuration) or be configured by your homeserver via the `.well-known`.
-This is the recommended method.
+Element Call requires a Livekit SFU alongside a [Livekit JWT
+service](https://github.com/element-hq/lk-jwt-service) to work. The url to the
+Livekit JWT service can either be configured in the config of Element Call
+(fallback/legacy configuration) or be configured by your homeserver via the
+`.well-known/matrix/client`. This is the recommended method.
 
 The configuration is a list of Foci configs:
 
@@ -88,13 +136,18 @@ The configuration is a list of Foci configs:
 
 ## Translation
 
-If you'd like to help translate Element Call, head over to [Localazy](https://localazy.com/p/element-call). You're also encouraged to join the [Element Translators](https://matrix.to/#/#translators:element.io) space to discuss and coordinate translation efforts.
+If you'd like to help translate Element Call, head over to
+[Localazy](https://localazy.com/p/element-call). You're also encouraged to join
+the [Element Translators](https://matrix.to/#/#translators:element.io) space to
+discuss and coordinate translation efforts.
 
 ## Development
 
 ### Frontend
 
-Element Call is built against [matrix-js-sdk](https://github.com/matrix-org/matrix-js-sdk/pull/2553). To get started, clone, install, and link the package:
+Element Call is built against
+[matrix-js-sdk](https://github.com/matrix-org/matrix-js-sdk/pull/2553). To get
+started, clone, install, and link the package:
 
 ```
 git clone https://github.com/matrix-org/matrix-js-sdk.git
@@ -112,6 +165,15 @@ yarn
 yarn link matrix-js-sdk
 ```
 
+To use it, create a local config by, e.g., `cp ./config/config.devenv.json
+./public/config.json` and adapt it if necessary. The `config.devenv.json` config
+should work with the backend development environment as outlined in the next
+section out of box.
+
+(Be aware, that this `config.devenv.json` is exposing a deprecated fallback
+LiveKit config key. If the homeserver advertises SFU backend via
+`.well-known/matrix/client` this has precedence.)
+
 You're now ready to launch the development server:
 
 ```
@@ -120,25 +182,25 @@ yarn dev
 
 ### Backend
 
-A docker compose file is provided to start a LiveKit server and auth
-service for development. These use a test 'secret' published in this
-repository, so this must be used only for local development and
-**_never be exposed to the public Internet._**
+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:
 
-To use it, add a SFU parameter in your local config `./public/config.json`:
-(Be aware, that this is only the fallback Livekit SFU. If the homeserver
-advertises one in the client well-known, this will not be used.)
+- Minimum Synapse Setup (servername: synapse.localhost)
+- LiveKit JWT Service (Note requires Federation API and hence a TLS reverse proxy)
+- Minimum TLS reverse proxy (servername: synapse.localhost) Note certificates
+  are valid for at least 10 years from now
+- Minimum LiveKit SFU Setup using dev defaults for config
+- Redis db for completness
 
-```json
-"livekit": {
-  "livekit_service_url": "http://localhost:7881"
-},
-```
+These use a test 'secret' published in this repository, so this must be used
+only for local development and **_never be exposed to the public Internet._**
 
 Run backend components:
 
 ```
 yarn backend
+# or  for podman-compose
+# podman-compose -f dev-backend-docker-compose.yml up
 ```
 
 ### Test Coverage
@@ -150,7 +212,8 @@ yarn backend
 To add a new translation key you can do these steps:
 
 1. Add the new key entry to the code where the new key is used: `t("some_new_key")`
-1. Run `yarn i18n` to extract the new key and update the translation files. This will add a skeleton entry to the `public/locales/en-GB/app.json` file:
+1. Run `yarn i18n` to extract the new key and update the translation files. This
+   will add a skeleton entry to the `public/locales/en-GB/app.json` file:
    ```jsonc
    {
        ...
@@ -158,14 +221,16 @@ To add a new translation key you can do these steps:
        ...
    }
    ```
-1. Update the skeleton entry in the `public/locales/en-GB/app.json` file with the English translation:
-   ```jsonc
+1. Update the skeleton entry in the `public/locales/en-GB/app.json` file with
+   the English translation:
+
+```jsonc
    {
        ...
        "some_new_key": "Some new key",
        ...
    }
-   ```
+```
 
 ## Documentation
 

backend-docker-compose.yml

@@ -1,44 +0,0 @@
-version: "3.9"
-
-networks:
-  lkbackend:
-
-services:
-  auth-service:
-    image: ghcr.io/element-hq/lk-jwt-service:latest-ci
-    hostname: auth-server
-    ports:
-      - 8881:8080
-    environment:
-      - LIVEKIT_URL=ws://localhost:7880
-      - LIVEKIT_KEY=devkey
-      - LIVEKIT_SECRET=secret
-    deploy:
-      restart_policy:
-        condition: on-failure
-    networks:
-      - lkbackend
-
-  livekit:
-    image: livekit/livekit-server:latest
-    command: --dev --config /etc/livekit.yaml
-    restart: unless-stopped
-    ports:
-      - "7880:7880"
-      - "7881:7881"
-      - "7882:7882"
-      - "50100-50200:50100-50200"
-    volumes:
-      - ./backend/livekit.yaml:/etc/livekit.yaml
-    networks:
-      - lkbackend
-
-  redis:
-    image: redis:6-alpine
-    command: redis-server /etc/redis.conf
-    ports:
-      - 6379:6379
-    volumes:
-      - ./backend/redis.conf:/etc/redis.conf
-    networks:
-      - lkbackend

backend/dev_homeserver.yaml

@@ -0,0 +1,51 @@
+server_name: "synapse.localhost"
+public_baseurl: http://synapse.localhost:8008/
+
+pid_file: /data/homeserver.pid
+
+listeners:
+  - port: 8008
+    tls: false
+    type: http
+    x_forwarded: true
+    resources:
+      - names: [client, federation, openid]
+        compress: false
+
+database:
+  name: sqlite3
+  args:
+    database: /data/homeserver.db
+
+media_store_path: /data/media_store
+signing_key_path: "/data/SERVERNAME.signing.key"
+trusted_key_servers:
+  - server_name: "matrix.org"
+
+experimental_features:
+  # MSC3266: Room summary API. Used for knocking over federation
+  msc3266_enabled: true
+
+# The maximum allowed duration by which sent events can be delayed, as
+# per MSC4140. Must be a positive value if set.  Defaults to no
+# duration (null), which disallows sending delayed events.
+max_event_delay_duration: 24h
+
+# Ratelimiting settings for client actions (registration, login, messaging).
+#
+# Each ratelimiting configuration is made of two parameters:
+#   - per_second: number of requests a client can send per second.
+#   - burst_count: number of requests a client can send before being throttled.
+
+rc_message:
+  # This needs to match at least the heart-beat frequency plus a bit of headroom
+  # Currently the heart-beat is every 5 seconds which translates into a rate of 0.2s
+  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/tls_localhost_cert.pem

@@ -0,0 +1,22 @@
+-----BEGIN CERTIFICATE-----
+MIIDtzCCAp+gAwIBAgIUCmJjl3HAeLmrPwRg+/OzikW6peQwDQYJKoZIhvcNAQEL
+BQAwazELMAkGA1UEBhMCR0IxDzANBgNVBAgMBkxvbmRvbjEPMA0GA1UEBwwGTG9u
+ZG9uMQ4wDAYDVQQKDAVBbHJvczEWMBQGA1UECwwNSVQgRGVwYXJ0bWVudDESMBAG
+A1UEAwwJbG9jYWxob3N0MB4XDTI0MTEwNDIxNDcwMFoXDTM0MTEwMjIxNDcwMFow
+azELMAkGA1UEBhMCR0IxDzANBgNVBAgMBkxvbmRvbjEPMA0GA1UEBwwGTG9uZG9u
+MQ4wDAYDVQQKDAVBbHJvczEWMBQGA1UECwwNSVQgRGVwYXJ0bWVudDESMBAGA1UE
+AwwJbG9jYWxob3N0MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAs368
+ExLSudP8luNoY5UfaPqBSVJUPYBi+JGyd36tyN75p5OI7xSfHTttQxuD4KrExBFP
+C8mAhE1eoZPBVBOZJ4FYWBJfMaQnCjeqU+laP36td65kSJYbUYlKYH1WpxEpCdgx
+wWOKkP/kPX5YXbYqODx9aBJXgoT3yAJW7AniIoL+eLFnS9Xo86TPqCDBTJU9ocwK
+gPIDLhDv60724rhZT1kbGp7ECqRovndoDTQjuws2D3yNMfQ+4rrQGPXHGmP5PcaR
+0R7uueB+6APyC7MJbuhbxxg/+DFHrRi3lJsgwxuh2hi/+vWw8zgKlgYIwHFA9X0l
+cX0UlQdENMH3bgcGIwIDAQABo1MwUTAdBgNVHQ4EFgQUUFGxw7zoiHXGwRqtagjZ
+RPYc85cwHwYDVR0jBBgwFoAUUFGxw7zoiHXGwRqtagjZRPYc85cwDwYDVR0TAQH/
+BAUwAwEB/zANBgkqhkiG9w0BAQsFAAOCAQEALokb1z2lu3qW141b2wm14ilZQKCZ
+reNNuUR95Uom96FXPH4QVEH+mYTXXJ5UrfNhQYKQFpdE+5S4HL/UqEOxtWvbAHpK
+nsLQ62J8m+0+uwiJGqeQpWr03KJgXDAVE9X3XwMlp/+buxSLhc+GIHWuXW56itV2
+jiZJYjhO5SnhhgTWNoVZk93qXuuWEN0yacw7c3Fr1IvFYYYWufbXTk70dbZihPDK
+VD141o8tpp6FerSKHNYDqkVFDyTz3DVOhQQJ59zfMre7bFr+PpTTl4vIuGzXEY+E
+HPjUSlOzwkCoh5fu7Fs3qG55rJt8akhTEoKpiBTaLucgAjVWNHeci1+Yxg==
+-----END CERTIFICATE-----

backend/tls_localhost_key.pem

@@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQCzfrwTEtK50/yW
+42hjlR9o+oFJUlQ9gGL4kbJ3fq3I3vmnk4jvFJ8dO21DG4PgqsTEEU8LyYCETV6h
+k8FUE5kngVhYEl8xpCcKN6pT6Vo/fq13rmRIlhtRiUpgfVanESkJ2DHBY4qQ/+Q9
+flhdtio4PH1oEleChPfIAlbsCeIigv54sWdL1ejzpM+oIMFMlT2hzAqA8gMuEO/r
+TvbiuFlPWRsansQKpGi+d2gNNCO7CzYPfI0x9D7iutAY9ccaY/k9xpHRHu654H7o
+A/ILswlu6FvHGD/4MUetGLeUmyDDG6HaGL/69bDzOAqWBgjAcUD1fSVxfRSVB0Q0
+wfduBwYjAgMBAAECggEACTqdSExxzJ+LX5ARFaWyOBSWly2GKqSyR14+aInOklhx
+9QgkmfOxJrCf3TvJ8RWhXloW0Aqr8qGDxG0Ixgjn7rG7gskXCey1xn8MNppLS0kj
+ztaG+NB3AR89ABm8XdoHsSY45geh3/Ni9I0i1VardGQafUJhgNLTZqjwIodzkBtJ
+S/bi4uFk1lGNfuvWQvWqzGXUvd1l1YupV6iA4GfhXlUvrSBZwftLBD6xEvQaSqsA
+pHvBxTfMXG4RMAkNPDIElkuQ8++CGi1gIRkJfmrv4OgbbitteMnxqqqGYV0zSNCg
+R/5FG6umIV7lDLBHZCSCk7wmfmq2UUvzhHThHy4yMQKBgQDu4TwFJCIcVIj7Wj4r
+DUBFvz6Lgbltqb+YAMUBtpiDcAQxDJWmedh6dK04ts5CFAFRlRjjuz2uFn7qlVBm
+uye9R7tL+tOv5viqDXU78a4snFywoXub6yzpbxrW8B4W1pdIUvQmhwCcDwvO1V24
+7Vj2vxcM5I9dsk1aCQSi3VY5yQKBgQDAW/VoTRwhU6OUc6sji5Z5dnkMjkP6NZK9
+CSrTWLAMGaLPY+g6fFS7JMNSvfWm/okypD6rcN7p0cxMK3mfFKmMiyPRde0wdrci
+sGFjGxM/2d2D7KTMC9iMYwA0K17UIna+UiYPfhR/muIg/dCyjlkKDFs9Z4jk//r1
+91bmznt2iwKBgFdiYXhn/Wprqih4nKFXGZnqGdEixVhObl4GegrkZuo+AeqHdf8O
+N5ikMfG7PbyCYPEdH5u/FRMn+4mI0X6jHChroyJqQSHp1jEu9yHUiSicknOyvusM
+nsNN932FHRyxp2m3nsSxQhHUlzc0ajKJ8K9iu+XlfmSCIzW6cs25Nh+xAoGBAJro
+M0wIdPPdsCj3sUVRvx8XqknTM6kGhaIYBNXoYPWNm5BaC4U15OJEq8sxUOdnqcMP
+g6x6m/k+S8C3bh0O/a9Bydl/l0BlCfw0gGjYP/s2ju4Tn272xy/e9iYNGzPIgUmp
+TB9D0GwmpZ4d6HgyrD+sTbm4bATGpCp6QhBjDggbAoGBAJVMMtZ4pF8D6mLMRZGR
+pQjNPy+MH13XYmDRc/BSF8KJ4yKk3tohr9LSXzxR0SEB43NoL1bHkucZrNjGyL8x
+jktnwkoIs96kO2mPrl1TqWkXs5RjGkkSTbAJovIcvkRU31SWap/WzN2kHpmRVcQc
+KEFKXT5fUYZCLLWxhgZFlGPp
+-----END PRIVATE KEY-----

backend/tls_localhost_nginx.conf

@@ -0,0 +1,40 @@
+server {
+    listen                  80;
+    listen                  [::]:80;
+    listen                  443 ssl;
+    listen                  8448 ssl;
+    listen                  [::]:443 ssl;
+    listen                  [::]:8448 ssl;
+    server_name             synapse.localhost;
+    ssl_certificate         /root/ssl/cert.pem;
+    ssl_certificate_key     /root/ssl/key.pem;
+
+    # well-known config adding rtc_foci backend
+    # Note well-known is currently not effective due to:
+    # https://spec.matrix.org/v1.12/client-server-api/#well-known-uri the spec
+    # says it must be at https://$server_name/... (implied port 443) Hence, we
+    # currently rely for local development environment on deprecated config.json
+    # setting for livekit_service_url
+    location /.well-known/matrix/client {
+        return 200 '{"m.homeserver": {"base_url": "http://synapse.localhost:8008"}, "org.matrix.msc4143.rtc_foci": [{"type": "livekit", "livekit_service_url": "http://localhost:8080"}]}';
+        default_type application/json;
+        add_header Access-Control-Allow-Origin *;
+    }
+
+    # Reverse proxy for Matrix Synapse Homeserver
+    # This is also required for development environment.
+    # Reason: the lk-jwt-service uses the federation API for the openid token
+    #         verification, which requires TLS
+    location / {
+        proxy_pass "http://homeserver:8008";
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+        proxy_set_header Host $host;
+        proxy_set_header X-Forwarded-For $remote_addr;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+
+    error_page   500 502 503 504  /50x.html;
+
+}

codecov.yaml

@@ -1,6 +1,10 @@
 # Don't post comments on PRs; they're noisy and the same information can be
 # gotten through the checks section at the bottom of the PR anyways
 comment: false
+github_checks:
+  # Don't mark up the diffs on PRs with warnings about untested lines; we're not
+  # aiming for 100% test coverage and they just get in the way of reviewing
+  annotations: false
 coverage:
   status:
     project:

config/config.devenv.json

@@ -0,0 +1,15 @@
+{
+  "default_server_config": {
+    "m.homeserver": {
+      "base_url": "http://synapse.localhost:8008",
+      "server_name": "synapse.localhost"
+    }
+  },
+  "livekit": {
+    "livekit_service_url": "http://localhost:8009"
+  },
+  "features": {
+    "feature_use_device_session_member_events": true
+  },
+  "eula": "https://static.element.io/legal/online-EULA.pdf"
+}

config/config.sample.json

@@ -1,13 +1,10 @@
 {
   "default_server_config": {
     "m.homeserver": {
-      "base_url": "https://call.ems.host",
-      "server_name": "call.ems.host"
+      "base_url": "http://synapse.localhost:8008",
+      "server_name": "synapse.localhost"
     }
   },
-  "livekit": {
-    "livekit_service_url": "http://localhost:7881"
-  },
   "features": {
     "feature_use_device_session_member_events": true
   },

config/nginx.conf

@@ -3,23 +3,16 @@ server {
     server_name  localhost;
 
     root   /app;
+    gzip_static on;
 
     location / {
-        # disable cache entriely by default (apart from Etag which is accurate enough)
-        add_header Cache-Control 'private no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
-        if_modified_since off;
-        expires off;
-        # also turn off last-modified since they are just the timestamps of the file in the docker image
-        # and may or may not bear any resemblance to when the resource changed
-        add_header Last-Modified "";
-
-        try_files $uri /$uri /index.html;
+        try_files $uri $uri/ /index.html;
+        add_header Cache-Control "no-store, no-cache, must-revalidate";
     }
 
     # assets can be cached because they have hashed filenames
     location /assets {
-        expires 1w;
-        add_header Cache-Control "public, no-transform";
+        add_header Cache-Control "public, immutable, max-age=31536000";
     }
 
     location /apple-app-site-association {

dev-backend-docker-compose.yml

@@ -0,0 +1,86 @@
+networks:
+  ecbackend:
+
+services:
+  auth-service:
+    image: ghcr.io/element-hq/lk-jwt-service:latest-ci
+    hostname: auth-server
+    environment:
+      - LK_JWT_PORT=8080
+      - LIVEKIT_URL=ws://localhost:7880
+      - LIVEKIT_KEY=devkey
+      - LIVEKIT_SECRET=secret
+      # If the configured homeserver runs on localhost, it'll probably be using
+      # a self-signed certificate
+      - LIVEKIT_INSECURE_SKIP_VERIFY_TLS=YES_I_KNOW_WHAT_I_AM_DOING
+    deploy:
+      restart_policy:
+        condition: on-failure
+    ports:
+      # HOST_PORT:CONTAINER_PORT
+      - 8009:8080
+    networks:
+      - ecbackend
+
+  livekit:
+    image: livekit/livekit-server:latest
+    command: --dev --config /etc/livekit.yaml
+    restart: unless-stopped
+    # The SFU seems to work far more reliably when we let it share the host
+    # network rather than opening specific ports (but why?? we're not missing
+    # any…)
+    ports:
+      # HOST_PORT:CONTAINER_PORT
+      - 7880:7880/tcp
+      - 7881:7881/tcp
+      - 7882:7882/tcp
+      - 50100-50200:50100-50200/udp
+    volumes:
+      - ./backend/dev_livekit.yaml:/etc/livekit.yaml:Z
+    networks:
+      - ecbackend
+
+  redis:
+    image: redis:6-alpine
+    command: redis-server /etc/redis.conf
+    ports:
+      # HOST_PORT:CONTAINER_PORT
+      - 6379:6379
+    volumes:
+      - ./backend/redis.conf:/etc/redis.conf:Z
+    networks:
+      - ecbackend
+
+  synapse:
+    hostname: homeserver
+    image: docker.io/matrixdotorg/synapse:latest
+    environment:
+      - SYNAPSE_CONFIG_PATH=/data/cfg/homeserver.yaml
+      # Needed for rootless podman-compose such that the uid/gid mapping does
+      # fit local user uid. If the container runs as root (uid 0) it is fine as
+      # it actually maps to your non-root user on the host (e.g. 1000).
+      # Otherwise uid mapping will not match your non-root user.
+      - UID=0
+      - GID=0
+    volumes:
+      - ./backend/synapse_tmp:/data:Z
+      - ./backend/dev_homeserver.yaml:/data/cfg/homeserver.yaml:Z
+    networks:
+      - ecbackend
+
+  nginx:
+    #  openssl req -x509 -nodes -days 3650 -newkey rsa:2048 -keyout tls_localhost_key.pem -out tls_localhost_cert.pem -subj "/C=GB/ST=London/L=London/O=Alros/OU=IT Department/CN=localhost"
+    hostname: synapse.localhost
+    image: nginx:latest
+    volumes:
+      - ./backend/tls_localhost_nginx.conf:/etc/nginx/conf.d/default.conf:Z
+      - ./backend/tls_localhost_key.pem:/root/ssl/key.pem:Z
+      - ./backend/tls_localhost_cert.pem:/root/ssl/cert.pem:Z
+    ports:
+      # HOST_PORT:CONTAINER_PORT
+      - "8008:80"
+      - "4443:443"
+    depends_on:
+      - synapse
+    networks:
+      - ecbackend

docs/url-params.md

@@ -98,6 +98,8 @@ confineToRoom: boolean; (default: false)
 Whether upon entering a room, the user should be prompted to launch the
 native mobile app. (Affects only Android and iOS.)
 
+The app prompt must also be enabled in the config for this to take effect.
+
 ```ts
 appPrompt: boolean; (default: true)
 ```

package.json

@@ -17,18 +17,23 @@
     "i18n:check": "i18next --fail-on-warnings --fail-on-update",
     "test": "vitest",
     "test:coverage": "vitest --coverage",
-    "backend": "docker-compose -f backend-docker-compose.yml up"
+    "backend": "docker-compose -f dev-backend-docker-compose.yml up"
   },
   "devDependencies": {
     "@babel/core": "^7.16.5",
     "@babel/preset-env": "^7.22.20",
     "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.23.0",
+    "@codecov/vite-plugin": "^1.3.0",
+    "@fontsource/inconsolata": "^5.1.0",
+    "@fontsource/inter": "^5.1.0",
+    "@formatjs/intl-durationformat": "^0.6.1",
+    "@formatjs/intl-segmenter": "^11.7.3",
     "@livekit/components-core": "^0.11.0",
     "@livekit/components-react": "^2.0.0",
     "@opentelemetry/api": "^1.4.0",
     "@opentelemetry/core": "^1.25.1",
-    "@opentelemetry/exporter-trace-otlp-http": "^0.53.0",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.54.0",
     "@opentelemetry/resources": "^1.25.1",
     "@opentelemetry/sdk-trace-base": "^1.25.1",
     "@opentelemetry/sdk-trace-web": "^1.9.1",
@@ -41,12 +46,14 @@
     "@sentry/vite-plugin": "^2.0.0",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/react": "^16.0.0",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.1",
     "@types/content-type": "^1.1.5",
     "@types/grecaptcha": "^3.0.9",
     "@types/jsdom": "^21.1.7",
-    "@types/lodash": "^4.14.199",
+    "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.0.0",
+    "@types/pako": "^2.0.3",
     "@types/qrcode": "^1.5.5",
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
@@ -55,8 +62,8 @@
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
     "@use-gesture/react": "^10.2.11",
-    "@vector-im/compound-design-tokens": "^1.0.0",
-    "@vector-im/compound-web": "^6.0.0",
+    "@vector-im/compound-design-tokens": "^1.9.1",
+    "@vector-im/compound-web": "^7.2.0",
     "@vitejs/plugin-basic-ssl": "^1.0.1",
     "@vitejs/plugin-react": "^4.0.1",
     "@vitest/coverage-v8": "^2.0.5",
@@ -70,9 +77,10 @@
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-matrix-org": "^1.2.1",
     "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "^4.5.0",
-    "eslint-plugin-unicorn": "^55.0.0",
-    "global-jsdom": "^24.0.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-rxjs": "^5.0.3",
+    "eslint-plugin-unicorn": "^56.0.0",
+    "global-jsdom": "^25.0.0",
     "history": "^4.0.0",
     "i18next": "^23.0.0",
     "i18next-browser-languagedetector": "^8.0.0",
@@ -80,17 +88,17 @@
     "i18next-parser": "^9.0.0",
     "jsdom": "^25.0.0",
     "knip": "^5.27.2",
-    "livekit-client": "^2.0.2",
-    "lodash": "^4.17.21",
+    "livekit-client": "^2.5.7",
+    "lodash-es": "^4.17.21",
     "loglevel": "^1.9.1",
-    "matrix-js-sdk": "matrix-org/matrix-js-sdk#414ac9d8cc28330718236b90ad67a1507e146932",
-    "matrix-widget-api": "^1.8.2",
+    "matrix-js-sdk": "matrix-org/matrix-js-sdk#8e9a04cdec0f88fc876bbbf406db55b0677f005d",
+    "matrix-widget-api": "^1.10.0",
     "normalize.css": "^8.0.1",
     "observable-hooks": "^4.2.3",
     "pako": "^2.0.4",
     "postcss": "^8.4.41",
     "postcss-preset-env": "^10.0.0",
-    "posthog-js": "^1.29.0",
+    "posthog-js": "1.160.3",
     "prettier": "^3.0.0",
     "qrcode": "^1.5.4",
     "react": "18",
@@ -104,8 +112,9 @@
     "typescript": "^5.1.6",
     "typescript-eslint-language-service": "^5.0.5",
     "unique-names-generator": "^4.6.0",
-    "vaul": "^0.9.0",
+    "vaul": "^1.0.0",
     "vite": "^5.0.0",
+    "vite-plugin-compression2": "^1.3.1",
     "vite-plugin-html-template": "^1.1.0",
     "vite-plugin-svgr": "^4.0.0",
     "vitest": "^2.0.0",

public/locales/bg/app.json

@@ -20,7 +20,6 @@
     "audio": "Звук",
     "avatar": "Аватар",
     "camera": "Камера",
-    "copied": "Копирано!",
     "display_name": "Име/псевдоним",
     "home": "Начало",
     "loading": "Зареждане…",
@@ -58,9 +57,7 @@
   "register_auth_links": "<0>Вече имате акаунт?</0><1><0>Влезте с него</0> или <2>Влезте като гост</2></1>",
   "register_confirm_password_label": "Потвърди паролата",
   "return_home_button": "Връщане на началния екран",
-  "room_auth_view_join_button": "Влез в разговора сега",
   "screenshare_button_label": "Сподели екрана",
-  "select_input_unset_button": "Изберете опция",
   "settings": {
     "developer_tab_title": "Разработчик",
     "feedback_tab_h4": "Изпрати обратна връзка",
@@ -70,6 +67,5 @@
   },
   "unauthenticated_view_body": "Все още не сте регистрирани? <2>Създайте акаунт</2>",
   "unauthenticated_view_login_button": "Влезте в акаунта си",
-  "version": "Версия: {{version}}",
-  "waiting_for_participants": "Изчакване на други участници…"
+  "version": "Версия: {{version}}"
 }

public/locales/cs/app.json

@@ -4,7 +4,6 @@
   },
   "action": {
     "close": "Zavřít",
-    "copy": "Kopírovat",
     "go": "Pokračovat",
     "no": "Ne",
     "register": "Registrace",
@@ -19,7 +18,6 @@
   },
   "common": {
     "camera": "Kamera",
-    "copied": "Zkopírováno!",
     "display_name": "Zobrazované jméno",
     "home": "Domov",
     "loading": "Načítání…",
@@ -60,9 +58,7 @@
   "register_auth_links": "<0>Už máte účet?</0><1><0>Přihlásit se</0> Or <2>Jako host</2></1>",
   "register_confirm_password_label": "Potvrdit heslo",
   "return_home_button": "Vrátit se na domácí obrazovku",
-  "room_auth_view_join_button": "Připojit se k hovoru",
   "screenshare_button_label": "Sdílet obrazovku",
-  "select_input_unset_button": "Vyberte možnost",
   "settings": {
     "developer_settings_label": "Vývojářské nastavení",
     "developer_settings_label_description": "Zobrazit vývojářské nastavení.",
@@ -74,6 +70,5 @@
   },
   "unauthenticated_view_body": "Nejste registrovaní? <2>Vytvořit účet</2>",
   "unauthenticated_view_login_button": "Přihlásit se ke svému účtu",
-  "version": "Verze: {{version}}",
-  "waiting_for_participants": "Čekání na další účastníky…"
+  "version": "Verze: {{version}}"
 }

public/locales/de/app.json

@@ -4,18 +4,25 @@
   },
   "action": {
     "close": "Schließen",
-    "copy": "Kopieren",
+    "close_search": "Suche beenden",
     "copy_link": "Link kopieren",
+    "edit": "Bearbeiten",
     "go": "Los geht’s",
     "invite": "Einladen",
+    "lower_hand": "Handmeldung zurücknehmen",
     "no": "Nein",
+    "open_search": "Suchen",
+    "pick_reaction": "Reaktion auswählen",
+    "raise_hand": "Handmeldung",
+    "raise_hand_or_send_reaction": "Handmeldung oder Reaktion senden",
     "register": "Registrieren",
     "remove": "Entfernen",
     "sign_in": "Anmelden",
     "sign_out": "Abmelden",
-    "submit": "Absenden"
+    "submit": "Absenden",
+    "upload_file": "Datei hochladen"
   },
-  "analytics_notice": "Mit der Teilnahme an der Beta akzeptierst du die Sammlung von anonymen Daten, die wir zur Verbesserung des Produkts verwenden. Weitere Informationen zu den von uns erhobenen Daten findest du in unserer <2>Datenschutzerklärung</2> und unseren <5>Cookie-Richtlinien</5>.",
+  "analytics_notice": "Mit der Teilnahme an der Beta akzeptierst du die Sammlung von anonymen Daten, die wir zur Verbesserung des Produkts verwenden. Weitere Informationen zu den von uns erhobenen Daten findest du in unserer <2>Datenschutzerklärung</2> und unseren <6>Cookie-Richtlinien</6>.",
   "app_selection_modal": {
     "continue_in_browser": "Weiter im Browser",
     "open_in_app": "In der App öffnen",
@@ -38,26 +45,46 @@
   },
   "call_name": "Name des Anrufs",
   "common": {
+    "analytics": "Analyse",
     "audio": "Audio",
     "avatar": "Profilbild",
+    "back": "Zurück",
     "camera": "Kamera",
-    "copied": "Kopiert!",
     "display_name": "Anzeigename",
     "encrypted": "Verschlüsselt",
     "error": "Fehler",
     "home": "Startseite",
     "loading": "Lade …",
     "microphone": "Mikrofon",
+    "next": "Weiter",
+    "options": "Optionen",
     "password": "Passwort",
+    "preferences": "Einstellungen",
     "profile": "Profil",
+    "reaction": "Reaktion",
+    "search": "Suche",
     "settings": "Einstellungen",
+    "something_went_wrong": "Etwas ist schief gelaufen",
     "unencrypted": "Nicht verschlüsselt",
     "username": "Benutzername",
     "video": "Video"
   },
+  "crypto_version": "Krypto-Version:{{version}}",
+  "device_id": "Geräte-ID: {{id}}",
   "disconnected_banner": "Die Verbindung zum Server wurde getrennt.",
   "full_screen_view_description": "<0>Übermittelte Problemberichte helfen uns, Fehler zu beheben.</0>",
   "full_screen_view_h1": "<0>Hoppla, etwas ist schiefgelaufen.</0>",
+  "group_call_loader": {
+    "banned_body": "Du wurdest aus dem Raum verbannt.",
+    "banned_heading": "Verbannt",
+    "call_ended_body": "Du wurdest aus dem Anruf entfernt.",
+    "call_ended_heading": "Anruf beendet",
+    "failed_heading": "Beitreten fehlgeschlagen",
+    "failed_text": "Anruf nicht gefunden oder Beitritt nicht erlaubt",
+    "knock_reject_body": "Die Teilnahmeanfrage wurde abgelehnt.",
+    "knock_reject_heading": "Zugriff verweigert",
+    "reason": "Grund"
+  },
   "hangup_button_label": "Anruf beenden",
   "header_label": "Element Call-Startseite",
   "header_participants_label": "Teilnehmende",
@@ -71,10 +98,13 @@
     "title": "An bestehendem Anruf teilnehmen?"
   },
   "layout_grid_label": "Raster",
-  "layout_spotlight_label": "Rampenlicht",
+  "layout_spotlight_label": "Fokus",
   "lobby": {
+    "ask_to_join": "Teilnahmeanfrage senden",
+    "join_as_guest": "Als Gast beitreten",
     "join_button": "Anruf beitreten",
-    "leave_button": "Zurück zu kürzlichen Anrufen"
+    "leave_button": "Zurück zu kürzlichen Anrufen",
+    "waiting_for_invite": "Anfrage gesendet! Warten auf Teilnahmefreigabe …"
   },
   "log_in": "Anmelden",
   "logging_in": "Anmelden …",
@@ -82,9 +112,13 @@
   "login_auth_links_prompt": "Noch nicht registriert?",
   "login_subheading": "Weiter zu Element",
   "login_title": "Anmelden",
+  "matrix_id": "Matrix-ID: {{id}}",
   "microphone_off": "Mikrofon aus",
   "microphone_on": "Mikrofon an",
-  "mute_microphone_button_label": "Mikrofon deaktivieren",
+  "mute_microphone_button_label": "Mikrofon stumm schalten",
+  "participant_count_one": "{{count, number}}",
+  "participant_count_other": "{{count, number}}",
+  "qr_code": "QR-Code",
   "rageshake_button_error_caption": "Protokolle erneut senden",
   "rageshake_request_modal": {
     "body": "Ein anderer Benutzer dieses Anrufs hat ein Problem. Um es besser diagnostizieren zu können, würden wir gerne ein Debug-Protokoll erstellen.",
@@ -94,6 +128,7 @@
   "rageshake_sending": "Senden …",
   "rageshake_sending_logs": "Sende Debug-Protokolle …",
   "rageshake_sent": "Danke!",
+  "reaction_search": "Reaktionen suchen...",
   "recaptcha_caption": "Diese Seite wird durch reCAPTCHA geschützt und es gelten Googles <2>Datenschutzerklärung</2> und <6>Nutzungsbedingungen</6>. <9></9>Mit einem Klick auf „Registrieren“ akzeptierst du unseren <2>Endbenutzer-Lizenzvertrag (EULA)</2>",
   "recaptcha_dismissed": "Recaptcha abgelehnt",
   "recaptcha_not_loaded": "Recaptcha nicht geladen",
@@ -103,25 +138,40 @@
   },
   "register_auth_links": "<0>Du hast bereits ein Konto?</0><1><0>Anmelden</0> Oder <2>Als Gast betreten</2></1>",
   "register_confirm_password_label": "Passwort bestätigen",
+  "register_heading": "Erstelle Dein Konto",
   "return_home_button": "Zurück zur Startseite",
-  "room_auth_view_eula_caption": "Mit einem Klick auf „Anruf beitreten“ akzeptierst du unseren <2>Endbenutzer-Lizenzvertrag (EULA)</2>",
-  "room_auth_view_join_button": "Anruf beitreten",
+  "room_auth_view_continue_button": "Weiter",
+  "room_auth_view_eula_caption": "Mit einem Klick auf „Weiter“ akzeptierst du unseren <2>Endbenutzer-Lizenzvertrag (EULA)</2>",
   "screenshare_button_label": "Bildschirm teilen",
-  "select_input_unset_button": "Wähle eine Option",
   "settings": {
+    "audio_tab": {
+      "effect_volume_description": "Lautstärke anpassen, mit der Reaktionen und Handmeldungen abgespielt werden",
+      "effect_volume_label": "Lautstärke der Soundeffekte"
+    },
     "developer_settings_label": "Entwicklereinstellungen",
     "developer_settings_label_description": "Zeige die Entwicklereinstellungen im Einstellungsfenster.",
     "developer_tab_title": "Entwickler",
+    "duplicate_tiles_label": "Anzahl zusätzlicher Kachelkopien pro Teilnehmer",
     "feedback_tab_body": "Falls du auf Probleme stößt oder einfach nur eine Rückmeldung geben möchtest, sende uns bitte eine kurze Beschreibung.",
     "feedback_tab_description_label": "Deine Rückmeldung",
     "feedback_tab_h4": "Rückmeldung geben",
-    "feedback_tab_send_logs_label": "Debug-Protokolle einschließen",
+    "feedback_tab_send_logs_label": "Debug-Protokolle anhängen",
     "feedback_tab_thank_you": "Danke, wir haben deine Rückmeldung erhalten!",
     "feedback_tab_title": "Rückmeldung",
     "more_tab_title": "Mehr",
     "opt_in_description": "<0></0><1></1>Du kannst deine Zustimmung durch Abwählen dieses Kästchens zurückziehen. Falls du dich aktuell in einem Anruf befindest, wird diese Einstellung nach dem Ende des Anrufs wirksam.",
-    "show_connection_stats_label": "Verbindungsstatistiken zeigen",
-    "speaker_device_selection_label": "Wiedergabegerät"
+    "preferences_tab": {
+      "reactions_play_sound_description": "Einen Soundeffekt abspielen, wenn jemand eine Reaktion sendet",
+      "reactions_play_sound_label": "Reaktionstöne abspielen",
+      "reactions_show_description": "Reaktionen anzeigen",
+      "reactions_show_label": "Zeige eine Animation, wenn jemand eine Reaktion sendet.",
+      "reactions_title": "Reaktionen"
+    },
+    "preferences_tab_body": "Hier können zusätzliche Optionen für individuelle Anforderungen eingestellt werden",
+    "preferences_tab_h4": "Einstellungen",
+    "preferences_tab_show_hand_raised_timer_description": "Einen Timer zur Handmeldung anzeigen",
+    "preferences_tab_show_hand_raised_timer_label": "Dauer der Handmeldung anzeigen",
+    "speaker_device_selection_label": "Lautsprecher"
   },
   "star_rating_input_label_one": "{{count}} Stern",
   "star_rating_input_label_other": "{{count}} Sterne",
@@ -130,13 +180,19 @@
   "stop_screenshare_button_label": "Bildschirm wird geteilt",
   "stop_video_button_label": "Video deaktivieren",
   "submitting": "Sende …",
+  "switch_camera": "Kamera wechseln",
   "unauthenticated_view_body": "Noch nicht registriert? <2>Konto erstellen</2>",
   "unauthenticated_view_eula_caption": "Mit einem Klick auf „Los geht’s“ akzeptierst du unseren <2>Endbenutzer-Lizenzvertrag (EULA)</2>",
   "unauthenticated_view_login_button": "Melde dich mit deinem Konto an",
-  "unmute_microphone_button_label": "Mikrofon aktivieren",
-  "version": "Version: {{version}}",
+  "unmute_microphone_button_label": "Mikrofon einschalten",
+  "version": "{{productName}} Version: {{version}}",
   "video_tile": {
-    "sfu_participant_local": "Du"
-  },
-  "waiting_for_participants": "Warte auf weitere Teilnehmer …"
+    "always_show": "Immer anzeigen",
+    "change_fit_contain": "An Fenster anpassen",
+    "collapse": "Minimieren",
+    "expand": "Erweitern",
+    "mute_for_me": "Für mich stumm schalten",
+    "muted_for_me": "Für mich stumm geschaltet",
+    "volume": "Lautstärke"
+  }
 }

public/locales/el/app.json

@@ -4,7 +4,6 @@
   },
   "action": {
     "close": "Κλείσιμο",
-    "copy": "Αντιγραφή",
     "go": "Μετάβαση",
     "no": "Όχι",
     "register": "Εγγραφή",
@@ -26,7 +25,6 @@
   "common": {
     "audio": "Ήχος",
     "camera": "Κάμερα",
-    "copied": "Αντιγράφηκε!",
     "display_name": "Εμφανιζόμενο όνομα",
     "home": "Αρχική",
     "loading": "Φόρτωση…",
@@ -67,9 +65,7 @@
   "register_auth_links": "<0>Έχετε ήδη λογαριασμό;</0><1><0>Συνδεθείτε</0> Ή <2>Συμμετέχετε ως επισκέπτης</2></1>",
   "register_confirm_password_label": "Επιβεβαίωση κωδικού",
   "return_home_button": "Επιστροφή στην αρχική οθόνη",
-  "room_auth_view_join_button": "Συμμετοχή στην κλήση τώρα",
   "screenshare_button_label": "Κοινή χρήση οθόνης",
-  "select_input_unset_button": "Επιλέξτε μια επιλογή",
   "settings": {
     "developer_settings_label": "Ρυθμίσεις προγραμματιστή",
     "developer_settings_label_description": "Εμφάνιση ρυθμίσεων προγραμματιστή στο παράθυρο ρυθμίσεων.",
@@ -82,7 +78,6 @@
     "feedback_tab_title": "Ανατροφοδότηση",
     "more_tab_title": "Περισσότερα",
     "opt_in_description": "<0></0><1></1>Μπορείτε να ανακαλέσετε τη συγκατάθεσή σας αποεπιλέγοντας αυτό το πλαίσιο. Εάν βρίσκεστε σε κλήση, η ρύθμιση αυτή θα τεθεί σε ισχύ στο τέλος της.",
-    "show_connection_stats_label": "Εμφάνιση στατιστικών σύνδεσης",
     "speaker_device_selection_label": "Ηχείο"
   },
   "star_rating_input_label_one": "{{count}} αστέρι",
@@ -90,6 +85,5 @@
   "submitting": "Υποβολή…",
   "unauthenticated_view_body": "Δεν έχετε εγγραφεί ακόμα; <2>Δημιουργήστε λογαριασμό</2>",
   "unauthenticated_view_login_button": "Συνδεθείτε στον λογαριασμό σας",
-  "version": "Έκδοση: {{version}}",
-  "waiting_for_participants": "Αναμονή για άλλους συμμετέχοντες…"
+  "version": "Έκδοση: {{version}}"
 }

public/locales/en-GB/app.json

@@ -4,11 +4,17 @@
   },
   "action": {
     "close": "Close",
+    "close_search": "Close search",
     "copy_link": "Copy link",
     "edit": "Edit",
     "go": "Go",
     "invite": "Invite",
+    "lower_hand": "Lower hand",
     "no": "No",
+    "open_search": "Open search",
+    "pick_reaction": "Pick reaction",
+    "raise_hand": "Raise hand",
+    "raise_hand_or_send_reaction": "Raise hand or send reaction",
     "register": "Register",
     "remove": "Remove",
     "sign_in": "Sign in",
@@ -16,7 +22,7 @@
     "submit": "Submit",
     "upload_file": "Upload file"
   },
-  "analytics_notice": "By participating in this beta, you consent to the collection of anonymous data, which we use to improve the product. You can find more information about which data we track in our <2>Privacy Policy</2> and our <5>Cookie Policy</5>.",
+  "analytics_notice": "By participating in this beta, you consent to the collection of anonymous data, which we use to improve the product. You can find more information about which data we track in our <2>Privacy Policy</2> and our <6>Cookie Policy</6>.",
   "app_selection_modal": {
     "continue_in_browser": "Continue in browser",
     "open_in_app": "Open in the app",
@@ -53,8 +59,12 @@
     "next": "Next",
     "options": "Options",
     "password": "Password",
+    "preferences": "Preferences",
     "profile": "Profile",
+    "reaction": "Reaction",
+    "search": "Search",
     "settings": "Settings",
+    "something_went_wrong": "Something went wrong",
     "unencrypted": "Not encrypted",
     "username": "Username",
     "video": "Video"
@@ -71,8 +81,8 @@
     "call_ended_heading": "Call ended",
     "failed_heading": "Failed to join",
     "failed_text": "Call not found or is not accessible.",
-    "knock_reject_body": "The room members declined your request to join.",
-    "knock_reject_heading": "Not allowed to join",
+    "knock_reject_body": "Your request to join was declined.",
+    "knock_reject_heading": "Access denied",
     "reason": "Reason"
   },
   "hangup_button_label": "End call",
@@ -90,10 +100,11 @@
   "layout_grid_label": "Grid",
   "layout_spotlight_label": "Spotlight",
   "lobby": {
-    "ask_to_join": "Ask to join call",
+    "ask_to_join": "Request to join call",
+    "join_as_guest": "Join as guest",
     "join_button": "Join call",
     "leave_button": "Back to recents",
-    "waiting_for_invite": "Request sent"
+    "waiting_for_invite": "Request sent! Waiting for permission to join…"
   },
   "log_in": "Log In",
   "logging_in": "Logging in…",
@@ -117,6 +128,7 @@
   "rageshake_sending": "Sending…",
   "rageshake_sending_logs": "Sending debug logs…",
   "rageshake_sent": "Thanks!",
+  "reaction_search": "Search reactions…",
   "recaptcha_caption": "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>",
   "recaptcha_dismissed": "Recaptcha dismissed",
   "recaptcha_not_loaded": "Recaptcha not loaded",
@@ -128,10 +140,14 @@
   "register_confirm_password_label": "Confirm password",
   "register_heading": "Create your account",
   "return_home_button": "Return to home screen",
-  "room_auth_view_eula_caption": "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>",
-  "room_auth_view_join_button": "Join call now",
+  "room_auth_view_continue_button": "Continue",
+  "room_auth_view_eula_caption": "By clicking \"Continue\", you agree to our <2>End User Licensing Agreement (EULA)</2>",
   "screenshare_button_label": "Share screen",
   "settings": {
+    "audio_tab": {
+      "effect_volume_description": "Adjust the volume at which reactions and hand raised effects play",
+      "effect_volume_label": "Sound effect volume"
+    },
     "developer_settings_label": "Developer Settings",
     "developer_settings_label_description": "Expose developer settings in the settings window.",
     "developer_tab_title": "Developer",
@@ -144,6 +160,17 @@
     "feedback_tab_title": "Feedback",
     "more_tab_title": "More",
     "opt_in_description": "<0></0><1></1>You may withdraw consent by unchecking this box. If you are currently in a call, this setting will take effect at the end of the call.",
+    "preferences_tab": {
+      "reactions_play_sound_description": "Play a sound effect when anyone sends a reaction into a call.",
+      "reactions_play_sound_label": "Play reaction sounds",
+      "reactions_show_description": "Show reactions",
+      "reactions_show_label": "Show an animation when anyone sends a reaction.",
+      "reactions_title": "Reactions"
+    },
+    "preferences_tab_body": "Here you can configure extra options for an improved experience",
+    "preferences_tab_h4": "Preferences",
+    "preferences_tab_show_hand_raised_timer_description": "Show a timer when a participant raises their hand",
+    "preferences_tab_show_hand_raised_timer_label": "Show hand raise duration",
     "speaker_device_selection_label": "Speaker"
   },
   "star_rating_input_label_one": "{{count}} stars",
@@ -153,6 +180,7 @@
   "stop_screenshare_button_label": "Sharing screen",
   "stop_video_button_label": "Stop video",
   "submitting": "Submitting…",
+  "switch_camera": "Switch camera",
   "unauthenticated_view_body": "Not registered yet? <2>Create an account</2>",
   "unauthenticated_view_eula_caption": "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>",
   "unauthenticated_view_login_button": "Login to your account",
@@ -164,6 +192,7 @@
     "collapse": "Collapse",
     "expand": "Expand",
     "mute_for_me": "Mute for me",
+    "muted_for_me": "Muted for me",
     "volume": "Volume"
   }
 }

public/locales/es/app.json

@@ -4,7 +4,6 @@
   },
   "action": {
     "close": "Cerrar",
-    "copy": "Copiar",
     "go": "Comenzar",
     "register": "Registrarse",
     "remove": "Eliminar",
@@ -24,7 +23,6 @@
   },
   "common": {
     "camera": "Cámara",
-    "copied": "¡Copiado!",
     "display_name": "Nombre a mostrar",
     "home": "Inicio",
     "loading": "Cargando…",
@@ -67,9 +65,7 @@
   "register_confirm_password_label": "Confirmar contraseña",
   "return_home_button": "Volver a la pantalla de inicio",
   "room_auth_view_eula_caption": "Al hacer clic en \"Unirse a la llamada ahora\", aceptas nuestro <2>Contrato de Licencia de Usuario Final (CLUF)</2>",
-  "room_auth_view_join_button": "Unirse a la llamada ahora",
   "screenshare_button_label": "Compartir pantalla",
-  "select_input_unset_button": "Selecciona una opción",
   "settings": {
     "developer_settings_label": "Ajustes de desarrollador",
     "developer_settings_label_description": "Muestra los ajustes de desarrollador en la ventana de ajustes.",
@@ -82,7 +78,6 @@
     "feedback_tab_title": "Danos tu opinión",
     "more_tab_title": "Más",
     "opt_in_description": "<0></0><1></1>Puedes retirar tu consentimiento desmarcando esta casilla. Si estás en una llamada, este ajuste se aplicará al final de esta.",
-    "show_connection_stats_label": "Mostrar estadísticas de conexión",
     "speaker_device_selection_label": "Altavoz"
   },
   "star_rating_input_label_one": "{{count}} estrella",
@@ -91,6 +86,5 @@
   "unauthenticated_view_body": "¿No estás registrado todavía? <2>Crear una cuenta</2>",
   "unauthenticated_view_eula_caption": "Al hacer clic en \"Comenzar\", aceptas nuestro <2>Contrato de Licencia de Usuario Final (CLUF)</2>",
   "unauthenticated_view_login_button": "Iniciar sesión en tu cuenta",
-  "version": "Versión: {{version}}",
-  "waiting_for_participants": "Esperando a los otros participantes…"
+  "version": "Versión: {{version}}"
 }

public/locales/et/app.json

@@ -4,7 +4,6 @@
   },
   "action": {
     "close": "Sulge",
-    "copy": "Kopeeri",
     "copy_link": "Kopeeri link",
     "go": "Jätka",
     "invite": "Kutsu",
@@ -39,7 +38,6 @@
     "audio": "Heli",
     "avatar": "Tunnuspilt",
     "camera": "Kaamera",
-    "copied": "Kopeeritud!",
     "display_name": "Kuvatav nimi",
     "encrypted": "Krüptitud",
     "home": "Avavaatesse",
@@ -97,9 +95,7 @@
   "register_confirm_password_label": "Kinnita salasõna",
   "return_home_button": "Tagasi avalehele",
   "room_auth_view_eula_caption": "Klõpsides „Liitu kõnega kohe“, nõustud sa meie <2>Lõppkasutaja litsentsilepinguga (EULA)</2>",
-  "room_auth_view_join_button": "Liitu kõnega kohe",
   "screenshare_button_label": "Jaga ekraani",
-  "select_input_unset_button": "Vali oma eelistus",
   "settings": {
     "developer_settings_label": "Arendaja seadistused",
     "developer_settings_label_description": "Näita seadistuste aknas arendajale vajalikke seadeid.",
@@ -112,7 +108,6 @@
     "feedback_tab_title": "Tagasiside",
     "more_tab_title": "Rohkem",
     "opt_in_description": "<0></0><1></1>Sa võid selle valiku eelmaldamisega alati oma nõusoleku tagasi võtta. Kui sul parasjagu on kõne pooleli, siis seadistuste muudatus jõustub pärast kõne lõppu.",
-    "show_connection_stats_label": "Näita ühenduse statistikat",
     "speaker_device_selection_label": "Kõlar"
   },
   "star_rating_input_label_one": "{{count}} tärni",
@@ -126,9 +121,5 @@
   "unauthenticated_view_eula_caption": "Klõpsides „Jätka“, nõustud sa meie <2>Lõppkasutaja litsentsilepinguga (EULA)</2>",
   "unauthenticated_view_login_button": "Logi oma kontosse sisse",
   "unmute_microphone_button_label": "Lülita mikrofon sisse",
-  "version": "Versioon: {{version}}",
-  "video_tile": {
-    "sfu_participant_local": "Sina"
-  },
-  "waiting_for_participants": "Ootame teiste osalejate lisandumist…"
+  "version": "Versioon: {{version}}"
 }

public/locales/fa/app.json

@@ -4,7 +4,6 @@
   },
   "action": {
     "close": "بستن",
-    "copy": "رونوشت",
     "go": "رفتن",
     "no": "خیر",
     "register": "ثبت‌نام",
@@ -21,7 +20,6 @@
     "audio": "صدا",
     "avatar": "آواتار",
     "camera": "دوربین",
-    "copied": "کپی شد!",
     "display_name": "نام نمایشی",
     "home": "خانه",
     "loading": "بارگزاری…",
@@ -61,9 +59,7 @@
   "register_auth_links": "<0>از قبل حساب کاربری دارید؟</0><1><0>ورود</0> Or <2>به عنوان یک میهمان وارد شوید</2></1>",
   "register_confirm_password_label": "تایید رمزعبور",
   "return_home_button": "برگشت به صفحه اصلی",
-  "room_auth_view_join_button": "الان به تماس بپیوند",
   "screenshare_button_label": "اشتراک گذاری صفحه نمایش",
-  "select_input_unset_button": "یک گزینه را انتخاب کنید",
   "settings": {
     "developer_tab_title": "توسعه دهنده",
     "feedback_tab_h4": "بازخورد ارائه دهید",
@@ -73,6 +69,5 @@
   },
   "unauthenticated_view_body": "هنوز ثبت‌نام نکرده‌اید؟ <2>ساخت حساب کاربری</2>",
   "unauthenticated_view_login_button": "به حساب کاربری خود وارد شوید",
-  "version": "نسخه: {{نسخه}}",
-  "waiting_for_participants": "در انتظار برای دیگر شرکت‌کنندگان…"
+  "version": "نسخه: {{نسخه}}"
 }

public/locales/fr/app.json

@@ -4,7 +4,6 @@
   },
   "action": {
     "close": "Fermer",
-    "copy": "Copier",
     "copy_link": "Copier le lien",
     "go": "Commencer",
     "invite": "Inviter",
@@ -37,7 +36,6 @@
   "call_name": "Nom de l’appel",
   "common": {
     "camera": "Caméra",
-    "copied": "Copié !",
     "display_name": "Nom d’affichage",
     "encrypted": "Chiffré",
     "home": "Accueil",
@@ -95,9 +93,7 @@
   "register_confirm_password_label": "Confirmer le mot de passe",
   "return_home_button": "Retour à l’accueil",
   "room_auth_view_eula_caption": "En cliquant sur « Rejoindre l’appel maintenant », vous acceptez notre <2>Contrat de Licence Utilisateur Final (CLUF)</2>",
-  "room_auth_view_join_button": "Rejoindre l’appel maintenant",
   "screenshare_button_label": "Partage d’écran",
-  "select_input_unset_button": "Sélectionnez une option",
   "settings": {
     "developer_settings_label": "Paramètres développeurs",
     "developer_settings_label_description": "Affiche les paramètres développeurs dans la fenêtre des paramètres.",
@@ -110,7 +106,6 @@
     "feedback_tab_title": "Commentaires",
     "more_tab_title": "Plus",
     "opt_in_description": "<0></0><1></1>Vous pouvez retirer votre consentement en décochant cette case. Si vous êtes actuellement en communication, ce paramètre prendra effet à la fin de l’appel.",
-    "show_connection_stats_label": "Afficher les statistiques de la connexion",
     "speaker_device_selection_label": "Intervenant"
   },
   "star_rating_input_label_one": "{{count}} favori",
@@ -124,9 +119,5 @@
   "unauthenticated_view_eula_caption": "En cliquant sur « Commencer », vous acceptez notre <2>Contrat de Licence Utilisateur Final (CLUF)</2>",
   "unauthenticated_view_login_button": "Connectez vous à votre compte",
   "unmute_microphone_button_label": "Allumer le microphone",
-  "version": "Version : {{version}}",
-  "video_tile": {
-    "sfu_participant_local": "Vous"
-  },
-  "waiting_for_participants": "En attente d’autres participants…"
+  "version": "Version : {{version}}"
 }

public/locales/id/app.json

@@ -4,7 +4,6 @@
   },
   "action": {
     "close": "Tutup",
-    "copy": "Salin",
     "copy_link": "Salin tautan",
     "go": "Bergabung",
     "invite": "Undang",
@@ -37,7 +36,6 @@
   "call_name": "Nama panggilan",
   "common": {
     "camera": "Kamera",
-    "copied": "Disalin!",
     "display_name": "Nama tampilan",
     "encrypted": "Terenkripsi",
     "home": "Beranda",
@@ -96,9 +94,7 @@
   "register_confirm_password_label": "Konfirmasi kata sandi",
   "return_home_button": "Kembali ke layar beranda",
   "room_auth_view_eula_caption": "Dengan mengeklik \"Bergabung ke panggilan sekarang\", Anda menyetujui <2>Perjanjian Lisensi Pengguna Akhir (EULA)</2> kami",
-  "room_auth_view_join_button": "Bergabung ke panggilan sekarang",
   "screenshare_button_label": "Bagikan layar",
-  "select_input_unset_button": "Pilih sebuah opsi",
   "settings": {
     "developer_settings_label": "Pengaturan Pengembang",
     "developer_settings_label_description": "Ekspos pengaturan pengembang dalam jendela pengaturan.",
@@ -111,7 +107,6 @@
     "feedback_tab_title": "Masukan",
     "more_tab_title": "Lainnya",
     "opt_in_description": "<0></0><1></1>Anda dapat mengurungkan kembali izin dengan mencentang kotak ini. Jika Anda saat ini dalam panggilan, pengaturan ini akan diterapkan di akhir panggilan.",
-    "show_connection_stats_label": "Tampilkan statistik koneksi",
     "speaker_device_selection_label": "Pembicara"
   },
   "star_rating_input_label_one": "{{count}} bintang",
@@ -125,9 +120,5 @@
   "unauthenticated_view_eula_caption": "Dengan mengeklik \"Bergabung\", Anda menyetujui <2>Perjanjian Lisensi Pengguna Akhir (EULA)</2>",
   "unauthenticated_view_login_button": "Masuk ke akun Anda",
   "unmute_microphone_button_label": "Nyalakan mikrofon",
-  "version": "Versi: {{version}}",
-  "video_tile": {
-    "sfu_participant_local": "Anda"
-  },
-  "waiting_for_participants": "Menunggu peserta lain…"
+  "version": "Versi: {{version}}"
 }

public/locales/it/app.json

@@ -4,7 +4,6 @@
   },
   "action": {
     "close": "Chiudi",
-    "copy": "Copia",
     "copy_link": "Copia collegamento",
     "go": "Vai",
     "invite": "Invita",
@@ -36,7 +35,6 @@
   "call_name": "Nome della chiamata",
   "common": {
     "camera": "Fotocamera",
-    "copied": "Copiato!",
     "display_name": "Il tuo nome",
     "encrypted": "Cifrata",
     "home": "Pagina iniziale",
@@ -94,9 +92,7 @@
   "register_confirm_password_label": "Conferma password",
   "return_home_button": "Torna alla schermata di iniziale",
   "room_auth_view_eula_caption": "Cliccando \"Entra in chiamata ora\", accetti il nostro <2>accordo di licenza con l'utente finale (EULA)</2>",
-  "room_auth_view_join_button": "Entra in chiamata ora",
   "screenshare_button_label": "Condividi schermo",
-  "select_input_unset_button": "Seleziona un'opzione",
   "settings": {
     "developer_settings_label": "Impostazioni per sviluppatori",
     "developer_settings_label_description": "Mostra le impostazioni per sviluppatori nella finestra delle impostazioni.",
@@ -108,7 +104,6 @@
     "feedback_tab_thank_you": "Grazie, abbiamo ricevuto il tuo commento!",
     "more_tab_title": "Altro",
     "opt_in_description": "<0></0><1></1>Puoi revocare il consenso deselezionando questa casella. Se attualmente sei in una chiamata, avrà effetto al termine di essa.",
-    "show_connection_stats_label": "Mostra statistiche connessione",
     "speaker_device_selection_label": "Altoparlante"
   },
   "star_rating_input_label_one": "{{count}} stelle",
@@ -122,9 +117,5 @@
   "unauthenticated_view_eula_caption": "Cliccando \"Vai\", accetti il nostro <2>accordo di licenza con l'utente finale (EULA)</2>",
   "unauthenticated_view_login_button": "Accedi al tuo profilo",
   "unmute_microphone_button_label": "Riaccendi il microfono",
-  "version": "Versione: {{version}}",
-  "video_tile": {
-    "sfu_participant_local": "Tu"
-  },
-  "waiting_for_participants": "In attesa di altri partecipanti…"
+  "version": "Versione: {{version}}"
 }

public/locales/ja/app.json

@@ -4,7 +4,6 @@
   },
   "action": {
     "close": "閉じる",
-    "copy": "コピー",
     "go": "続行",
     "no": "いいえ",
     "register": "登録",
@@ -19,7 +18,6 @@
     "audio": "音声",
     "avatar": "アバター",
     "camera": "カメラ",
-    "copied": "コピーしました！",
     "display_name": "表示名",
     "home": "ホーム",
     "loading": "読み込んでいます…",
@@ -57,9 +55,7 @@
   "register_auth_links": "<0>既にアカウントをお持ちですか？</0><1><0>ログイン</0>または<2>ゲストとしてアクセス</2></1>",
   "register_confirm_password_label": "パスワードを確認",
   "return_home_button": "ホーム画面に戻る",
-  "room_auth_view_join_button": "今すぐ通話に参加",
   "screenshare_button_label": "画面共有",
-  "select_input_unset_button": "オプションを選択",
   "settings": {
     "developer_tab_title": "開発者",
     "feedback_tab_h4": "フィードバックを送信",
@@ -68,6 +64,5 @@
   },
   "unauthenticated_view_body": "アカウントがありませんか？ <2>アカウントを作成</2>",
   "unauthenticated_view_login_button": "アカウントにログイン",
-  "version": "バージョン：{{version}}",
-  "waiting_for_participants": "他の参加者を待機しています…"
+  "version": "バージョン：{{version}}"
 }

public/locales/lv/app.json

@@ -4,7 +4,6 @@
   },
   "action": {
     "close": "Aizvērt",
-    "copy": "Ievietot starpliktuvē",
     "go": "Aiziet",
     "no": "Nē",
     "register": "Reģistrēties",
@@ -29,7 +28,6 @@
     "audio": "Skaņa",
     "avatar": "Attēls",
     "camera": "Kamera",
-    "copied": "Ievietots starpliktuvē.",
     "display_name": "Attēlojamais vārds",
     "home": "Sākums",
     "loading": "Lādējas…",
@@ -75,9 +73,7 @@
   "register_confirm_password_label": "Apstiprināt paroli",
   "return_home_button": "Atgriezties sākuma ekrānā",
   "room_auth_view_eula_caption": "Klikšķināšana uz \"Pievienoties zvanam tagad\" apliecina piekrišanu mūsu <2>galalietotāja licencēšanas nolīgumam (GLLN)</2>",
-  "room_auth_view_join_button": "Pievienoties zvanam tagad",
   "screenshare_button_label": "Kopīgot ekrānu",
-  "select_input_unset_button": "Atlasīt iespēju",
   "settings": {
     "developer_settings_label": "Izstrādātāja iestatījumi",
     "developer_settings_label_description": "Izstādīt izstrādātāja iestatījumus iestatījumu logā.",
@@ -90,7 +86,6 @@
     "feedback_tab_title": "Atsauksmes",
     "more_tab_title": "Vairāk",
     "opt_in_description": "<0></0><1></1>Savu piekrišanu var atsaukt ar atzīmes noņemšanu no šīs rūtiņas. Ja pašreiz atrodies zvanā, šis iestatījums stāsies spēkā zvana beigās.",
-    "show_connection_stats_label": "Rādīt savienojuma apkopojumu",
     "speaker_device_selection_label": "Runātājs"
   },
   "star_rating_input_label_one": "{{count}} zvaigzne",
@@ -99,6 +94,5 @@
   "unauthenticated_view_body": "Vēl neesi reģistrējies? <2>Izveidot kontu</2>",
   "unauthenticated_view_eula_caption": "Klikšķināšana uz \"Aiziet\" apliecina piekrišanu mūsu <2>galalietotāja licencēšanas nolīgumam (GLLN)</2>",
   "unauthenticated_view_login_button": "Pieteikties kontā",
-  "version": "Versija: {{version}}",
-  "waiting_for_participants": "Gaida citus dalībniekus…"
+  "version": "Versija: {{version}}"
 }

public/locales/pl/app.json

@@ -4,7 +4,6 @@
   },
   "action": {
     "close": "Zamknij",
-    "copy": "Kopiuj",
     "copy_link": "Kopiuj link",
     "go": "Przejdź",
     "invite": "Zaproś",
@@ -39,7 +38,6 @@
     "audio": "Dźwięk",
     "avatar": "Awatar",
     "camera": "Kamera",
-    "copied": "Skopiowano!",
     "display_name": "Nazwa wyświetlana",
     "encrypted": "Szyfrowane",
     "home": "Strona domowa",
@@ -99,9 +97,7 @@
   "register_confirm_password_label": "Potwierdź hasło",
   "return_home_button": "Powróć do strony głównej",
   "room_auth_view_eula_caption": "Klikając \"Dołącz teraz do rozmowy\", zgadzasz się na naszą <2>Umowę licencyjną (EULA)</2>",
-  "room_auth_view_join_button": "Dołącz do połączenia teraz",
   "screenshare_button_label": "Udostępnij ekran",
-  "select_input_unset_button": "Wybierz opcję",
   "settings": {
     "developer_settings_label": "Opcje programisty",
     "developer_settings_label_description": "Wyświetl opcje programisty w oknie ustawień.",
@@ -114,7 +110,6 @@
     "feedback_tab_title": "Opinia użytkownika",
     "more_tab_title": "Więcej",
     "opt_in_description": "<0></0><1></1>Możesz wycofać swoją zgodę poprzez odznaczenie tego pola. Jeśli już jesteś w trakcie rozmowy, opcja zostanie zastosowana po jej zakończeniu.",
-    "show_connection_stats_label": "Pokaż statystyki połączenia",
     "speaker_device_selection_label": "Głośnik"
   },
   "star_rating_input_label_one": "{{count}} gwiazdki",
@@ -128,9 +123,5 @@
   "unauthenticated_view_eula_caption": "Klikając \"Przejdź\", zgadzasz się na naszą <2>Umowę licencyjną (EULA)</2>",
   "unauthenticated_view_login_button": "Zaloguj się do swojego konta",
   "unmute_microphone_button_label": "Odcisz mikrofon",
-  "version": "Wersja: {{version}}",
-  "video_tile": {
-    "sfu_participant_local": "Ty"
-  },
-  "waiting_for_participants": "Oczekiwanie na pozostałych uczestników…"
+  "version": "Wersja: {{version}}"
 }

public/locales/ru/app.json

@@ -4,7 +4,6 @@
   },
   "action": {
     "close": "Закрыть",
-    "copy": "Копировать",
     "go": "Далее",
     "no": "Нет",
     "register": "Зарегистрироваться",
@@ -27,7 +26,6 @@
     "audio": "Аудио",
     "avatar": "Аватар",
     "camera": "Камера",
-    "copied": "Скопировано!",
     "display_name": "Видимое имя",
     "home": "Начало",
     "loading": "Загрузка…",
@@ -69,9 +67,7 @@
   "register_auth_links": "<0>Уже есть аккаунт?</0><1><0>Войти с ним</0> или <2>Зайти как гость</2></1>",
   "register_confirm_password_label": "Подтвердите пароль",
   "return_home_button": "Вернуться в Начало",
-  "room_auth_view_join_button": "Присоединиться сейчас",
   "screenshare_button_label": "Поделиться экраном",
-  "select_input_unset_button": "Выберите вариант",
   "settings": {
     "developer_settings_label": "Настройки Разработчика",
     "developer_settings_label_description": "Раскрыть настройки разработчика в окне настроек.",
@@ -84,7 +80,6 @@
     "feedback_tab_title": "Отзыв",
     "more_tab_title": "Больше",
     "opt_in_description": "<0></0><1></1>Вы можете отозвать согласие, сняв этот флажок. Если вы в данный момент находитесь в разговоре, эта настройка вступит в силу по окончании разговора.",
-    "show_connection_stats_label": "Показать статистику соединения",
     "speaker_device_selection_label": "Динамик"
   },
   "star_rating_input_label_one": "{{count}} отмечен",
@@ -92,6 +87,5 @@
   "submitting": "Отправляем…",
   "unauthenticated_view_body": "Ещё не зарегистрированы? <2>Создайте аккаунт</2>",
   "unauthenticated_view_login_button": "Войдите в свой аккаунт",
-  "version": "Версия: {{version}}",
-  "waiting_for_participants": "Ожидание других участников…"
+  "version": "Версия: {{version}}"
 }

public/locales/sk/app.json

@@ -4,7 +4,6 @@
   },
   "action": {
     "close": "Zatvoriť",
-    "copy": "Kopírovať",
     "copy_link": "Kopírovať odkaz",
     "go": "Prejsť",
     "invite": "Pozvať",
@@ -38,7 +37,6 @@
   "common": {
     "avatar": "Obrázok",
     "camera": "Kamera",
-    "copied": "Skopírované!",
     "display_name": "Zobrazované meno",
     "encrypted": "Šifrované",
     "home": "Domov",
@@ -97,9 +95,7 @@
   "register_confirm_password_label": "Potvrdiť heslo",
   "return_home_button": "Návrat na domovskú obrazovku",
   "room_auth_view_eula_caption": "Kliknutím na \"Pripojiť sa k hovoru teraz\" súhlasíte s našou <2>Licenčnou zmluvou s koncovým používateľom (EULA)</2>",
-  "room_auth_view_join_button": "Pripojiť sa k hovoru teraz",
   "screenshare_button_label": "Zdieľať obrazovku",
-  "select_input_unset_button": "Vyberte možnosť",
   "settings": {
     "developer_settings_label": "Nastavenia pre vývojárov",
     "developer_settings_label_description": "Zobraziť nastavenia pre vývojárov v okne nastavení.",
@@ -112,7 +108,6 @@
     "feedback_tab_title": "Spätná väzba",
     "more_tab_title": "Viac",
     "opt_in_description": "<0></0><1></1>Súhlas môžete odvolať zrušením označenia tohto políčka. Ak práve prebieha hovor, toto nastavenie nadobudne platnosť po skončení hovoru.",
-    "show_connection_stats_label": "Zobraziť štatistiky pripojenia",
     "speaker_device_selection_label": "Reproduktor"
   },
   "star_rating_input_label_one": "{{count}} hviezdička",
@@ -126,9 +121,5 @@
   "unauthenticated_view_eula_caption": "Kliknutím na tlačidlo \"Prejsť\" vyjadrujete súhlas s našou <2>Licenčnou zmluvou s koncovým používateľom (EULA)</2>",
   "unauthenticated_view_login_button": "Prihláste sa do svojho konta",
   "unmute_microphone_button_label": "Zrušiť stlmenie mikrofónu",
-  "version": "Verzia: {{version}}",
-  "video_tile": {
-    "sfu_participant_local": "Vy"
-  },
-  "waiting_for_participants": "Čaká sa na ďalších účastníkov…"
+  "version": "Verzia: {{version}}"
 }

public/locales/tr/app.json

@@ -16,7 +16,6 @@
   "common": {
     "audio": "Ses",
     "camera": "Kamera",
-    "copied": "Kopyalandı",
     "display_name": "Ekran adı",
     "home": "Ev",
     "loading": "Yükleniyor…",
@@ -49,9 +48,7 @@
   "register_auth_links": "<0>Mevcut hesabınız mı var?</0><1><0>Gir</0> yahut <2>Konuk girişi</2></1>",
   "register_confirm_password_label": "Parolayı tekrar edin",
   "return_home_button": "Ev ekranına geri dön",
-  "room_auth_view_join_button": "Aramaya katıl",
   "screenshare_button_label": "Ekran paylaş",
-  "select_input_unset_button": "Bir seçenek seç",
   "settings": {
     "developer_tab_title": "Geliştirici",
     "feedback_tab_h4": "Geri bildirim ver",

public/locales/uk/app.json

@@ -4,7 +4,6 @@
   },
   "action": {
     "close": "Закрити",
-    "copy": "Копіювати",
     "copy_link": "Скопіювати посилання",
     "go": "Далі",
     "invite": "Запросити",
@@ -39,7 +38,6 @@
     "audio": "Звук",
     "avatar": "Аватар",
     "camera": "Камера",
-    "copied": "Скопійовано!",
     "display_name": "Псевдонім",
     "encrypted": "Зашифровано",
     "home": "Домівка",
@@ -99,9 +97,7 @@
   "register_confirm_password_label": "Підтвердити пароль",
   "return_home_button": "Повернутися на екран домівки",
   "room_auth_view_eula_caption": "Натискаючи \"Приєднатися до виклику зараз\", ви погоджуєтеся з нашою <2>Ліцензійною угодою з кінцевим користувачем (EULA)</2>",
-  "room_auth_view_join_button": "Приєднатися до виклику зараз",
   "screenshare_button_label": "Поділитися екраном",
-  "select_input_unset_button": "Вибрати опцію",
   "settings": {
     "developer_settings_label": "Налаштування розробника",
     "developer_settings_label_description": "Відкрийте налаштування розробника у вікні налаштувань.",
@@ -114,7 +110,6 @@
     "feedback_tab_title": "Відгук",
     "more_tab_title": "Докладніше",
     "opt_in_description": "<0></0><1></1>Ви можете відкликати згоду, прибравши цей прапорець. Якщо ви зараз розмовляєте, це налаштування застосується після завершення виклику.",
-    "show_connection_stats_label": "Показати стан з'єднання",
     "speaker_device_selection_label": "Динамік"
   },
   "star_rating_input_label_one": "{{count}} зірок",
@@ -128,9 +123,5 @@
   "unauthenticated_view_eula_caption": "Натискаючи \"Далі\", ви погоджуєтеся з нашою <2>Ліцензійною угодою з кінцевим користувачем (EULA)</2>",
   "unauthenticated_view_login_button": "Увійдіть до свого облікового запису",
   "unmute_microphone_button_label": "Увімкнути мікрофон",
-  "version": "Версія: {{version}}",
-  "video_tile": {
-    "sfu_participant_local": "Ви"
-  },
-  "waiting_for_participants": "Очікування на інших учасників…"
+  "version": "Версія: {{version}}"
 }

public/locales/vi/app.json

@@ -1,7 +1,6 @@
 {
   "action": {
     "close": "Đóng",
-    "copy": "Sao chép",
     "no": "Không",
     "register": "Đăng ký",
     "sign_in": "Đăng nhập",
@@ -19,7 +18,6 @@
     "audio": "Âm thanh",
     "avatar": "Ảnh đại diện",
     "camera": "Máy quay",
-    "copied": "Đã sao chép!",
     "display_name": "Tên hiển thị",
     "loading": "Đang tải…",
     "microphone": "Micrô",
@@ -55,7 +53,6 @@
   },
   "register_auth_links": "<0>Đã có tài khoản?</0><1><0>Đăng nhập</0> Hay <2>Tham gia dưới tên Khách</2></1>",
   "register_confirm_password_label": "Xác nhận mật khẩu",
-  "room_auth_view_join_button": "Tham gia cuộc gọi",
   "screenshare_button_label": "Chia sẻ màn hình",
   "settings": {
     "developer_settings_label": "Cài đặt phát triển",
@@ -70,6 +67,5 @@
   "submitting": "Đang gửi…",
   "unauthenticated_view_body": "Chưa đăng ký? <2>Tạo tài khoản</2>",
   "unauthenticated_view_login_button": "Đăng nhập vào tài khoản của bạn",
-  "version": "Phiên bản: {{version}}",
-  "waiting_for_participants": "Đang đợi những người khác…"
+  "version": "Phiên bản: {{version}}"
 }

public/locales/zh-Hans/app.json

@@ -4,7 +4,6 @@
   },
   "action": {
     "close": "关闭",
-    "copy": "复制",
     "go": "开始",
     "no": "否",
     "register": "注册",
@@ -37,7 +36,6 @@
     "audio": "音频",
     "avatar": "头像",
     "camera": "摄像头",
-    "copied": "已复制！",
     "display_name": "显示名称",
     "encrypted": "已加密",
     "home": "主页",
@@ -92,9 +90,7 @@
   "register_confirm_password_label": "确认密码",
   "return_home_button": "返回主页",
   "room_auth_view_eula_caption": "点击 \"加入通话\"，即表示您同意我们的<2>最终用户许可协议 (EULA)</2>",
-  "room_auth_view_join_button": "现在加入通话",
   "screenshare_button_label": "屏幕共享",
-  "select_input_unset_button": "选择一个选项",
   "settings": {
     "developer_settings_label": "开发者设置",
     "developer_settings_label_description": "在设置中显示开发者设置。",
@@ -107,7 +103,6 @@
     "feedback_tab_title": "反馈",
     "more_tab_title": "更多",
     "opt_in_description": "<0></0><1></1>您可以取消选中复选框来撤回同意。如果正在通话中，此设置将在通话结束时生效。",
-    "show_connection_stats_label": "显示连接统计信息",
     "speaker_device_selection_label": "发言人"
   },
   "star_rating_input_label_one": "{{count}} 个星",
@@ -121,9 +116,5 @@
   "unauthenticated_view_eula_caption": "点击 \"开始\"，即表示您同意我们的<2>最终用户许可协议 (EULA)</2>",
   "unauthenticated_view_login_button": "登录你的账户",
   "unmute_microphone_button_label": "取消麦克风静音",
-  "version": "版本：{{version}}",
-  "video_tile": {
-    "sfu_participant_local": "你"
-  },
-  "waiting_for_participants": "等待其他参与者……"
+  "version": "版本：{{version}}"
 }

public/locales/zh-Hant/app.json

@@ -4,7 +4,6 @@
   },
   "action": {
     "close": "關閉",
-    "copy": "複製",
     "copy_link": "複製連結",
     "go": "前往",
     "invite": "邀請",
@@ -39,7 +38,6 @@
     "audio": "語音",
     "avatar": "大頭照",
     "camera": "相機",
-    "copied": "已複製！",
     "display_name": "顯示名稱",
     "encrypted": "已加密",
     "home": "首頁",
@@ -99,9 +97,7 @@
   "register_confirm_password_label": "確認密碼",
   "return_home_button": "回到首頁",
   "room_auth_view_eula_caption": "點擊「立刻加入通話」即表示您同意我們的<2>終端使用者授權協議 (EULA)</2>",
-  "room_auth_view_join_button": "現在加入通話",
   "screenshare_button_label": "分享畫面",
-  "select_input_unset_button": "選擇一個選項",
   "settings": {
     "developer_settings_label": "開發者設定",
     "developer_settings_label_description": "在設定視窗中顯示開發者設定。",
@@ -114,7 +110,6 @@
     "feedback_tab_title": "回饋",
     "more_tab_title": "更多",
     "opt_in_description": "<0></0><1></1>您可以透過取消核取此方塊來撤回同意。若您目前正在通話中，此設定將在通話結束時生效。",
-    "show_connection_stats_label": "顯示連線統計資料",
     "speaker_device_selection_label": "發言者"
   },
   "star_rating_input_label_one": "{{count}} 個星星",
@@ -128,9 +123,5 @@
   "unauthenticated_view_eula_caption": "點擊「前往」即表示您同意我們的<2>終端使用者授權協議 (EULA)</2>",
   "unauthenticated_view_login_button": "登入您的帳號",
   "unmute_microphone_button_label": "將麥克風取消靜音",
-  "version": "版本： {{version}}",
-  "video_tile": {
-    "sfu_participant_local": "您"
-  },
-  "waiting_for_participants": "等待其他參加者…"
+  "version": "版本： {{version}}"
 }

renovate.json

@@ -44,5 +44,6 @@
       "prHeader": "Please review modals on mobile for visual regressions."
     }
   ],
-  "semanticCommits": "disabled"
+  "semanticCommits": "disabled",
+  "ignoreDeps": ["posthog-js"]
 }

src/@types/global.d.ts

@@ -6,6 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import "matrix-js-sdk/src/@types/global";
+import type { DurationFormat as PolyfillDurationFormat } from "@formatjs/intl-durationformat";
 import { Controls } from "../controls";
 
 declare global {
@@ -23,4 +24,9 @@ declare global {
     // Safari only supports this prefixed, so tell the type system about it
     webkitRequestFullscreen: () => void;
   }
+
+  namespace Intl {
+    // Add DurationFormat as part of the Intl namespace because we polyfill it
+    const DurationFormat: typeof PolyfillDurationFormat;
+  }
 }

src/@types/matrix-js-sdk.d.ts

@@ -0,0 +1,18 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import {
+  ElementCallReactionEventType,
+  ECallReactionEventContent,
+} from "../reactions";
+
+// Extend Matrix JS SDK types via Typescript declaration merging to support unspecced event fields and types
+declare module "matrix-js-sdk/src/types" {
+  export interface TimelineEvents {
+    [ElementCallReactionEventType]: ECallReactionEventContent;
+  }
+}

src/ClientContext.tsx

@@ -16,18 +16,13 @@ import {
   useMemo,
 } from "react";
 import { useHistory } from "react-router-dom";
-import {
-  ClientEvent,
-  ICreateClientOpts,
-  MatrixClient,
-} from "matrix-js-sdk/src/client";
 import { logger } from "matrix-js-sdk/src/logger";
 import { useTranslation } from "react-i18next";
 import { ISyncStateData, SyncState } from "matrix-js-sdk/src/sync";
-import { MatrixError } from "matrix-js-sdk/src/matrix";
+import { ClientEvent, type MatrixClient } from "matrix-js-sdk/src/client";
 
+import type { WidgetApi } from "matrix-widget-api";
 import { ErrorView } from "./FullScreenView";
-import { fallbackICEServerAllowed, initClient } from "./utils/matrix";
 import { widget } from "./widget";
 import {
   PosthogAnalytics,
@@ -35,7 +30,6 @@ import {
 } from "./analytics/PosthogAnalytics";
 import { translatedError } from "./TranslatedError";
 import { useEventTarget } from "./useEvents";
-import { Config } from "./config/Config";
 
 declare global {
   interface Window {
@@ -52,6 +46,9 @@ export type ValidClientState = {
   // 'Disconnected' rather than 'connected' because it tracks specifically
   // whether the client is supposed to be connected but is not
   disconnected: boolean;
+  supportedFeatures: {
+    reactions: boolean;
+  };
   setClient: (params?: SetClientParams) => void;
 };
 
@@ -188,11 +185,11 @@ export const ClientProvider: FC<Props> = ({ children }) => {
       saveSession({ ...session, passwordlessUser: false });
 
       setInitClientState({
-        client: initClientState.client,
+        ...initClientState,
         passwordlessUser: false,
       });
     },
-    [initClientState?.client],
+    [initClientState],
   );
 
   const setClient = useCallback(
@@ -206,6 +203,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
       if (clientParams) {
         saveSession(clientParams.session);
         setInitClientState({
+          widgetApi: null,
           client: clientParams.client,
           passwordlessUser: clientParams.session.passwordlessUser,
         });
@@ -254,6 +252,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
   );
 
   const [isDisconnected, setIsDisconnected] = useState(false);
+  const [supportsReactions, setSupportsReactions] = useState(false);
 
   const state: ClientState | undefined = useMemo(() => {
     if (alreadyOpenedErr) {
@@ -277,6 +276,9 @@ export const ClientProvider: FC<Props> = ({ children }) => {
       authenticated,
       setClient,
       disconnected: isDisconnected,
+      supportedFeatures: {
+        reactions: supportsReactions,
+      },
     };
   }, [
     alreadyOpenedErr,
@@ -285,6 +287,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
     logout,
     setClient,
     isDisconnected,
+    supportsReactions,
   ]);
 
   const onSync = useCallback(
@@ -309,6 +312,30 @@ export const ClientProvider: FC<Props> = ({ children }) => {
       initClientState.client.on(ClientEvent.Sync, onSync);
     }
 
+    if (initClientState.widgetApi) {
+      const reactSend = initClientState.widgetApi.hasCapability(
+        "org.matrix.msc2762.send.event:m.reaction",
+      );
+      const redactSend = initClientState.widgetApi.hasCapability(
+        "org.matrix.msc2762.send.event:m.room.redaction",
+      );
+      const reactRcv = initClientState.widgetApi.hasCapability(
+        "org.matrix.msc2762.receive.event:m.reaction",
+      );
+      const redactRcv = initClientState.widgetApi.hasCapability(
+        "org.matrix.msc2762.receive.event:m.room.redaction",
+      );
+
+      if (!reactSend || !reactRcv || !redactSend || !redactRcv) {
+        logger.warn("Widget does not support reactions");
+        setSupportsReactions(false);
+      } else {
+        setSupportsReactions(true);
+      }
+    } else {
+      setSupportsReactions(true);
+    }
+
     return (): void => {
       if (initClientState.client) {
         initClientState.client.removeListener(ClientEvent.Sync, onSync);
@@ -325,7 +352,8 @@ export const ClientProvider: FC<Props> = ({ children }) => {
   );
 };
 
-type InitResult = {
+export type InitResult = {
+  widgetApi: WidgetApi | null;
   client: MatrixClient;
   passwordlessUser: boolean;
 };
@@ -336,53 +364,13 @@ async function loadClient(): Promise<InitResult | null> {
     logger.log("Using a matryoshka client");
     const client = await widget.client;
     return {
+      widgetApi: widget.api,
       client,
       passwordlessUser: false,
     };
   } else {
-    // We're running as a standalone application
-    try {
-      const session = loadSession();
-      if (!session) {
-        logger.log("No session stored; continuing without a client");
-        return null;
-      }
-
-      logger.log("Using a standalone client");
-
-      /* eslint-disable camelcase */
-      const { user_id, device_id, access_token, passwordlessUser } = session;
-      const initClientParams: ICreateClientOpts = {
-        baseUrl: Config.defaultHomeserverUrl()!,
-        accessToken: access_token,
-        userId: user_id,
-        deviceId: device_id,
-        fallbackICEServerAllowed: fallbackICEServerAllowed,
-        livekitServiceURL: Config.get().livekit?.livekit_service_url,
-      };
-
-      try {
-        const client = await initClient(initClientParams, true);
-        return {
-          client,
-          passwordlessUser,
-        };
-      } catch (err) {
-        if (err instanceof MatrixError && err.errcode === "M_UNKNOWN_TOKEN") {
-          // We can't use this session anymore, so let's log it out
-          logger.log(
-            "The session from local store is invalid; continuing without a client",
-          );
-          clearSession();
-          // returning null = "no client` pls register" (undefined = "loading" which is the current value when reaching this line)
-          return null;
-        }
-        throw err;
-      }
-    } catch (err) {
-      clearSession();
-      throw err;
-    }
+    const { initSPA } = await import("./utils/spa");
+    return initSPA(loadSession, clearSession);
   }
 }
 

src/Modal.module.css

@@ -12,7 +12,7 @@ Please see LICENSE in the repository root for full details.
 
 .dialog {
   box-sizing: border-box;
-  inline-size: 520px;
+  inline-size: 580px;
   max-inline-size: 90%;
   max-block-size: 600px;
 }

src/Modal.test.tsx

@@ -0,0 +1,73 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { expect, test } from "vitest";
+import { render } from "@testing-library/react";
+import { ReactNode, useState } from "react";
+import { afterEach } from "node:test";
+import userEvent from "@testing-library/user-event";
+
+import { Modal } from "./Modal";
+
+const originalMatchMedia = window.matchMedia;
+afterEach(() => {
+  window.matchMedia = originalMatchMedia;
+});
+
+test("that nothing is rendered when the modal is closed", () => {
+  const { queryByRole } = render(
+    <Modal title="My modal" open={false}>
+      <p>This is the content.</p>
+    </Modal>,
+  );
+  expect(queryByRole("dialog")).toBeNull();
+});
+
+test("the content is rendered when the modal is open", () => {
+  const { queryByRole } = render(
+    <Modal title="My modal" open={true}>
+      <p>This is the content.</p>
+    </Modal>,
+  );
+  expect(queryByRole("dialog")).toMatchSnapshot();
+});
+
+test("the modal can be closed by clicking the close button", async () => {
+  function ModalFn(): ReactNode {
+    const [isOpen, setOpen] = useState(true);
+    return (
+      <Modal title="My modal" open={isOpen} onDismiss={() => setOpen(false)}>
+        <p>This is the content.</p>
+      </Modal>
+    );
+  }
+  const user = userEvent.setup();
+  const { queryByRole, getByRole } = render(<ModalFn />);
+  await user.click(getByRole("button", { name: "action.close" }));
+  expect(queryByRole("dialog")).toBeNull();
+});
+
+test("the modal renders as a drawer in mobile viewports", () => {
+  window.matchMedia = function (query): MediaQueryList {
+    return {
+      matches: query.includes("hover: none"),
+      addEventListener(): MediaQueryList {
+        return this as MediaQueryList;
+      },
+      removeEventListener(): MediaQueryList {
+        return this as MediaQueryList;
+      },
+    } as unknown as MediaQueryList;
+  };
+
+  const { queryByRole } = render(
+    <Modal title="My modal" open={true}>
+      <p>This is the content.</p>
+    </Modal>,
+  );
+  expect(queryByRole("dialog")).toMatchSnapshot();
+});

src/Modal.tsx

@@ -27,8 +27,21 @@ import { useMediaQuery } from "./useMediaQuery";
 
 export interface Props {
   title: string;
+  /**
+   * Hide the modal header. Used for smaller popups where the context is readily apparent.
+   * A title should still be specified for users using assistive technology.
+   */
+  hideHeader?: boolean;
   children: ReactNode;
   className?: string;
+  /**
+   * Class name to be used when in drawer mode (touchscreen).
+   */
+  classNameDrawer?: string;
+  /**
+   * Class name to be used when in modal mode (desktop).
+   */
+  classNameModal?: string;
   /**
    * The controlled open state of the modal.
    */
@@ -54,8 +67,11 @@ export interface Props {
  */
 export const Modal: FC<Props> = ({
   title,
+  hideHeader,
   children,
   className,
+  classNameDrawer,
+  classNameModal,
   open,
   onDismiss,
   tabbed,
@@ -84,11 +100,13 @@ export const Modal: FC<Props> = ({
           <Drawer.Content
             className={classNames(
               className,
+              classNameDrawer,
               overlayStyles.overlay,
               styles.modal,
               styles.drawer,
               { [styles.tabbed]: tabbed },
             )}
+            role="dialog"
             // Suppress the warning about there being no description; the modal
             // has an accessible title
             aria-describedby={undefined}
@@ -108,18 +126,46 @@ export const Modal: FC<Props> = ({
       </Drawer.Root>
     );
   } else {
+    const titleNode = (
+      <DialogTitle asChild>
+        <Heading as="h2" weight="semibold" size="md">
+          {title}
+        </Heading>
+      </DialogTitle>
+    );
+    const header = (
+      <div className={styles.header}>
+        {titleNode}
+        {onDismiss !== undefined && (
+          <DialogClose
+            className={styles.close}
+            data-testid="modal_close"
+            aria-label={t("action.close")}
+          >
+            <CloseIcon width={20} height={20} />
+          </DialogClose>
+        )}
+      </div>
+    );
+
     return (
       <DialogRoot open={open} onOpenChange={onOpenChange}>
         <DialogPortal>
           <DialogOverlay
             className={classNames(overlayStyles.bg, overlayStyles.animate)}
           />
-          {/* Suppress the warning about there being no description; the modal
-          has an accessible title */}
-          <DialogContent asChild aria-describedby={undefined} {...rest}>
+          <DialogContent
+            asChild
+            // Suppress the warning about there being no description; the modal
+            // has an accessible title
+            aria-describedby={undefined}
+            role="dialog"
+            {...rest}
+          >
             <Glass
               className={classNames(
                 className,
+                classNameModal,
                 overlayStyles.overlay,
                 overlayStyles.animate,
                 styles.modal,
@@ -128,22 +174,10 @@ export const Modal: FC<Props> = ({
               )}
             >
               <div className={styles.content}>
-                <div className={styles.header}>
-                  <DialogTitle asChild>
-                    <Heading as="h2" weight="semibold" size="md">
-                      {title}
-                    </Heading>
-                  </DialogTitle>
-                  {onDismiss !== undefined && (
-                    <DialogClose
-                      className={styles.close}
-                      data-testid="modal_close"
-                      aria-label={t("action.close")}
-                    >
-                      <CloseIcon width={20} height={20} />
-                    </DialogClose>
-                  )}
-                </div>
+                {!hideHeader ? header : null}
+                {hideHeader ? (
+                  <VisuallyHidden asChild>{titleNode}</VisuallyHidden>
+                ) : null}
                 <div className={styles.body}>{children}</div>
               </div>
             </Glass>

src/Slider.tsx

@@ -8,6 +8,7 @@ Please see LICENSE in the repository root for full details.
 import { FC, useCallback } from "react";
 import { Root, Track, Range, Thumb } from "@radix-ui/react-slider";
 import classNames from "classnames";
+import { Tooltip } from "@vector-im/compound-web";
 
 import styles from "./Slider.module.css";
 
@@ -16,6 +17,13 @@ interface Props {
   label: string;
   value: number;
   onValueChange: (value: number) => void;
+  /**
+   * Event handler called when the value changes at the end of an interaction.
+   * Useful when you only need to capture a final value to update a backend
+   * service, or when you want to remember the last value that the user
+   * "committed" to.
+   */
+  onValueCommit?: (value: number) => void;
   min: number;
   max: number;
   step: number;
@@ -30,6 +38,7 @@ export const Slider: FC<Props> = ({
   label,
   value,
   onValueChange: onValueChangeProp,
+  onValueCommit: onValueCommitProp,
   min,
   max,
   step,
@@ -39,12 +48,17 @@ export const Slider: FC<Props> = ({
     ([v]: number[]) => onValueChangeProp(v),
     [onValueChangeProp],
   );
+  const onValueCommit = useCallback(
+    ([v]: number[]) => onValueCommitProp?.(v),
+    [onValueCommitProp],
+  );
 
   return (
     <Root
       className={classNames(className, styles.slider)}
       value={[value]}
       onValueChange={onValueChange}
+      onValueCommit={onValueCommit}
       min={min}
       max={max}
       step={step}
@@ -53,7 +67,10 @@ export const Slider: FC<Props> = ({
       <Track className={styles.track}>
         <Range className={styles.highlight} />
       </Track>
-      <Thumb className={styles.handle} aria-label={label} />
+      {/* Note: This is expected not to be visible on mobile.*/}
+      <Tooltip placement="top" label={Math.round(value * 100).toString() + "%"}>
+        <Thumb className={styles.handle} aria-label={label} />
+      </Tooltip>
     </Root>
   );
 };

src/UrlParams.ts

@@ -43,6 +43,8 @@ export interface UrlParams {
   /**
    * Whether upon entering a room, the user should be prompted to launch the
    * native mobile app. (Affects only Android and iOS.)
+   *
+   * The app prompt must also be enabled in the config for this to take effect.
    */
   appPrompt: boolean;
   /**

src/__snapshots__/Modal.test.tsx.snap

@@ -0,0 +1,78 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`the content is rendered when the modal is open 1`] = `
+<div
+  aria-labelledby="radix-:r4:"
+  class="overlay animate modal dialog _glass_1x9g9_17"
+  data-state="open"
+  id="radix-:r3:"
+  role="dialog"
+  style="pointer-events: auto;"
+  tabindex="-1"
+>
+  <div
+    class="content"
+  >
+    <div
+      class="header"
+    >
+      <h2
+        class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
+        id="radix-:r4:"
+      >
+        My modal
+      </h2>
+    </div>
+    <div
+      class="body"
+    >
+      <p>
+        This is the content.
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`the modal renders as a drawer in mobile viewports 1`] = `
+<div
+  aria-labelledby="radix-:ra:"
+  class="overlay modal drawer"
+  data-state="open"
+  data-vaul-animate="true"
+  data-vaul-custom-container="false"
+  data-vaul-delayed-snap-points="false"
+  data-vaul-drawer=""
+  data-vaul-drawer-direction="bottom"
+  data-vaul-snap-points="false"
+  id="radix-:r9:"
+  role="dialog"
+  style="pointer-events: auto;"
+  tabindex="-1"
+>
+  <div
+    class="content"
+  >
+    <div
+      class="header"
+    >
+      <div
+        class="handle"
+      />
+      <h2
+        id="radix-:ra:"
+        style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; word-wrap: normal;"
+      >
+        My modal
+      </h2>
+    </div>
+    <div
+      class="body"
+    >
+      <p>
+        This is the content.
+      </p>
+    </div>
+  </div>
+</div>
+`;

src/analytics/PosthogAnalytics.ts

@@ -64,6 +64,7 @@ interface PlatformProperties {
   appVersion: string;
   matrixBackend: "embedded" | "jssdk";
   callBackend: "livekit" | "full-mesh";
+  cryptoVersion?: string;
 }
 
 interface PosthogSettings {
@@ -184,6 +185,9 @@ export class PosthogAnalytics {
       appVersion,
       matrixBackend: widget ? "embedded" : "jssdk",
       callBackend: "livekit",
+      cryptoVersion: widget
+        ? undefined
+        : window.matrixclient?.getCrypto()?.getVersion(),
     };
   }
 

src/analytics/PosthogEvents.ts

@@ -7,6 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { DisconnectReason } from "livekit-client";
 import { logger } from "matrix-js-sdk/src/logger";
+import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc";
 
 import {
   IPosthogEvent,
@@ -20,6 +21,9 @@ interface CallEnded extends IPosthogEvent {
   callParticipantsOnLeave: number;
   callParticipantsMax: number;
   callDuration: number;
+  roomEventEncryptionKeysSent: number;
+  roomEventEncryptionKeysReceived: number;
+  roomEventEncryptionKeysReceivedAverageAge: number;
 }
 
 export class CallEndedTracker {
@@ -43,6 +47,7 @@ export class CallEndedTracker {
     callId: string,
     callParticipantsNow: number,
     sendInstantly: boolean,
+    rtcSession: MatrixRTCSession,
   ): void {
     PosthogAnalytics.instance.trackEvent<CallEnded>(
       {
@@ -51,6 +56,16 @@ export class CallEndedTracker {
         callParticipantsMax: this.cache.maxParticipantsCount,
         callParticipantsOnLeave: callParticipantsNow,
         callDuration: (Date.now() - this.cache.startTime.getTime()) / 1000,
+        roomEventEncryptionKeysSent:
+          rtcSession.statistics.counters.roomEventEncryptionKeysSent,
+        roomEventEncryptionKeysReceived:
+          rtcSession.statistics.counters.roomEventEncryptionKeysReceived,
+        roomEventEncryptionKeysReceivedAverageAge:
+          rtcSession.statistics.counters.roomEventEncryptionKeysReceived > 0
+            ? rtcSession.statistics.totals
+                .roomEventEncryptionKeysReceivedTotalAge /
+              rtcSession.statistics.counters.roomEventEncryptionKeysReceived
+            : 0,
       },
       { send_instantly: sendInstantly },
     );

src/auth/LoginPage.module.css

@@ -64,15 +64,6 @@ Please see LICENSE in the repository root for full details.
   flex-direction: column;
   justify-content: flex-end;
   align-items: center;
-}
-
-.authLinks {
   margin-bottom: 100px;
   font-size: var(--font-size-body);
 }
-
-.authLinks a {
-  color: var(--cpd-color-text-action-accent);
-  text-decoration: none;
-  font-weight: normal;
-}

src/auth/LoginPage.tsx

@@ -6,7 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { FC, FormEvent, useCallback, useRef, useState } from "react";
-import { useHistory, useLocation, Link } from "react-router-dom";
+import { useHistory, useLocation } from "react-router-dom";
 import { Trans, useTranslation } from "react-i18next";
 import { Button } from "@vector-im/compound-web";
 
@@ -18,6 +18,7 @@ import { useInteractiveLogin } from "./useInteractiveLogin";
 import { usePageTitle } from "../usePageTitle";
 import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { Config } from "../config/Config";
+import { Link } from "../button/Link";
 
 export const LoginPage: FC = () => {
   const { t } = useTranslation();

src/button/Button.tsx

@@ -16,6 +16,7 @@ import {
   EndCallIcon,
   ShareScreenSolidIcon,
   SettingsSolidIcon,
+  SwitchCameraSolidIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import styles from "./Button.module.css";
@@ -66,6 +67,23 @@ export const VideoButton: FC<VideoButtonProps> = ({ muted, ...props }) => {
   );
 };
 
+export const SwitchCameraButton: FC<ComponentPropsWithoutRef<"button">> = (
+  props,
+) => {
+  const { t } = useTranslation();
+
+  return (
+    <Tooltip label={t("switch_camera")}>
+      <CpdButton
+        iconOnly
+        Icon={SwitchCameraSolidIcon}
+        kind="secondary"
+        {...props}
+      />
+    </Tooltip>
+  );
+};
+
 interface ShareScreenButtonProps extends ComponentPropsWithoutRef<"button"> {
   enabled: boolean;
 }

src/button/ReactionToggleButton.module.css

@@ -0,0 +1,92 @@
+.raisedButton > svg {
+  color: var(--cpd-color-icon-on-solid-primary);
+}
+
+.reactionPopupMenu {
+  display: flex;
+}
+
+.reactionPopupMenuModal {
+  width: fit-content !important;
+  top: 82vh !important;
+}
+
+.reactionPopupMenuModal > div > div {
+  padding-inline: var(--cpd-space-6x) !important;
+  padding-block: var(--cpd-space-6x) var(--cpd-space-8x) !important;
+}
+
+.reactionPopupMenu menu {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cpd-separator-spacing);
+}
+
+.reactionPopupMenu section {
+  height: fit-content;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.reactionPopupMenuItem {
+  list-style: none;
+}
+
+.reactionsMenu {
+  min-height: 3em;
+}
+
+.reactionButton {
+  padding: 1em;
+  font-size: 1.6em;
+  width: 1.4em;
+  height: 1.4em;
+  border-radius: var(--cpd-radius-pill-effect);
+}
+
+@media (max-width: 800px) {
+  .reactionButton {
+    padding: 1em;
+    font-size: 1em;
+    width: 1em;
+    height: 1em;
+    min-block-size: unset;
+  }
+}
+
+.verticalSeperator {
+  background-color: var(--cpd-color-gray-800);
+  width: 1px;
+  height: auto;
+  margin-left: var(--cpd-separator-spacing);
+  margin-right: var(--cpd-separator-spacing);
+}
+
+.searchForm {
+  display: flex;
+  flex-direction: row;
+  gap: var(--cpd-separator-spacing);
+  margin-bottom: var(--cpd-space-3x);
+}
+
+.searchForm > label {
+  flex: auto;
+}
+
+.alert {
+  margin-bottom: var(--cpd-space-3x);
+  animation: grow-in 200ms;
+  height: 2.5em;
+}
+
+@keyframes grow-in {
+  from {
+    height: 0;
+  }
+
+  to {
+    height: 2.5em;
+  }
+}

src/button/ReactionToggleButton.test.tsx

@@ -0,0 +1,214 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { fireEvent, render } from "@testing-library/react";
+import { act } from "react";
+import { expect, test } from "vitest";
+import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc";
+import { TooltipProvider } from "@vector-im/compound-web";
+import { userEvent } from "@testing-library/user-event";
+import { ReactNode } from "react";
+
+import {
+  MockRoom,
+  MockRTCSession,
+  TestReactionsWrapper,
+} from "../utils/testReactions";
+import { ReactionToggleButton } from "./ReactionToggleButton";
+import { ElementCallReactionEventType } from "../reactions";
+
+const memberUserIdAlice = "@alice:example.org";
+const memberEventAlice = "$membership-alice:example.org";
+
+const membership: Record<string, string> = {
+  [memberEventAlice]: memberUserIdAlice,
+};
+
+function TestComponent({
+  rtcSession,
+  room,
+}: {
+  rtcSession: MockRTCSession;
+  room: MockRoom;
+}): ReactNode {
+  return (
+    <TooltipProvider>
+      <TestReactionsWrapper rtcSession={rtcSession}>
+        <ReactionToggleButton
+          rtcSession={rtcSession as unknown as MatrixRTCSession}
+          client={room.client}
+        />
+      </TestReactionsWrapper>
+    </TooltipProvider>
+  );
+}
+
+test("Can open menu", async () => {
+  const user = userEvent.setup();
+  const room = new MockRoom(memberUserIdAlice);
+  const rtcSession = new MockRTCSession(room, membership);
+  const { getByLabelText, container } = render(
+    <TestComponent rtcSession={rtcSession} room={room} />,
+  );
+  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
+  expect(container).toMatchSnapshot();
+});
+
+test("Can raise hand", async () => {
+  const user = userEvent.setup();
+  const room = new MockRoom(memberUserIdAlice);
+  const rtcSession = new MockRTCSession(room, membership);
+  const { getByLabelText, container } = render(
+    <TestComponent rtcSession={rtcSession} room={room} />,
+  );
+  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
+  await user.click(getByLabelText("action.raise_hand"));
+  expect(room.testSentEvents).toEqual([
+    [
+      undefined,
+      "m.reaction",
+      {
+        "m.relates_to": {
+          event_id: memberEventAlice,
+          key: "🖐️",
+          rel_type: "m.annotation",
+        },
+      },
+    ],
+  ]);
+  expect(container).toMatchSnapshot();
+});
+
+test("Can lower hand", async () => {
+  const user = userEvent.setup();
+  const room = new MockRoom(memberUserIdAlice);
+  const rtcSession = new MockRTCSession(room, membership);
+  const { getByLabelText, container } = render(
+    <TestComponent rtcSession={rtcSession} room={room} />,
+  );
+  const reactionEvent = room.testSendHandRaise(memberEventAlice, membership);
+  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
+  await user.click(getByLabelText("action.lower_hand"));
+  expect(room.testRedactedEvents).toEqual([[undefined, reactionEvent]]);
+  expect(container).toMatchSnapshot();
+});
+
+test("Can react with emoji", async () => {
+  const user = userEvent.setup();
+  const room = new MockRoom(memberUserIdAlice);
+  const rtcSession = new MockRTCSession(room, membership);
+  const { getByLabelText, getByText } = render(
+    <TestComponent rtcSession={rtcSession} room={room} />,
+  );
+  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
+  await user.click(getByText("🐶"));
+  expect(room.testSentEvents).toEqual([
+    [
+      undefined,
+      ElementCallReactionEventType,
+      {
+        "m.relates_to": {
+          event_id: memberEventAlice,
+          rel_type: "m.reference",
+        },
+        name: "dog",
+        emoji: "🐶",
+      },
+    ],
+  ]);
+});
+
+test("Can search for and send emoji", async () => {
+  const user = userEvent.setup();
+  const room = new MockRoom(memberUserIdAlice);
+  const rtcSession = new MockRTCSession(room, membership);
+  const { getByText, container, getByLabelText } = render(
+    <TestComponent rtcSession={rtcSession} room={room} />,
+  );
+  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
+  await user.click(getByLabelText("action.open_search"));
+  // Search should autofocus.
+  await user.keyboard("crickets");
+  expect(container).toMatchSnapshot();
+  await user.click(getByText("🦗"));
+
+  expect(room.testSentEvents).toEqual([
+    [
+      undefined,
+      ElementCallReactionEventType,
+      {
+        "m.relates_to": {
+          event_id: memberEventAlice,
+          rel_type: "m.reference",
+        },
+        name: "crickets",
+        emoji: "🦗",
+      },
+    ],
+  ]);
+});
+
+test("Can search for and send emoji with the keyboard", async () => {
+  const user = userEvent.setup();
+  const room = new MockRoom(memberUserIdAlice);
+  const rtcSession = new MockRTCSession(room, membership);
+  const { getByLabelText, getByPlaceholderText, container } = render(
+    <TestComponent rtcSession={rtcSession} room={room} />,
+  );
+  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
+  await user.click(getByLabelText("action.open_search"));
+  const searchField = getByPlaceholderText("reaction_search");
+  // Search should autofocus.
+  await user.keyboard("crickets");
+  expect(container).toMatchSnapshot();
+  act(() => {
+    fireEvent.keyDown(searchField, { key: "Enter" });
+  });
+  expect(room.testSentEvents).toEqual([
+    [
+      undefined,
+      ElementCallReactionEventType,
+      {
+        "m.relates_to": {
+          event_id: memberEventAlice,
+          rel_type: "m.reference",
+        },
+        name: "crickets",
+        emoji: "🦗",
+      },
+    ],
+  ]);
+});
+
+test("Can close search", async () => {
+  const user = userEvent.setup();
+  const room = new MockRoom(memberUserIdAlice);
+  const rtcSession = new MockRTCSession(room, membership);
+  const { getByLabelText, container } = render(
+    <TestComponent rtcSession={rtcSession} room={room} />,
+  );
+  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
+  await user.click(getByLabelText("action.open_search"));
+  await user.click(getByLabelText("action.close_search"));
+  expect(container).toMatchSnapshot();
+});
+
+test("Can close search with the escape key", async () => {
+  const user = userEvent.setup();
+  const room = new MockRoom(memberUserIdAlice);
+  const rtcSession = new MockRTCSession(room, membership);
+  const { getByLabelText, container, getByPlaceholderText } = render(
+    <TestComponent rtcSession={rtcSession} room={room} />,
+  );
+  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
+  await user.click(getByLabelText("action.open_search"));
+  const searchField = getByPlaceholderText("reaction_search");
+  act(() => {
+    fireEvent.keyDown(searchField, { key: "Escape" });
+  });
+  expect(container).toMatchSnapshot();
+});

src/button/ReactionToggleButton.tsx

@@ -0,0 +1,350 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import {
+  Button as CpdButton,
+  Tooltip,
+  Search,
+  Form,
+  Alert,
+} from "@vector-im/compound-web";
+import {
+  SearchIcon,
+  CloseIcon,
+  RaisedHandSolidIcon,
+  ReactionIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
+import {
+  ChangeEventHandler,
+  ComponentPropsWithoutRef,
+  FC,
+  KeyboardEventHandler,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { useTranslation } from "react-i18next";
+import { logger } from "matrix-js-sdk/src/logger";
+import { EventType, RelationType } from "matrix-js-sdk/src/matrix";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+import classNames from "classnames";
+
+import { useReactions } from "../useReactions";
+import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships";
+import styles from "./ReactionToggleButton.module.css";
+import {
+  ReactionOption,
+  ReactionSet,
+  ElementCallReactionEventType,
+} from "../reactions";
+import { Modal } from "../Modal";
+
+interface InnerButtonProps extends ComponentPropsWithoutRef<"button"> {
+  raised: boolean;
+  open: boolean;
+}
+
+const InnerButton: FC<InnerButtonProps> = ({ raised, open, ...props }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Tooltip label={t("action.raise_hand_or_send_reaction")}>
+      <CpdButton
+        className={classNames(raised && styles.raisedButton)}
+        aria-expanded={open}
+        aria-haspopup
+        aria-label={t("action.raise_hand_or_send_reaction")}
+        kind={raised || open ? "primary" : "secondary"}
+        iconOnly
+        Icon={raised ? RaisedHandSolidIcon : ReactionIcon}
+        {...props}
+      />
+    </Tooltip>
+  );
+};
+
+export function ReactionPopupMenu({
+  sendReaction,
+  toggleRaisedHand,
+  isHandRaised,
+  canReact,
+  errorText,
+}: {
+  sendReaction: (reaction: ReactionOption) => void;
+  toggleRaisedHand: () => void;
+  errorText?: string;
+  isHandRaised: boolean;
+  canReact: boolean;
+}): ReactNode {
+  const { t } = useTranslation();
+  const [searchText, setSearchText] = useState("");
+  const [isSearching, setIsSearching] = useState(false);
+  const onSearch = useCallback<ChangeEventHandler<HTMLInputElement>>((ev) => {
+    ev.preventDefault();
+    setSearchText(ev.target.value.trim().toLocaleLowerCase());
+  }, []);
+
+  const filteredReactionSet = useMemo(
+    () =>
+      ReactionSet.filter(
+        (reaction) =>
+          !isSearching ||
+          (!!searchText &&
+            (reaction.name.startsWith(searchText) ||
+              reaction.alias?.some((a) => a.startsWith(searchText)))),
+      ).slice(0, 6),
+    [searchText, isSearching],
+  );
+
+  const onSearchKeyDown = useCallback<KeyboardEventHandler<never>>(
+    (ev) => {
+      if (ev.key === "Enter") {
+        ev.preventDefault();
+        if (!canReact) {
+          return;
+        }
+        if (filteredReactionSet.length !== 1) {
+          return;
+        }
+        sendReaction(filteredReactionSet[0]);
+        setIsSearching(false);
+      } else if (ev.key === "Escape") {
+        ev.preventDefault();
+        setIsSearching(false);
+      }
+    },
+    [sendReaction, filteredReactionSet, canReact, setIsSearching],
+  );
+  const label = isHandRaised ? t("action.lower_hand") : t("action.raise_hand");
+  return (
+    <>
+      {errorText && (
+        <Alert
+          className={styles.alert}
+          type="critical"
+          title={t("common.something_went_wrong")}
+        >
+          {errorText}
+        </Alert>
+      )}
+      <div className={styles.reactionPopupMenu}>
+        <section className={styles.handRaiseSection}>
+          <Tooltip label={label}>
+            <CpdButton
+              kind={isHandRaised ? "primary" : "secondary"}
+              aria-pressed={isHandRaised}
+              aria-label={label}
+              onClick={() => toggleRaisedHand()}
+              iconOnly
+              Icon={RaisedHandSolidIcon}
+            />
+          </Tooltip>
+        </section>
+        <div className={styles.verticalSeperator} />
+        <section>
+          {isSearching ? (
+            <>
+              <Form.Root className={styles.searchForm}>
+                <Search
+                  required
+                  value={searchText}
+                  name="reactionSearch"
+                  placeholder={t("reaction_search")}
+                  onChange={onSearch}
+                  onKeyDown={onSearchKeyDown}
+                  // This is a reasonable use of autofocus, we are focusing when
+                  // the search button is clicked (which matches the Element Web reaction picker)
+                  // eslint-disable-next-line jsx-a11y/no-autofocus
+                  autoFocus
+                />
+                <CpdButton
+                  Icon={CloseIcon}
+                  aria-label={t("action.close_search")}
+                  size="sm"
+                  kind="destructive"
+                  onClick={() => setIsSearching(false)}
+                />
+              </Form.Root>
+            </>
+          ) : null}
+          <menu className={styles.reactionsMenu}>
+            {filteredReactionSet.map((reaction) => (
+              <li className={styles.reactionPopupMenuItem} key={reaction.name}>
+                <Tooltip label={reaction.name}>
+                  <CpdButton
+                    kind="secondary"
+                    className={styles.reactionButton}
+                    disabled={!canReact}
+                    onClick={() => sendReaction(reaction)}
+                  >
+                    {reaction.emoji}
+                  </CpdButton>
+                </Tooltip>
+              </li>
+            ))}
+          </menu>
+        </section>
+        {!isSearching ? (
+          <section style={{ marginLeft: "var(--cpd-separator-spacing)" }}>
+            <li key="search" className={styles.reactionPopupMenuItem}>
+              <Tooltip label={t("common.search")}>
+                <CpdButton
+                  iconOnly
+                  aria-label={t("action.open_search")}
+                  Icon={SearchIcon}
+                  kind="tertiary"
+                  onClick={() => setIsSearching(true)}
+                />
+              </Tooltip>
+            </li>
+          </section>
+        ) : null}
+      </div>
+    </>
+  );
+}
+
+interface ReactionToggleButtonProps extends ComponentPropsWithoutRef<"button"> {
+  rtcSession: MatrixRTCSession;
+  client: MatrixClient;
+}
+
+export function ReactionToggleButton({
+  client,
+  rtcSession,
+  ...props
+}: ReactionToggleButtonProps): ReactNode {
+  const { t } = useTranslation();
+  const { raisedHands, lowerHand, reactions } = useReactions();
+  const [busy, setBusy] = useState(false);
+  const userId = client.getUserId()!;
+  const isHandRaised = !!raisedHands[userId];
+  const memberships = useMatrixRTCSessionMemberships(rtcSession);
+  const [showReactionsMenu, setShowReactionsMenu] = useState(false);
+  const [errorText, setErrorText] = useState<string>();
+
+  useEffect(() => {
+    // Clear whenever the reactions menu state changes.
+    setErrorText(undefined);
+  }, [showReactionsMenu]);
+
+  const canReact = !reactions[userId];
+
+  const sendRelation = useCallback(
+    async (reaction: ReactionOption) => {
+      try {
+        const myMembership = memberships.find((m) => m.sender === userId);
+        if (!myMembership?.eventId) {
+          throw new Error("Cannot find own membership event");
+        }
+        const parentEventId = myMembership.eventId;
+        setBusy(true);
+        await client.sendEvent(
+          rtcSession.room.roomId,
+          ElementCallReactionEventType,
+          {
+            "m.relates_to": {
+              rel_type: RelationType.Reference,
+              event_id: parentEventId,
+            },
+            emoji: reaction.emoji,
+            name: reaction.name,
+          },
+        );
+        setErrorText(undefined);
+        setShowReactionsMenu(false);
+      } catch (ex) {
+        setErrorText(ex instanceof Error ? ex.message : "Unknown error");
+        logger.error("Failed to send reaction", ex);
+      } finally {
+        setBusy(false);
+      }
+    },
+    [memberships, client, userId, rtcSession],
+  );
+
+  const toggleRaisedHand = useCallback(() => {
+    const raiseHand = async (): Promise<void> => {
+      if (isHandRaised) {
+        try {
+          setBusy(true);
+          await lowerHand();
+          setShowReactionsMenu(false);
+        } finally {
+          setBusy(false);
+        }
+      } else {
+        try {
+          const myMembership = memberships.find((m) => m.sender === userId);
+          if (!myMembership?.eventId) {
+            throw new Error("Cannot find own membership event");
+          }
+          const parentEventId = myMembership.eventId;
+          setBusy(true);
+          const reaction = await client.sendEvent(
+            rtcSession.room.roomId,
+            EventType.Reaction,
+            {
+              "m.relates_to": {
+                rel_type: RelationType.Annotation,
+                event_id: parentEventId,
+                key: "🖐️",
+              },
+            },
+          );
+          logger.debug("Sent raise hand event", reaction.event_id);
+          setErrorText(undefined);
+          setShowReactionsMenu(false);
+        } catch (ex) {
+          setErrorText(ex instanceof Error ? ex.message : "Unknown error");
+          logger.error("Failed to raise hand", ex);
+        } finally {
+          setBusy(false);
+        }
+      }
+    };
+
+    void raiseHand();
+  }, [
+    client,
+    isHandRaised,
+    memberships,
+    lowerHand,
+    rtcSession.room.roomId,
+    userId,
+  ]);
+
+  return (
+    <>
+      <InnerButton
+        disabled={busy}
+        onClick={() => setShowReactionsMenu((show) => !show)}
+        raised={isHandRaised}
+        open={showReactionsMenu}
+        {...props}
+      />
+      <Modal
+        open={showReactionsMenu}
+        title={t("action.pick_reaction")}
+        hideHeader
+        classNameModal={styles.reactionPopupMenuModal}
+        onDismiss={() => setShowReactionsMenu(false)}
+      >
+        <ReactionPopupMenu
+          errorText={errorText}
+          isHandRaised={isHandRaised}
+          canReact={canReact}
+          sendReaction={(reaction) => void sendRelation(reaction)}
+          toggleRaisedHand={toggleRaisedHand}
+        />
+      </Modal>
+    </>
+  );
+}

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

@@ -0,0 +1,241 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Can close search 1`] = `
+<div
+  aria-hidden="true"
+  data-aria-hidden="true"
+>
+  <button
+    aria-disabled="false"
+    aria-expanded="true"
+    aria-haspopup="true"
+    aria-label="action.raise_hand_or_send_reaction"
+    aria-labelledby=":rec:"
+    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
+    data-kind="primary"
+    data-size="lg"
+    role="button"
+    tabindex="0"
+  >
+    <svg
+      aria-hidden="true"
+      fill="currentColor"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15.536 15.536a1 1 0 0 0-1.415-1.415 2.987 2.987 0 0 1-2.12.879 2.988 2.988 0 0 1-2.122-.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"
+      />
+      <path
+        d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
+exports[`Can close search with the escape key 1`] = `
+<div>
+  <button
+    aria-disabled="false"
+    aria-expanded="false"
+    aria-haspopup="true"
+    aria-label="action.raise_hand_or_send_reaction"
+    aria-labelledby=":rhh:"
+    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
+    data-kind="secondary"
+    data-size="lg"
+    role="button"
+    tabindex="0"
+  >
+    <svg
+      aria-hidden="true"
+      fill="currentColor"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15.536 15.536a1 1 0 0 0-1.415-1.415 2.987 2.987 0 0 1-2.12.879 2.988 2.988 0 0 1-2.122-.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"
+      />
+      <path
+        d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
+exports[`Can lower hand 1`] = `
+<div>
+  <button
+    aria-disabled="false"
+    aria-expanded="false"
+    aria-haspopup="true"
+    aria-label="action.raise_hand_or_send_reaction"
+    aria-labelledby=":r3i:"
+    class="_button_i91xf_17 raisedButton _has-icon_i91xf_66 _icon-only_i91xf_59"
+    data-kind="primary"
+    data-size="lg"
+    role="button"
+    tabindex="0"
+  >
+    <svg
+      aria-hidden="true"
+      fill="currentColor"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      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"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
+exports[`Can open menu 1`] = `
+<div
+  aria-hidden="true"
+  data-aria-hidden="true"
+>
+  <button
+    aria-disabled="false"
+    aria-expanded="true"
+    aria-haspopup="true"
+    aria-label="action.raise_hand_or_send_reaction"
+    aria-labelledby=":r0:"
+    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
+    data-kind="primary"
+    data-size="lg"
+    role="button"
+    tabindex="0"
+  >
+    <svg
+      aria-hidden="true"
+      fill="currentColor"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15.536 15.536a1 1 0 0 0-1.415-1.415 2.987 2.987 0 0 1-2.12.879 2.988 2.988 0 0 1-2.122-.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"
+      />
+      <path
+        d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
+exports[`Can raise hand 1`] = `
+<div>
+  <button
+    aria-disabled="false"
+    aria-expanded="false"
+    aria-haspopup="true"
+    aria-label="action.raise_hand_or_send_reaction"
+    aria-labelledby=":r1p:"
+    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
+    data-kind="secondary"
+    data-size="lg"
+    role="button"
+    tabindex="0"
+  >
+    <svg
+      aria-hidden="true"
+      fill="currentColor"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15.536 15.536a1 1 0 0 0-1.415-1.415 2.987 2.987 0 0 1-2.12.879 2.988 2.988 0 0 1-2.122-.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"
+      />
+      <path
+        d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
+exports[`Can search for and send emoji 1`] = `
+<div
+  aria-hidden="true"
+  data-aria-hidden="true"
+>
+  <button
+    aria-disabled="false"
+    aria-expanded="true"
+    aria-haspopup="true"
+    aria-label="action.raise_hand_or_send_reaction"
+    aria-labelledby=":r74:"
+    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
+    data-kind="primary"
+    data-size="lg"
+    role="button"
+    tabindex="0"
+  >
+    <svg
+      aria-hidden="true"
+      fill="currentColor"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15.536 15.536a1 1 0 0 0-1.415-1.415 2.987 2.987 0 0 1-2.12.879 2.988 2.988 0 0 1-2.122-.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"
+      />
+      <path
+        d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
+exports[`Can search for and send emoji with the keyboard 1`] = `
+<div
+  aria-hidden="true"
+  data-aria-hidden="true"
+>
+  <button
+    aria-disabled="false"
+    aria-expanded="true"
+    aria-haspopup="true"
+    aria-label="action.raise_hand_or_send_reaction"
+    aria-labelledby=":ra3:"
+    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
+    data-kind="primary"
+    data-size="lg"
+    role="button"
+    tabindex="0"
+  >
+    <svg
+      aria-hidden="true"
+      fill="currentColor"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15.536 15.536a1 1 0 0 0-1.415-1.415 2.987 2.987 0 0 1-2.12.879 2.988 2.988 0 0 1-2.122-.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"
+      />
+      <path
+        d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
+      />
+    </svg>
+  </button>
+</div>
+`;

src/button/index.ts

@@ -7,3 +7,4 @@ Please see LICENSE in the repository root for full details.
 
 export * from "./Button";
 export * from "./LinkButton";
+export * from "./ReactionToggleButton";

src/config/Config.ts

@@ -5,6 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
+import { merge } from "lodash-es";
+
 import { getUrlParams } from "../UrlParams";
 import {
   DEFAULT_CONFIG,
@@ -15,7 +17,7 @@ import {
 export class Config {
   private static internalInstance: Config | undefined;
 
-  public static get(): ConfigOptions {
+  public static get(): ResolvedConfigOptions {
     if (!this.internalInstance?.config)
       throw new Error("Config instance read before config got initialized");
     return this.internalInstance.config;
@@ -29,7 +31,7 @@ export class Config {
       Config.internalInstance.initPromise = downloadConfig(
         "../config.json",
       ).then((config) => {
-        internalInstance.config = { ...DEFAULT_CONFIG, ...config };
+        internalInstance.config = merge({}, DEFAULT_CONFIG, config);
       });
     }
     return Config.internalInstance.initPromise;

src/config/ConfigOptions.ts

@@ -77,6 +77,49 @@ export interface ConfigOptions {
    * A link to the end-user license agreement (EULA)
    */
   eula: string;
+
+  media_devices?: {
+    /**
+     * Defines whether participants should start with audio enabled by default.
+     */
+    enable_audio?: boolean;
+    /**
+     * Defines whether participants should start with video enabled by default.
+     */
+    enable_video?: boolean;
+  };
+
+  /**
+   * Whether upon entering a room, the user should be prompted to launch the
+   * native mobile app. (Affects only Android and iOS.)
+   *
+   * Note that this can additionally be disabled by the app's URL parameters.
+   */
+  app_prompt?: boolean;
+
+  /**
+   * These are low level options that are used to configure the MatrixRTC session.
+   * Take care when changing these options.
+   */
+  matrix_rtc_session?: {
+    /**
+     * How long (in milliseconds) to wait before rotating end-to-end media encryption keys
+     * when someone leaves a call.
+     */
+    key_rotation_on_leave_delay?: number;
+
+    /**
+     * How often (in milliseconds) keep-alive messages should be sent to the server for
+     * the MatrixRTC membership event.
+     */
+    membership_keep_alive_period?: number;
+
+    /**
+     * How long (in milliseconds) after the last keep-alive the server should expire the
+     * MatrixRTC membership event.
+     */
+    membership_server_side_expiry_timeout?: number;
+  };
 }
 
 // Overrides members from ConfigOptions that are always provided by the
@@ -88,6 +131,11 @@ export interface ResolvedConfigOptions extends ConfigOptions {
       server_name: string;
     };
   };
+  media_devices: {
+    enable_audio: boolean;
+    enable_video: boolean;
+  };
+  app_prompt: boolean;
 }
 
 export const DEFAULT_CONFIG: ResolvedConfigOptions = {
@@ -97,5 +145,13 @@ export const DEFAULT_CONFIG: ResolvedConfigOptions = {
       server_name: "localhost",
     },
   },
+  features: {
+    feature_use_device_session_member_events: true,
+  },
   eula: "https://static.element.io/legal/online-EULA.pdf",
+  media_devices: {
+    enable_audio: true,
+    enable_video: true,
+  },
+  app_prompt: true,
 };

src/e2ee/matrixKeyProvider.test.ts

@@ -0,0 +1,72 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { describe, expect, test, vi } from "vitest";
+import {
+  MatrixRTCSession,
+  MatrixRTCSessionEvent,
+} from "matrix-js-sdk/src/matrixrtc";
+import { KeyProviderEvent } from "livekit-client";
+
+import { MatrixKeyProvider } from "./matrixKeyProvider";
+
+function mockRTCSession(): MatrixRTCSession {
+  return {
+    on: vi.fn(),
+    off: vi.fn(),
+    reemitEncryptionKeys: vi.fn(),
+  } as unknown as MatrixRTCSession;
+}
+
+describe("matrixKeyProvider", () => {
+  test("initializes", () => {
+    const keyProvider = new MatrixKeyProvider();
+    expect(keyProvider).toBeTruthy();
+  });
+
+  test("listens for key requests and emits existing keys", () => {
+    const keyProvider = new MatrixKeyProvider();
+
+    const session = mockRTCSession();
+
+    keyProvider.setRTCSession(session);
+
+    expect(session.on).toHaveBeenCalledWith(
+      MatrixRTCSessionEvent.EncryptionKeyChanged,
+      expect.any(Function),
+    );
+    expect(session.off).not.toHaveBeenCalled();
+  });
+
+  test("stops listening when session changes", () => {
+    const keyProvider = new MatrixKeyProvider();
+
+    const session1 = mockRTCSession();
+    const session2 = mockRTCSession();
+
+    keyProvider.setRTCSession(session1);
+    expect(session1.off).not.toHaveBeenCalled();
+
+    keyProvider.setRTCSession(session2);
+    expect(session1.off).toHaveBeenCalledWith(
+      MatrixRTCSessionEvent.EncryptionKeyChanged,
+      expect.any(Function),
+    );
+  });
+
+  test("emits existing keys", () => {
+    const keyProvider = new MatrixKeyProvider();
+    const setKeyListener = vi.fn();
+    keyProvider.on(KeyProviderEvent.SetKey, setKeyListener);
+
+    const session = mockRTCSession();
+
+    keyProvider.setRTCSession(session);
+
+    expect(session.reemitEncryptionKeys).toHaveBeenCalled();
+  });
+});

src/e2ee/matrixKeyProvider.ts

@@ -16,7 +16,7 @@ export class MatrixKeyProvider extends BaseKeyProvider {
   private rtcSession?: MatrixRTCSession;
 
   public constructor() {
-    super({ ratchetWindowSize: 0 });
+    super({ ratchetWindowSize: 0, keyringSize: 256 });
   }
 
   public setRTCSession(rtcSession: MatrixRTCSession): void {
@@ -35,15 +35,8 @@ export class MatrixKeyProvider extends BaseKeyProvider {
     );
 
     // The new session could be aware of keys of which the old session wasn't,
-    // so emit a key changed event.
-    for (const [
-      participant,
-      encryptionKeys,
-    ] of this.rtcSession.getEncryptionKeys()) {
-      for (const [index, encryptionKey] of encryptionKeys.entries()) {
-        this.onEncryptionKeyChanged(encryptionKey, index, participant);
-      }
-    }
+    // so emit key changed events
+    this.rtcSession.reemitEncryptionKeys();
   }
 
   private onEncryptionKeyChanged = (

src/grid/CallLayout.ts

@@ -8,8 +8,8 @@ Please see LICENSE in the repository root for full details.
 import { BehaviorSubject, Observable } from "rxjs";
 import { ComponentType } from "react";
 
-import { MediaViewModel, UserMediaViewModel } from "../state/MediaViewModel";
 import { LayoutProps } from "./Grid";
+import { TileViewModel } from "../state/TileViewModel";
 
 export interface Bounds {
   width: number;
@@ -42,19 +42,6 @@ export interface CallLayoutInputs {
   pipAlignment: BehaviorSubject<Alignment>;
 }
 
-export interface GridTileModel {
-  type: "grid";
-  vm: UserMediaViewModel;
-}
-
-export interface SpotlightTileModel {
-  type: "spotlight";
-  vms: MediaViewModel[];
-  maximised: boolean;
-}
-
-export type TileModel = GridTileModel | SpotlightTileModel;
-
 export interface CallLayoutOutputs<Model> {
   /**
    * Whether the scrolling layer of the layout should appear on top.
@@ -63,11 +50,11 @@ export interface CallLayoutOutputs<Model> {
   /**
    * The visually fixed (non-scrolling) layer of the layout.
    */
-  fixed: ComponentType<LayoutProps<Model, TileModel, HTMLDivElement>>;
+  fixed: ComponentType<LayoutProps<Model, TileViewModel, HTMLDivElement>>;
   /**
    * The layer of the layout that can overflow and be scrolled.
    */
-  scrolling: ComponentType<LayoutProps<Model, TileModel, HTMLDivElement>>;
+  scrolling: ComponentType<LayoutProps<Model, TileViewModel, HTMLDivElement>>;
 }
 
 /**

src/grid/Grid.tsx

@@ -24,6 +24,7 @@ import {
   createContext,
   forwardRef,
   memo,
+  useCallback,
   useContext,
   useEffect,
   useMemo,
@@ -33,6 +34,8 @@ import {
 import useMeasure from "react-use-measure";
 import classNames from "classnames";
 import { logger } from "matrix-js-sdk/src/logger";
+import { useObservableEagerState } from "observable-hooks";
+import { fromEvent, map, startWith } from "rxjs";
 
 import styles from "./Grid.module.css";
 import { useMergedRefs } from "../useMergedRefs";
@@ -51,6 +54,7 @@ interface Tile<Model> {
   id: string;
   model: Model;
   onDrag: DragCallback | undefined;
+  setVisible: (visible: boolean) => void;
 }
 
 type PlacedTile<Model> = Tile<Model> & Rect;
@@ -84,6 +88,7 @@ interface SlotProps<Model> extends Omit<ComponentProps<"div">, "onDrag"> {
   id: string;
   model: Model;
   onDrag?: DragCallback;
+  onVisibilityChange?: (visible: boolean) => void;
   style?: CSSProperties;
   className?: string;
 }
@@ -131,6 +136,11 @@ export function useUpdateLayout(): void {
   );
 }
 
+const windowHeightObservable = fromEvent(window, "resize").pipe(
+  startWith(null),
+  map(() => window.innerHeight),
+);
+
 export interface LayoutProps<LayoutModel, TileModel, R extends HTMLElement> {
   ref: LegacyRef<R>;
   model: LayoutModel;
@@ -232,6 +242,7 @@ export function Grid<
   const [gridRoot, gridRef2] = useState<HTMLElement | null>(null);
   const gridRef = useMergedRefs<HTMLElement>(gridRef1, gridRef2);
 
+  const windowHeight = useObservableEagerState(windowHeightObservable);
   const [layoutRoot, setLayoutRoot] = useState<HTMLElement | null>(null);
   const [generation, setGeneration] = useState<number | null>(null);
   const tiles = useInitial(() => new Map<string, Tile<TileModel>>());
@@ -239,12 +250,34 @@ export function Grid<
 
   const Slot: FC<SlotProps<TileModel>> = useMemo(
     () =>
-      function Slot({ id, model, onDrag, style, className, ...props }) {
+      function Slot({
+        id,
+        model,
+        onDrag,
+        onVisibilityChange,
+        style,
+        className,
+        ...props
+      }) {
         const ref = useRef<HTMLDivElement | null>(null);
+        const prevVisible = useRef<boolean | null>(null);
+        const setVisible = useCallback(
+          (visible: boolean) => {
+            if (
+              onVisibilityChange !== undefined &&
+              visible !== prevVisible.current
+            ) {
+              onVisibilityChange(visible);
+              prevVisible.current = visible;
+            }
+          },
+          [onVisibilityChange],
+        );
+
         useEffect(() => {
-          tiles.set(id, { id, model, onDrag });
+          tiles.set(id, { id, model, onDrag, setVisible });
           return (): void => void tiles.delete(id);
-        }, [id, model, onDrag]);
+        }, [id, model, onDrag, setVisible]);
 
         return (
           <div
@@ -302,6 +335,17 @@ export function Grid<
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [gridRoot, layoutRoot, tiles, gridBounds, generation]);
 
+  // The height of the portion of the grid visible at any given time
+  const visibleHeight = useMemo(
+    () => Math.min(gridBounds.bottom, windowHeight) - gridBounds.top,
+    [gridBounds, windowHeight],
+  );
+
+  useEffect(() => {
+    for (const tile of placedTiles)
+      tile.setVisible(tile.y + tile.height <= visibleHeight);
+  }, [placedTiles, visibleHeight]);
+
   // Drag state is stored in a ref rather than component state, because we use
   // react-spring's imperative API during gestures to improve responsiveness
   const dragState = useRef<DragState | null>(null);

src/grid/GridLayout.tsx

@@ -12,12 +12,7 @@ import { useObservableEagerState } from "observable-hooks";
 import { GridLayout as GridLayoutModel } from "../state/CallViewModel";
 import styles from "./GridLayout.module.css";
 import { useInitial } from "../useInitial";
-import {
-  CallLayout,
-  GridTileModel,
-  TileModel,
-  arrangeTiles,
-} from "./CallLayout";
+import { CallLayout, arrangeTiles } from "./CallLayout";
 import { DragCallback, useUpdateLayout } from "./Grid";
 
 interface GridCSSProperties extends CSSProperties {
@@ -49,15 +44,6 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
         ),
       ),
     );
-    const tileModel: TileModel | undefined = useMemo(
-      () =>
-        model.spotlight && {
-          type: "spotlight",
-          vms: model.spotlight,
-          maximised: false,
-        },
-      [model.spotlight],
-    );
 
     const onDragSpotlight: DragCallback = useCallback(
       ({ xRatio, yRatio }) =>
@@ -70,11 +56,11 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
 
     return (
       <div ref={ref} className={styles.fixed}>
-        {tileModel && (
+        {model.spotlight && (
           <Slot
             className={styles.slot}
             id="spotlight"
-            model={tileModel}
+            model={model.spotlight}
             onDrag={onDragSpotlight}
             data-block-alignment={alignment.block}
             data-inline-alignment={alignment.inline}
@@ -93,11 +79,6 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
       [width, minHeight, model.grid.length],
     );
 
-    const tileModels: GridTileModel[] = useMemo(
-      () => model.grid.map((vm) => ({ type: "grid", vm })),
-      [model.grid],
-    );
-
     return (
       <div
         ref={ref}
@@ -111,8 +92,14 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
           } as GridCSSProperties
         }
       >
-        {tileModels.map((m) => (
-          <Slot key={m.vm.id} className={styles.slot} id={m.vm.id} model={m} />
+        {model.grid.map((m) => (
+          <Slot
+            key={m.id}
+            className={styles.slot}
+            id={m.id}
+            model={m}
+            onVisibilityChange={m.setVisible}
+          />
         ))}
       </div>
     );

src/grid/OneOnOneLayout.tsx

@@ -10,7 +10,7 @@ import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
 import { OneOnOneLayout as OneOnOneLayoutModel } from "../state/CallViewModel";
-import { CallLayout, GridTileModel, arrangeTiles } from "./CallLayout";
+import { CallLayout, arrangeTiles } from "./CallLayout";
 import styles from "./OneOnOneLayout.module.css";
 import { DragCallback, useUpdateLayout } from "./Grid";
 
@@ -38,15 +38,6 @@ export const makeOneOnOneLayout: CallLayout<OneOnOneLayoutModel> = ({
       [width, height],
     );
 
-    const remoteTileModel: GridTileModel = useMemo(
-      () => ({ type: "grid", vm: model.remote }),
-      [model.remote],
-    );
-    const localTileModel: GridTileModel = useMemo(
-      () => ({ type: "grid", vm: model.local }),
-      [model.local],
-    );
-
     const onDragLocalTile: DragCallback = useCallback(
       ({ xRatio, yRatio }) =>
         pipAlignment.next({
@@ -59,16 +50,18 @@ export const makeOneOnOneLayout: CallLayout<OneOnOneLayoutModel> = ({
     return (
       <div ref={ref} className={styles.layer}>
         <Slot
-          id={remoteTileModel.vm.id}
-          model={remoteTileModel}
+          id={model.remote.id}
+          model={model.remote}
+          onVisibilityChange={model.remote.setVisible}
           className={styles.container}
           style={{ width: tileWidth, height: tileHeight }}
         >
           <Slot
             className={classNames(styles.slot, styles.local)}
-            id={localTileModel.vm.id}
-            model={localTileModel}
+            id={model.local.id}
+            model={model.local}
             onDrag={onDragLocalTile}
+            onVisibilityChange={model.local.setVisible}
             data-block-alignment={pipAlignmentValue.block}
             data-inline-alignment={pipAlignmentValue.inline}
           />

src/grid/SpotlightExpandedLayout.tsx

@@ -5,11 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { forwardRef, useCallback, useMemo } from "react";
+import { forwardRef, useCallback } from "react";
 import { useObservableEagerState } from "observable-hooks";
 
 import { SpotlightExpandedLayout as SpotlightExpandedLayoutModel } from "../state/CallViewModel";
-import { CallLayout, GridTileModel, SpotlightTileModel } from "./CallLayout";
+import { CallLayout } from "./CallLayout";
 import { DragCallback, useUpdateLayout } from "./Grid";
 import styles from "./SpotlightExpandedLayout.module.css";
 
@@ -27,17 +27,13 @@ export const makeSpotlightExpandedLayout: CallLayout<
     ref,
   ) {
     useUpdateLayout();
-    const spotlightTileModel: SpotlightTileModel = useMemo(
-      () => ({ type: "spotlight", vms: model.spotlight, maximised: true }),
-      [model.spotlight],
-    );
 
     return (
       <div ref={ref} className={styles.layer}>
         <Slot
           className={styles.spotlight}
           id="spotlight"
-          model={spotlightTileModel}
+          model={model.spotlight}
         />
       </div>
     );
@@ -50,11 +46,6 @@ export const makeSpotlightExpandedLayout: CallLayout<
     useUpdateLayout();
     const pipAlignmentValue = useObservableEagerState(pipAlignment);
 
-    const pipTileModel: GridTileModel | undefined = useMemo(
-      () => model.pip && { type: "grid", vm: model.pip },
-      [model.pip],
-    );
-
     const onDragPip: DragCallback = useCallback(
       ({ xRatio, yRatio }) =>
         pipAlignment.next({
@@ -66,12 +57,13 @@ export const makeSpotlightExpandedLayout: CallLayout<
 
     return (
       <div ref={ref} className={styles.layer}>
-        {pipTileModel && (
+        {model.pip && (
           <Slot
             className={styles.pip}
-            id="pip"
-            model={pipTileModel}
+            id={model.pip.id}
+            model={model.pip}
             onDrag={onDragPip}
+            onVisibilityChange={model.pip.setVisible}
             data-block-alignment={pipAlignmentValue.block}
             data-inline-alignment={pipAlignmentValue.inline}
           />

src/grid/SpotlightLandscapeLayout.tsx

@@ -5,11 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { forwardRef, useMemo } from "react";
+import { forwardRef } from "react";
 import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
-import { CallLayout, GridTileModel, TileModel } from "./CallLayout";
+import { CallLayout } from "./CallLayout";
 import { SpotlightLandscapeLayout as SpotlightLandscapeLayoutModel } from "../state/CallViewModel";
 import styles from "./SpotlightLandscapeLayout.module.css";
 import { useUpdateLayout } from "./Grid";
@@ -30,19 +30,15 @@ export const makeSpotlightLandscapeLayout: CallLayout<
   ) {
     useUpdateLayout();
     useObservableEagerState(minBounds);
-    const tileModel: TileModel = useMemo(
-      () => ({
-        type: "spotlight",
-        vms: model.spotlight,
-        maximised: false,
-      }),
-      [model.spotlight],
-    );
 
     return (
       <div ref={ref} className={styles.layer}>
         <div className={styles.spotlight}>
-          <Slot className={styles.slot} id="spotlight" model={tileModel} />
+          <Slot
+            className={styles.slot}
+            id="spotlight"
+            model={model.spotlight}
+          />
         </div>
         <div className={styles.grid} />
       </div>
@@ -55,25 +51,24 @@ export const makeSpotlightLandscapeLayout: CallLayout<
   ) {
     useUpdateLayout();
     useObservableEagerState(minBounds);
-    const tileModels: GridTileModel[] = useMemo(
-      () => model.grid.map((vm) => ({ type: "grid", vm })),
-      [model.grid],
-    );
+    const withIndicators =
+      useObservableEagerState(model.spotlight.media).length > 1;
 
     return (
       <div ref={ref} className={styles.layer}>
         <div
           className={classNames(styles.spotlight, {
-            [styles.withIndicators]: model.spotlight.length > 1,
+            [styles.withIndicators]: withIndicators,
           })}
         />
         <div className={styles.grid}>
-          {tileModels.map((m) => (
+          {model.grid.map((m) => (
             <Slot
-              key={m.vm.id}
+              key={m.id}
               className={styles.slot}
-              id={m.vm.id}
+              id={m.id}
               model={m}
+              onVisibilityChange={m.setVisible}
             />
           ))}
         </div>

src/grid/SpotlightPortraitLayout.tsx

@@ -5,16 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { CSSProperties, forwardRef, useMemo } from "react";
+import { CSSProperties, forwardRef } from "react";
 import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
-import {
-  CallLayout,
-  GridTileModel,
-  TileModel,
-  arrangeTiles,
-} from "./CallLayout";
+import { CallLayout, arrangeTiles } from "./CallLayout";
 import { SpotlightPortraitLayout as SpotlightPortraitLayoutModel } from "../state/CallViewModel";
 import styles from "./SpotlightPortraitLayout.module.css";
 import { useUpdateLayout } from "./Grid";
@@ -40,19 +35,15 @@ export const makeSpotlightPortraitLayout: CallLayout<
     ref,
   ) {
     useUpdateLayout();
-    const tileModel: TileModel = useMemo(
-      () => ({
-        type: "spotlight",
-        vms: model.spotlight,
-        maximised: true,
-      }),
-      [model.spotlight],
-    );
 
     return (
       <div ref={ref} className={styles.layer}>
         <div className={styles.spotlight}>
-          <Slot className={styles.slot} id="spotlight" model={tileModel} />
+          <Slot
+            className={styles.slot}
+            id="spotlight"
+            model={model.spotlight}
+          />
         </div>
       </div>
     );
@@ -71,10 +62,8 @@ export const makeSpotlightPortraitLayout: CallLayout<
       width,
       model.grid.length,
     );
-    const tileModels: GridTileModel[] = useMemo(
-      () => model.grid.map((vm) => ({ type: "grid", vm })),
-      [model.grid],
-    );
+    const withIndicators =
+      useObservableEagerState(model.spotlight.media).length > 1;
 
     return (
       <div
@@ -90,16 +79,17 @@ export const makeSpotlightPortraitLayout: CallLayout<
       >
         <div
           className={classNames(styles.spotlight, {
-            [styles.withIndicators]: model.spotlight.length > 1,
+            [styles.withIndicators]: withIndicators,
           })}
         />
         <div className={styles.grid}>
-          {tileModels.map((m) => (
+          {model.grid.map((m) => (
             <Slot
-              key={m.vm.id}
+              key={m.id}
               className={styles.slot}
-              id={m.vm.id}
+              id={m.id}
               model={m}
+              onVisibilityChange={m.setVisible}
             />
           ))}
         </div>

src/index.css

@@ -5,14 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-/* Inter unexpectedly contains various codepoints which collide with emoji, even
-   when variation-16 is applied to request the emoji variant.  From eyeballing
-   the emoji picker, these are: 20e3, 23cf, 24c2, 25a0-25c1, 2665, 2764, 2b06, 2b1c.
-   Therefore we define a unicode-range to load which excludes the glyphs
-   (to avoid having to maintain a fork of Inter). */
-
 @layer normalize, compound-legacy, compound;
 
+@import url("@fontsource/inter/400.css");
+@import url("@fontsource/inter/500.css");
+@import url("@fontsource/inter/600.css");
+@import url("@fontsource/inter/700.css");
+@import url("@fontsource/inconsolata/400.css");
+@import url("@fontsource/inconsolata/700.css");
+
 @import url("normalize.css/normalize.css") layer(normalize);
 @import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css")
 layer(compound);
@@ -52,94 +53,6 @@ layer(compound);
   --stopgap-background-85: rgba(16, 19, 23, 0.85);
 }
 
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  unicode-range: var(--inter-unicode-range);
-  src:
-    url("/fonts/Inter/Inter-Regular.woff2") format("woff2"),
-    url("/fonts/Inter/Inter-Regular.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Inter";
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  unicode-range: var(--inter-unicode-range);
-  src:
-    url("/fonts/Inter/Inter-Italic.woff2") format("woff2"),
-    url("/fonts/Inter/Inter-Italic.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  unicode-range: var(--inter-unicode-range);
-  src:
-    url("/fonts/Inter/Inter-Medium.woff2") format("woff2"),
-    url("/fonts/Inter/Inter-Medium.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Inter";
-  font-style: italic;
-  font-weight: 500;
-  font-display: swap;
-  unicode-range: var(--inter-unicode-range);
-  src:
-    url("/fonts/Inter/Inter-MediumItalic.woff2") format("woff2"),
-    url("/fonts/Inter/Inter-MediumItalic.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  unicode-range: var(--inter-unicode-range);
-  src:
-    url("/fonts/Inter/Inter-SemiBold.woff2") format("woff2"),
-    url("/fonts/Inter/Inter-SemiBold.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Inter";
-  font-style: italic;
-  font-weight: 600;
-  font-display: swap;
-  unicode-range: var(--inter-unicode-range);
-  src:
-    url("/fonts/Inter/Inter-SemiBoldItalic.woff2") format("woff2"),
-    url("/fonts/Inter/Inter-SemiBoldItalic.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  unicode-range: var(--inter-unicode-range);
-  src:
-    url("/fonts/Inter/Inter-Bold.woff2") format("woff2"),
-    url("/fonts/Inter/Inter-Bold.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Inter";
-  font-style: italic;
-  font-weight: 700;
-  font-display: swap;
-  unicode-range: var(--inter-unicode-range);
-  src:
-    url("/fonts/Inter/Inter-BoldItalic.woff2") format("woff2"),
-    url("/fonts/Inter/Inter-BoldItalic.woff") format("woff");
-}
-
 body {
   background-color: var(--cpd-color-bg-canvas-default);
   background-size: calc(max(1440px, 100vw)) calc(max(800px, 100vh));
@@ -185,10 +98,6 @@ body[data-platform="ios"] {
   --cpd-font-family-sans: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
 }
 
-body[data-platform="desktop"] {
-  --cpd-font-family-sans: "Inter", sans-serif;
-}
-
 @layer compound-legacy {
   h1,
   h2,

src/initializer.test.ts

@@ -9,9 +9,9 @@ import { expect, test } from "vitest";
 
 import { Initializer } from "../src/initializer";
 
-test("initBeforeReact sets font family from URL param", () => {
+test("initBeforeReact sets font family from URL param", async () => {
   window.location.hash = "#?font=DejaVu Sans";
-  Initializer.initBeforeReact();
+  await Initializer.initBeforeReact();
   expect(
     getComputedStyle(document.documentElement).getPropertyValue(
       "--font-family",
@@ -19,9 +19,9 @@ test("initBeforeReact sets font family from URL param", () => {
   ).toBe('"DejaVu Sans"');
 });
 
-test("initBeforeReact sets font scale from URL param", () => {
+test("initBeforeReact sets font scale from URL param", async () => {
   window.location.hash = "#?fontScale=1.2";
-  Initializer.initBeforeReact();
+  await Initializer.initBeforeReact();
   expect(
     getComputedStyle(document.documentElement).getPropertyValue("--font-scale"),
   ).toBe("1.2");

src/initializer.tsx

@@ -11,6 +11,8 @@ import LanguageDetector from "i18next-browser-languagedetector";
 import Backend from "i18next-http-backend";
 import * as Sentry from "@sentry/react";
 import { logger } from "matrix-js-sdk/src/logger";
+import { shouldPolyfill as shouldPolyfillSegmenter } from "@formatjs/intl-segmenter/should-polyfill";
+import { shouldPolyfill as shouldPolyfillDurationFormat } from "@formatjs/intl-durationformat/should-polyfill";
 
 import { getUrlParams } from "./UrlParams";
 import { Config } from "./config/Config";
@@ -41,10 +43,17 @@ export class Initializer {
     return Initializer.internalInstance?.isInitialized;
   }
 
-  public static initBeforeReact(): void {
-    // this maybe also needs to return a promise in the future,
-    // if we have to do async inits before showing the loading screen
-    // but this should be avoided if possible
+  public static async initBeforeReact(): Promise<void> {
+    const polyfills: Promise<unknown>[] = [];
+    if (shouldPolyfillSegmenter()) {
+      polyfills.push(import("@formatjs/intl-segmenter/polyfill-force"));
+    }
+
+    if (shouldPolyfillDurationFormat()) {
+      polyfills.push(import("@formatjs/intl-durationformat/polyfill-force"));
+    }
+
+    await Promise.all(polyfills);
 
     //i18n
     const languageDetector = new LanguageDetector();
@@ -54,7 +63,7 @@ export class Initializer {
       lookup: () => getUrlParams().lang ?? undefined,
     });
 
-    i18n
+    await i18n
       .use(Backend)
       .use(languageDetector)
       .use(initReactI18next)
@@ -74,9 +83,6 @@ export class Initializer {
           order: ["urlFragment", "navigator"],
           caches: [],
         },
-      })
-      .catch((e) => {
-        logger.error("Failed to initialize i18n", e);
       });
 
     // Custom Themeing

src/livekit/MediaDevicesContext.tsx

@@ -97,7 +97,11 @@ function useMediaDevice(
     }
 
     return {
-      available: available ?? [],
+      available: available
+        ? // Sometimes browsers (particularly Firefox) can return multiple
+          // device entries for the exact same device ID; deduplicate them
+          [...new Map(available.map((d) => [d.deviceId, d])).values()]
+        : [],
       selectedId: alwaysDefault ? undefined : devId,
       select,
     };

src/main.tsx

@@ -55,12 +55,17 @@ if (fatalError !== null) {
   throw fatalError; // Stop the app early
 }
 
-Initializer.initBeforeReact();
+Initializer.initBeforeReact()
+  .then(() => {
+    const history = createBrowserHistory();
 
-const history = createBrowserHistory();
-
-root.render(
-  <StrictMode>
-    <App history={history} />
-  </StrictMode>,
-);
+    root.render(
+      <StrictMode>
+        <App history={history} />
+      </StrictMode>,
+    );
+  })
+  .catch((e) => {
+    logger.error("Failed to initialize app", e);
+    root.render(e.message);
+  });

src/reactions/RaisedHandIndicator.test.tsx

@@ -0,0 +1,55 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { describe, expect, test } from "vitest";
+import { render, configure } from "@testing-library/react";
+
+import { RaisedHandIndicator } from "./RaisedHandIndicator";
+
+configure({
+  defaultHidden: true,
+});
+
+describe("RaisedHandIndicator", () => {
+  test("renders nothing when no hand has been raised", () => {
+    const { container } = render(<RaisedHandIndicator />);
+    expect(container.firstChild).toBeNull();
+  });
+  test("renders an indicator when a hand has been raised", () => {
+    const dateTime = new Date();
+    const { container } = render(
+      <RaisedHandIndicator raisedHandTime={dateTime} showTimer />,
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+  test("renders an indicator when a hand has been raised with the expected time", () => {
+    const dateTime = new Date(new Date().getTime() - 60000);
+    const { container } = render(
+      <RaisedHandIndicator raisedHandTime={dateTime} showTimer />,
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+  test("renders a smaller indicator when miniature is specified", () => {
+    const dateTime = new Date();
+    const { container } = render(
+      <RaisedHandIndicator raisedHandTime={dateTime} miniature showTimer />,
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+  test("can be clicked", () => {
+    const dateTime = new Date();
+    let wasClicked = false;
+    const { getByRole } = render(
+      <RaisedHandIndicator
+        raisedHandTime={dateTime}
+        onClick={() => (wasClicked = true)}
+      />,
+    );
+    getByRole("button").click();
+    expect(wasClicked).toBe(true);
+  });
+});