Merge pull request #3056 from element-hq/robin/backport-join-action

Backport "Send a 'join' action when entering the call" to v0.7

.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",
@@ -36,6 +37,7 @@ module.exports = {
     "@typescript-eslint/promise-function-async": "error",
     "@typescript-eslint/require-await": "error",
     "@typescript-eslint/await-thenable": "error",
+    "rxjs/no-exposed-subjects": "error",
   },
   settings: {
     react: {

.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/element-call.yaml

@@ -14,6 +14,8 @@ on:
         required: true
       SENTRY_AUTH_TOKEN:
         required: true
+      CODECOV_TOKEN:
+        required: false
 
 jobs:
   build:
@@ -36,6 +38,7 @@ 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

.github/workflows/translations-download.yaml

@@ -24,7 +24,7 @@ jobs:
         run: "yarn install --frozen-lockfile"
 
       - name: Prune i18n
-        run: "rm -R public/locales"
+        run: "rm -R locales"
 
       - name: Download translation files
         uses: localazy/download@0a79880fb66150601e3b43606fab69c88123c087 # v1.1.0
@@ -32,7 +32,7 @@ jobs:
           groups: "-p includeSourceLang:true"
 
       - name: Fix the owner of the downloaded files
-        run: "sudo chown runner:docker -R public/locales"
+        run: "sudo chown runner:docker -R locales"
 
       - name: Prettier
         run: yarn prettier:format

.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://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.
+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 `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 `locales/en-GB/app.json` file with
+   the English translation:
+
+```jsonc
    {
        ...
        "some_new_key": "Some new key",
        ...
    }
-   ```
+```
 
 ## Documentation
 

backend-docker-compose.yml

@@ -1,52 +0,0 @@
-version: "3.9"
-
-networks:
-  lkbackend:
-
-services:
-  auth-service:
-    image: ghcr.io/element-hq/lk-jwt-service:latest-ci
-    hostname: auth-server
-    # Use host network in case the configured homeserver runs on localhost
-    network_mode: host
-    environment:
-      - LK_JWT_PORT=8881
-      - 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
-    networks:
-      - lkbackend
-
-  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…)
-    network_mode: host
-    # ports:
-    #   - "7880:7880/tcp"
-    #   - "7881:7881/tcp"
-    #   - "7882:7882/tcp"
-    #   - "50100-50200:50100-50200/udp"
-    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;
+
+}

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,17 @@ server {
     server_name  localhost;
 
     root   /app;
+    gzip_static on;
+    gzip_vary 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 "public, max-age=30, stale-while-revalidate=30";
     }
 
     # 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

@@ -25,230 +25,38 @@ There are two formats for Element Call urls.
   ```
 
   With this format the livekit alias that will be used is the `<room_name>`.
-  All ppl connecting to this url will end up in the same unencrypted room.
+  All people connecting to this URL will end up in the same unencrypted room.
   This does not scale, is super unsecure
-  (ppl could end up in the same room by accident) and it also is not really
+  (people could end up in the same room by accident) and it also is not really
   possible to support encryption.
-  The url parameters are spit into two categories: **general** and **widget related**.
 
-## Widget related params
+## Parameters
 
-**widgetId**
-The id used by the widget. The presence of this parameter implies that element
-call will not connect to a homeserver directly and instead tries to establish
-postMessage communication via the `parentUrl`.
-
-```ts
-widgetId: string | null;
-```
-
-**parentUrl**
-The url used to send widget action postMessages. This should be the domain of
-the client or the webview the widget is hosted in. (in case the widget is not
-in an Iframe but in a dedicated webview we send the postMessages same webview
-the widget lives in. Filtering is done in the widget so it ignores the messages
-it receives from itself)
-
-```ts
-parentUrl: string | null;
-```
-
-**userId**
-The user's ID (only used in matryoshka mode).
-
-```ts
-userId: string | null;
-```
-
-**deviceId**
-The device's ID (only used in matryoshka mode).
-
-```ts
-deviceId: string | null;
-```
-
-**baseUrl**
-The base URL of the homeserver to use for media lookups in matryoshka mode.
-
-```ts
-baseUrl: string | null;
-```
-
-### General url parameters
-
-**roomId**
-Anything about what room we're pointed to should be from useRoomIdentifier which
-parses the path and resolves alias with respect to the default server name, however
-roomId is an exception as we need the room ID in embedded (matroyska) mode, and not
-the room alias (or even the via params because we are not trying to join it). This
-is also not validated, where it is in useRoomIdentifier().
-
-```ts
-roomId: string | null;
-```
-
-**confineToRoom**
-Whether the app should keep the user confined to the current call/room.
-
-```ts
-confineToRoom: boolean; (default: false)
-```
-
-**appPrompt**
-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)
-```
-
-**preload**
-Whether the app should pause before joining the call until it sees an
-io.element.join widget action, allowing it to be preloaded.
-
-```ts
-preload: boolean; (default: false)
-```
-
-**hideHeader**
-Whether to hide the room header when in a call.
-
-```ts
-hideHeader: boolean; (default: false)
-```
-
-**showControls**
-Whether to show the buttons to mute, screen-share, invite, hangup are shown
-when in a call.
-
-```ts
-showControls: boolean; (default: true)
-```
-
-**hideScreensharing**
-Whether to hide the screen-sharing button.
-
-```ts
-hideScreensharing: boolean; (default: false)
-```
-
-**enableE2EE** (Deprecated)
-Whether to use end-to-end encryption. This is a legacy flag for the full mesh branch.
-It is not used on the livekit branch and has no impact there!
-
-```ts
-enableE2EE: boolean; (default: true)
-```
-
-**perParticipantE2EE**
-Whether to use per participant encryption.
-Keys will be exchanged over encrypted matrix room messages.
-
-```ts
-perParticipantE2EE: boolean; (default: false)
-```
-
-**password**
-E2EE password when using a shared secret.
-(For individual sender keys in embedded mode this is not required.)
-
-```ts
-password: string | null;
-```
-
-**displayName**
-The display name to use for auto-registration.
-
-```ts
-displayName: string | null;
-```
-
-**lang**
-The BCP 47 code of the language the app should use.
-
-```ts
-lang: string | null;
-```
-
-**fonts**
-The font/fonts which the interface should use.
-There can be multiple font url parameters: `?font=font-one&font=font-two...`
-
-```ts
-font: string;
-font: string;
-...
-```
-
-**fontScale**
-The factor by which to scale the interface's font size.
-
-```ts
-fontScale: number | null;
-```
-
-**analyticsID**
-The Posthog analytics ID. It is only available if the user has given consent for
-sharing telemetry in element web.
-
-```ts
-analyticsID: string | null;
-```
-
-**allowIceFallback**
-Whether the app is allowed to use fallback STUN servers for ICE in case the
-user's homeserver doesn't provide any.
-
-```ts
-allowIceFallback: boolean; (default: false)
-```
-
-**skipLobby**
-Setting this flag skips the lobby and brings you in the call directly.
-In the widget this can be combined with preload to pass the device settings
-with the join widget action.
-
-```ts
-skipLobby: boolean; (default: false)
-```
-
-**returnToLobby**
-Setting this flag makes element call show the lobby in widget mode after leaving
-a call.
-This is useful for video rooms.
-If set to false, the widget will show a blank page after leaving the call.
-
-```ts
-returnToLobby: boolean; (default: false)
-```
-
-**theme**
-The theme to use for element call.
-can be "light", "dark", "light-high-contrast" or "dark-high-contrast".
-If not set element call will use the dark theme.
-
-```ts
-theme: string | null;
-```
-
-**viaServers**
-This defines the homeserver that is going to be used when joining a room.
-It has to be set to a non default value for links to rooms
-that are not on the default homeserver,
-that is in use for the current user.
-
-```ts
-viaServers: string; (default: undefined)
-```
-
-**homeserver**
-This defines the homeserver that is going to be used when registering
-a new (guest) user.
-This can be user to configure a non default guest user server when
-creating a spa link.
-
-```ts
-homeserver: string; (default: undefined)
-```
+| Name                      | Values                                                                                               | Required for widget     | Required for SPA        | Description                                                                                                                                                                                                                                                                                                                                                                                         |
+| ------------------------- | ---------------------------------------------------------------------------------------------------- | ----------------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `allowIceFallback`        | `true` or `false`                                                                                    | No, defaults to `false` | No, defaults to `false` | Allows use of fallback STUN servers for ICE if the user's homeserver doesn’t provide any.                                                                                                                                                                                                                                                                                                           |
+| `analyticsID`             | Posthog analytics ID                                                                                 | No                      | No                      | Available only with user's consent for sharing telemetry in Element Web.                                                                                                                                                                                                                                                                                                                            |
+| `appPrompt`               | `true` or `false`                                                                                    | No, defaults to `true`  | No, defaults to `true`  | Prompts the user to launch the native mobile app upon entering a room, applicable only on Android and iOS, and must be enabled in config.                                                                                                                                                                                                                                                           |
+| `baseUrl`                 |                                                                                                      | Yes                     | Not applicable          | The base URL of the homeserver to use for media lookups.                                                                                                                                                                                                                                                                                                                                            |
+| `confineToRoom`           | `true` or `false`                                                                                    | No, defaults to `false` | No, defaults to `false` | Keeps the user confined to the current call/room.                                                                                                                                                                                                                                                                                                                                                   |
+| `deviceId`                | Matrix device ID                                                                                     | Yes                     | Not applicable          | The Matrix device ID for the widget host.                                                                                                                                                                                                                                                                                                                                                           |
+| `displayName`             |                                                                                                      | No                      | No                      | Display name used for auto-registration.                                                                                                                                                                                                                                                                                                                                                            |
+| `enableE2EE` (deprecated) | `true` or `false`                                                                                    | No, defaults to `true`  | No, defaults to `true`  | Legacy flag to enable end-to-end encryption, not used in the `livekit` branch.                                                                                                                                                                                                                                                                                                                      |
+| `fontScale`               | A decimal number such as `0.9`                                                                       | No                      | No                      | Factor by which to scale the interface's font size.                                                                                                                                                                                                                                                                                                                                                 |
+| `fonts`                   |                                                                                                      | No                      | No                      | Defines the font(s) used by the interface. Multiple font parameters can be specified: `?font=font-one&font=font-two...`.                                                                                                                                                                                                                                                                            |
+| `hideHeader`              | `true` or `false`                                                                                    | No, defaults to `false` | No, defaults to `false` | Hides the room header when in a call.                                                                                                                                                                                                                                                                                                                                                               |
+| `hideScreensharing`       | `true` or `false`                                                                                    | No, defaults to `false` | No, defaults to `false` | Hides the screen-sharing button.                                                                                                                                                                                                                                                                                                                                                                    |
+| `homeserver`              |                                                                                                      | Not applicable          | No                      | Homeserver for registering a new (guest) user, configures non-default guest user server when creating a spa link.                                                                                                                                                                                                                                                                                   |
+| `lang`                    | [BCP 47](https://www.rfc-editor.org/info/bcp47) code                                                 | No                      | No                      | The language the app should use.                                                                                                                                                                                                                                                                                                                                                                    |
+| `parentUrl`               |                                                                                                      | Yes                     | Not applicable          | The url used to send widget action postMessages. This should be the domain of the client or the webview the widget is hosted in. (in case the widget is not in an Iframe but in a dedicated webview we send the postMessages same WebView the widget lives in. Filtering is done in the widget so it ignores the messages it receives from itself)                                                  |
+| `password`                |                                                                                                      | No                      | No                      | E2EE password when using a shared secret. (For individual sender keys in embedded mode this is not required.)                                                                                                                                                                                                                                                                                       |
+| `perParticipantE2EE`      | `true` or `false`                                                                                    | No, defaults to `false` | No, defaults to `false` | Enables per participant encryption with Keys exchanged over encrypted matrix room messages.                                                                                                                                                                                                                                                                                                         |
+| `preload`                 | `true` or `false`                                                                                    | No, defaults to `false` | Not applicable          | Pauses app before joining a call until an `io.element.join` widget action is seen, allowing preloading.                                                                                                                                                                                                                                                                                             |
+| `returnToLobby`           | `true` or `false`                                                                                    | No, defaults to `false` | Not applicable          | Displays the lobby in widget mode after leaving a call; shows a blank page if set to `false`. Useful for video rooms.                                                                                                                                                                                                                                                                               |
+| `roomId`                  | [Matrix Room ID](https://spec.matrix.org/v1.12/appendices/#room-ids)                                 | Yes                     | No                      | Anything about what room we're pointed to should be from useRoomIdentifier which parses the path and resolves alias with respect to the default server name, however roomId is an exception as we need the room ID in embedded widget mode, and not the room alias (or even the via params because we are not trying to join it). This is also not validated, where it is in `useRoomIdentifier()`. |
+| `showControls`            | `true` or `false`                                                                                    | No, defaults to `true`  | No, defaults to `true`  | Displays controls like mute, screen-share, invite, and hangup buttons during a call.                                                                                                                                                                                                                                                                                                                |
+| `skipLobby`               | `true` or `false`                                                                                    | No, defaults to `false` | No, defaults to `false` | Skips the lobby to join a call directly, can be combined with preload in widget.                                                                                                                                                                                                                                                                                                                    |
+| `theme`                   | One of: `light`, `dark`, `light-high-contrast`, `dark-high-contrast`                                 | No, defaults to `dark`  | No, defaults to `dark`  | UI theme to use.                                                                                                                                                                                                                                                                                                                                                                                    |
+| `userId`                  | [Matrix User Identifier](https://spec.matrix.org/v1.12/appendices/#user-identifiers)                 | Yes                     | Not applicable          | The Matrix user ID.                                                                                                                                                                                                                                                                                                                                                                                 |
+| `viaServers`              | Comma separated list of [Matrix Server Names](https://spec.matrix.org/v1.12/appendices/#server-name) | Not applicable          | No                      | Homeserver for joining a room, non-empty value required for rooms not on the user’s default homeserver.                                                                                                                                                                                                                                                                                             |
+| `widgetId`                | [MSC2774](https://github.com/matrix-org/matrix-spec-proposals/pull/2774) format widget ID            | Yes                     | Not applicable          | The id used by the widget. The presence of this parameter implies that element call will not connect to a homeserver directly and instead tries to establish postMessage communication via the `parentUrl`.                                                                                                                                                                                         |

i18next-parser.config.ts

@@ -22,7 +22,7 @@ export default {
     ],
   },
   locales: ["en-GB"],
-  output: "public/locales/$LOCALE/$NAMESPACE.json",
+  output: "locales/$LOCALE/$NAMESPACE.json",
   input: ["src/**/*.{ts,tsx}"],
   sort: true,
 };

localazy.json

@@ -7,13 +7,13 @@
     "features": ["plural_postfix_us", "filter_untranslated"],
     "files": [
       {
-        "pattern": "public/locales/en-GB/*.json",
+        "pattern": "locales/en-GB/*.json",
         "lang": "inherited"
       },
       {
         "group": "existing",
-        "pattern": "public/locales/*/*.json",
-        "excludes": ["public/locales/en-GB/*.json"],
+        "pattern": "locales/*/*.json",
+        "excludes": ["locales/en-GB/*.json"],
         "lang": "${autodetectLang}"
       }
     ]
@@ -22,7 +22,7 @@
   "download": {
     "files": [
       {
-        "output": "public/locales/${langLsrDash}/${file}"
+        "output": "locales/${langLsrDash}/${file}"
       }
     ],
     "includeSourceLang": "${includeSourceLang|false}",

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}}"
 }

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}}"
 }

locales/de/app.json

@@ -4,16 +4,22 @@
   },
   "action": {
     "close": "Schließen",
-    "copy": "Kopieren",
     "copy_link": "Link kopieren",
+    "edit": "Bearbeiten",
     "go": "Los geht’s",
     "invite": "Einladen",
+    "lower_hand": "Handmeldung zurücknehmen",
     "no": "Nein",
+    "pick_reaction": "Reaktion auswählen",
+    "raise_hand": "Handmeldung",
     "register": "Registrieren",
     "remove": "Entfernen",
+    "show_less": "Weniger anzeigen",
+    "show_more": "Mehr anzeigen",
     "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 <6>Cookie-Richtlinien</6>.",
   "app_selection_modal": {
@@ -38,26 +44,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",
+    "reactions": "Reaktionen",
     "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 +97,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 +111,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.",
@@ -103,25 +136,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": "Zeige eine Animation, wenn jemand eine Reaktion sendet.",
+      "reactions_show_label": "Reaktionen anzeigen",
+      "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 +178,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"
+  }
 }

locales/el/app.json

@@ -4,7 +4,6 @@
   },
   "action": {
     "close": "Κλείσιμο",
-    "copy": "Αντιγραφή",
     "go": "Μετάβαση",
     "no": "Όχι",
     "register": "Εγγραφή",
@@ -13,7 +12,7 @@
     "sign_out": "Αποσύνδεση",
     "submit": "Υποβολή"
   },
-  "analytics_notice": "Συμμετέχοντας σε αυτή τη δοκιμαστική έκδοση, συναινείτε στη συλλογή ανώνυμων δεδομένων, τα οποία χρησιμοποιούμε για τη βελτίωση του προϊόντος. Μπορείτε να βρείτε περισσότερες πληροφορίες σχετικά με το ποια δεδομένα καταγράφουμε στην <2>Πολιτική απορρήτου</2> και στην <6>Πολιτική cookies</6>.",
+  "analytics_notice": "Συμμετέχοντας σε αυτή τη δοκιμαστική έκδοση, συναινείτε στη συλλογή ανώνυμων δεδομένων, τα οποία χρησιμοποιούμε για τη βελτίωση του προϊόντος. Μπορείτε να βρείτε περισσότερες πληροφορίες σχετικά με το ποια δεδομένα καταγράφουμε στην <2>Πολιτική απορρήτου</2> και στην <5>Πολιτική cookies</5>.",
   "call_ended_view": {
     "create_account_button": "Δημιουργία λογαριασμού",
     "create_account_prompt": "<0>Γιατί να μην ολοκληρώσετε με τη δημιουργία ενός κωδικού πρόσβασης για τη διατήρηση του λογαριασμού σας;</0><1>Θα μπορείτε να διατηρήσετε το όνομά σας και να ορίσετε ένα avatar για χρήση σε μελλοντικές κλήσεις.</1>",
@@ -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}}"
 }

locales/en-GB/app.json

@@ -8,9 +8,14 @@
     "edit": "Edit",
     "go": "Go",
     "invite": "Invite",
+    "lower_hand": "Lower hand",
     "no": "No",
+    "pick_reaction": "Pick reaction",
+    "raise_hand": "Raise hand",
     "register": "Register",
     "remove": "Remove",
+    "show_less": "Show less",
+    "show_more": "Show more",
     "sign_in": "Sign in",
     "sign_out": "Sign out",
     "submit": "Submit",
@@ -55,8 +60,10 @@
     "password": "Password",
     "preferences": "Preferences",
     "profile": "Profile",
-    "raise_hand": "Raise hand",
+    "reaction": "Reaction",
+    "reactions": "Reactions",
     "settings": "Settings",
+    "something_went_wrong": "Something went wrong",
     "unencrypted": "Not encrypted",
     "username": "Username",
     "video": "Video"
@@ -73,8 +80,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",
@@ -92,11 +99,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…",
@@ -135,6 +142,10 @@
   "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",
@@ -147,13 +158,20 @@
     "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 an animation when anyone sends a reaction.",
+      "reactions_show_label": "Show reactions",
+      "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",
+  "star_rating_input_label_one": "{{count}} star",
   "star_rating_input_label_other": "{{count}} stars",
   "start_new_call": "Start new call",
   "start_video_button_label": "Start video",
@@ -172,6 +190,7 @@
     "collapse": "Collapse",
     "expand": "Expand",
     "mute_for_me": "Mute for me",
+    "muted_for_me": "Muted for me",
     "volume": "Volume"
   }
 }

locales/es/app.json

@@ -4,7 +4,6 @@
   },
   "action": {
     "close": "Cerrar",
-    "copy": "Copiar",
     "go": "Comenzar",
     "register": "Registrarse",
     "remove": "Eliminar",
@@ -12,7 +11,7 @@
     "sign_out": "Cerrar sesión",
     "submit": "Enviar"
   },
-  "analytics_notice": "Al participar en esta beta, consientes a la recogida de datos anónimos, los cuales usaremos para mejorar el producto. Puedes encontrar más información sobre que datos recogemos en nuestra <2>Política de privacidad</2> y en nuestra <6>Política sobre Cookies</6>.",
+  "analytics_notice": "Al participar en esta beta, consientes a la recogida de datos anónimos, los cuales usaremos para mejorar el producto. Puedes encontrar más información sobre que datos recogemos en nuestra <2>Política de privacidad</2> y en nuestra <5>Política sobre Cookies</5>.",
   "call_ended_view": {
     "create_account_button": "Crear cuenta",
     "create_account_prompt": "<0>¿Por qué no mantienes tu cuenta estableciendo una contraseña?</0><1>Podrás mantener tu nombre y establecer un avatar para usarlo en futuras llamadas</1>",
@@ -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}}"
 }

locales/et/app.json

@@ -4,7 +4,6 @@
   },
   "action": {
     "close": "Sulge",
-    "copy": "Kopeeri",
     "copy_link": "Kopeeri link",
     "go": "Jätka",
     "invite": "Kutsu",
@@ -15,7 +14,7 @@
     "sign_out": "Logi välja",
     "submit": "Saada"
   },
-  "analytics_notice": "Nõustudes selle beetaversiooni kasutamisega sa nõustud ka toote arendamiseks kasutatavate anonüümsete andmete kogumisega. Täpsemat teavet kogutavate andmete kohta leiad meie <2>Privaatsuspoliitikast</2> ja meie <6>Küpsiste kasutamise reeglitest</6>.",
+  "analytics_notice": "Nõustudes selle beetaversiooni kasutamisega sa nõustud ka toote arendamiseks kasutatavate anonüümsete andmete kogumisega. Täpsemat teavet kogutavate andmete kohta leiad meie <2>Privaatsuspoliitikast</2> ja meie <5>Küpsiste kasutamise reeglitest</5>.",
   "app_selection_modal": {
     "continue_in_browser": "Jätka veebibrauseris",
     "open_in_app": "Ava rakenduses",
@@ -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}}"
 }

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": "نسخه: {{نسخه}}"
 }

locales/fr/app.json

@@ -4,7 +4,6 @@
   },
   "action": {
     "close": "Fermer",
-    "copy": "Copier",
     "copy_link": "Copier le lien",
     "go": "Commencer",
     "invite": "Inviter",
@@ -15,7 +14,7 @@
     "sign_out": "Déconnexion",
     "submit": "Envoyer"
   },
-  "analytics_notice": "En participant à cette beta, vous consentez à la collecte de données anonymes, qui seront utilisées pour améliorer le produit. Vous trouverez plus d’informations sur les données collectées dans notre <2>Politique de vie privée</2> et notre <6>Politique de cookies</6>.",
+  "analytics_notice": "En participant à cette beta, vous consentez à la collecte de données anonymes, qui seront utilisées pour améliorer le produit. Vous trouverez plus d’informations sur les données collectées dans notre <2>Politique de vie privée</2> et notre <5>Politique de cookies</5>.",
   "app_selection_modal": {
     "continue_in_browser": "Continuer dans le navigateur",
     "open_in_app": "Ouvrir dans l’application",
@@ -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}}"
 }

locales/id/app.json

@@ -4,7 +4,6 @@
   },
   "action": {
     "close": "Tutup",
-    "copy": "Salin",
     "copy_link": "Salin tautan",
     "go": "Bergabung",
     "invite": "Undang",
@@ -15,7 +14,7 @@
     "sign_out": "Keluar",
     "submit": "Kirim"
   },
-  "analytics_notice": "Dengan bergabung dalam beta ini, Anda mengizinkan kami untuk mengumpulkan data anonim, yang kami gunakan untuk meningkatkan produk ini. Anda dapat mempelajari lebih lanjut tentang data apa yang kami lacak dalam <2>Kebijakan Privasi</2> dan <6>Kebijakan Kuki</6> kami.",
+  "analytics_notice": "Dengan bergabung dalam beta ini, Anda mengizinkan kami untuk mengumpulkan data anonim, yang kami gunakan untuk meningkatkan produk ini. Anda dapat mempelajari lebih lanjut tentang data apa yang kami lacak dalam <2>Kebijakan Privasi</2> dan <5>Kebijakan Kuki</5> kami.",
   "app_selection_modal": {
     "continue_in_browser": "Lanjutkan dalam peramban",
     "open_in_app": "Buka dalam aplikasi",
@@ -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}}"
 }

locales/it/app.json

@@ -4,7 +4,6 @@
   },
   "action": {
     "close": "Chiudi",
-    "copy": "Copia",
     "copy_link": "Copia collegamento",
     "go": "Vai",
     "invite": "Invita",
@@ -14,7 +13,7 @@
     "sign_out": "Disconnetti",
     "submit": "Invia"
   },
-  "analytics_notice": "Partecipando a questa beta, acconsenti alla raccolta di dati anonimi che usiamo per migliorare il prodotto. Puoi trovare più informazioni su quali dati monitoriamo nella nostra <2>informativa sulla privacy</2> e nell'<6>informativa sui cookie</6>.",
+  "analytics_notice": "Partecipando a questa beta, acconsenti alla raccolta di dati anonimi che usiamo per migliorare il prodotto. Puoi trovare più informazioni su quali dati monitoriamo nella nostra <2>informativa sulla privacy</2> e nell'<5>informativa sui cookie</5>.",
   "app_selection_modal": {
     "continue_in_browser": "Continua nel browser",
     "open_in_app": "Apri nell'app",
@@ -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}}"
 }

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}}"
 }

locales/lv/app.json

@@ -4,7 +4,6 @@
   },
   "action": {
     "close": "Aizvērt",
-    "copy": "Ievietot starpliktuvē",
     "go": "Aiziet",
     "no": "Nē",
     "register": "Reģistrēties",
@@ -13,7 +12,7 @@
     "sign_out": "Atteikties",
     "submit": "Iesniegt"
   },
-  "analytics_notice": "Piedalīšanās šajā beta apliecina piekrišanu anonīmu datu ievākšanai, ko mēs izmantojam, lai uzlabotu izstrādājumu. Vairāk informācijas par datiem, ko mēs ievācam, var atrast mūsu <2>privātuma nosacījumos</2> un <6>sīkdatņu nosacījumos</6>.",
+  "analytics_notice": "Piedalīšanās šajā beta apliecina piekrišanu anonīmu datu ievākšanai, ko mēs izmantojam, lai uzlabotu izstrādājumu. Vairāk informācijas par datiem, ko mēs ievācam, var atrast mūsu <2>privātuma nosacījumos</2> un <5>sīkdatņu nosacījumos</5>.",
   "call_ended_view": {
     "body": "Tu tiki atvienots no zvana",
     "create_account_button": "Izveidot kontu",
@@ -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}}"
 }

locales/pl/app.json

@@ -4,7 +4,6 @@
   },
   "action": {
     "close": "Zamknij",
-    "copy": "Kopiuj",
     "copy_link": "Kopiuj link",
     "go": "Przejdź",
     "invite": "Zaproś",
@@ -15,7 +14,7 @@
     "sign_out": "Wyloguj się",
     "submit": "Wyślij"
   },
-  "analytics_notice": "Uczestnicząc w tej becie, upoważniasz nas do zbierania anonimowych danych, które wykorzystamy do ulepszenia produktu. Dowiedz się więcej na temat danych, które zbieramy w naszej <2>Polityce prywatności</2> i <6>Polityce ciasteczek</6>.",
+  "analytics_notice": "Uczestnicząc w tej becie, upoważniasz nas do zbierania anonimowych danych, które wykorzystamy do ulepszenia produktu. Dowiedz się więcej na temat danych, które zbieramy w naszej <2>Polityce prywatności</2> i <5>Polityce ciasteczek</5>.",
   "app_selection_modal": {
     "continue_in_browser": "Kontynuuj w przeglądarce",
     "open_in_app": "Otwórz w aplikacji",
@@ -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}}"
 }

locales/ru/app.json

@@ -4,7 +4,6 @@
   },
   "action": {
     "close": "Закрыть",
-    "copy": "Копировать",
     "go": "Далее",
     "no": "Нет",
     "register": "Зарегистрироваться",
@@ -13,7 +12,7 @@
     "sign_out": "Выйти",
     "submit": "Отправить"
   },
-  "analytics_notice": "Участвуя в этой бета-версии, вы соглашаетесь на сбор анонимных данных, которые мы используем для улучшения продукта. Более подробную информацию о том, какие данные мы отслеживаем, вы можете найти в нашей <2> Политике конфиденциальности</2> и нашей <6> Политике использования файлов cookie</6>.",
+  "analytics_notice": "Участвуя в этой бета-версии, вы соглашаетесь на сбор анонимных данных, которые мы используем для улучшения продукта. Более подробную информацию о том, какие данные мы отслеживаем, вы можете найти в нашей <2> Политике конфиденциальности</2> и нашей <5> Политике использования файлов cookie</5>.",
   "call_ended_view": {
     "create_account_button": "Создать аккаунт",
     "create_account_prompt": "<0>Почему бы не задать пароль, тем самым сохранив аккаунт?</0><1>Так вы можете оставить своё имя и задать аватар для будущих звонков.</1>",
@@ -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}}"
 }

locales/sk/app.json

@@ -4,7 +4,6 @@
   },
   "action": {
     "close": "Zatvoriť",
-    "copy": "Kopírovať",
     "copy_link": "Kopírovať odkaz",
     "go": "Prejsť",
     "invite": "Pozvať",
@@ -15,7 +14,7 @@
     "sign_out": "Odhlásiť sa",
     "submit": "Odoslať"
   },
-  "analytics_notice": "Účasťou v tejto beta verzii súhlasíte so zhromažďovaním anonymných údajov, ktoré použijeme na zlepšenie produktu. Viac informácií o tom, ktoré údaje sledujeme, nájdete v našich <2>Zásadách ochrany osobných údajov</2> a <6>Zásadách používania súborov cookie</6>.",
+  "analytics_notice": "Účasťou v tejto beta verzii súhlasíte so zhromažďovaním anonymných údajov, ktoré použijeme na zlepšenie produktu. Viac informácií o tom, ktoré údaje sledujeme, nájdete v našich <2>Zásadách ochrany osobných údajov</2> a <5>Zásadách používania súborov cookie</5>.",
   "app_selection_modal": {
     "continue_in_browser": "Pokračovať v prehliadači",
     "open_in_app": "Otvoriť v aplikácii",
@@ -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}}"
 }

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",

locales/uk/app.json

@@ -4,7 +4,6 @@
   },
   "action": {
     "close": "Закрити",
-    "copy": "Копіювати",
     "copy_link": "Скопіювати посилання",
     "go": "Далі",
     "invite": "Запросити",
@@ -15,7 +14,7 @@
     "sign_out": "Вийти",
     "submit": "Надіслати"
   },
-  "analytics_notice": "Користуючись дочасним доступом, ви даєте згоду на збір анонімних даних, які ми використовуємо для вдосконалення продукту. Ви можете знайти більше інформації про те, які дані ми відстежуємо в нашій <2>Політиці Приватності</2> і нашій <6>Політиці про куки</6>.",
+  "analytics_notice": "Користуючись дочасним доступом, ви даєте згоду на збір анонімних даних, які ми використовуємо для вдосконалення продукту. Ви можете знайти більше інформації про те, які дані ми відстежуємо в нашій <2>Політиці Приватності</2> і нашій <5>Політиці про куки</5>.",
   "app_selection_modal": {
     "continue_in_browser": "Продовжити у браузері",
     "open_in_app": "Відкрити у застосунку",
@@ -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}}"
 }

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}}"
 }

locales/zh-Hans/app.json

@@ -4,7 +4,6 @@
   },
   "action": {
     "close": "关闭",
-    "copy": "复制",
     "go": "开始",
     "no": "否",
     "register": "注册",
@@ -13,7 +12,7 @@
     "sign_out": "登出",
     "submit": "提交"
   },
-  "analytics_notice": "参与测试即表示您同意我们收集匿名数据，用于改进产品。您可以在我们的<2>隐私政策</2>和<6>Cookie政策</6>中找到有关我们跟踪哪些数据以及更多信息。",
+  "analytics_notice": "参与测试即表示您同意我们收集匿名数据，用于改进产品。您可以在我们的<2>隐私政策</2>和<5>Cookie政策</5>中找到有关我们跟踪哪些数据以及更多信息。",
   "app_selection_modal": {
     "continue_in_browser": "在浏览器中继续",
     "open_in_app": "在应用中打开",
@@ -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}}"
 }

locales/zh-Hant/app.json

@@ -4,7 +4,6 @@
   },
   "action": {
     "close": "關閉",
-    "copy": "複製",
     "copy_link": "複製連結",
     "go": "前往",
     "invite": "邀請",
@@ -15,7 +14,7 @@
     "sign_out": "登出",
     "submit": "遞交"
   },
-  "analytics_notice": "參與此測試版即表示您同意蒐集匿名資料，我們使用這些資料來改進產品。您可以在我們的<2>隱私政策</2>與我們的 <6>Cookie 政策</6> 中找到關於我們追蹤哪些資料的更多資訊。",
+  "analytics_notice": "參與此測試版即表示您同意蒐集匿名資料，我們使用這些資料來改進產品。您可以在我們的<2>隱私政策</2>與我們的 <5>Cookie 政策</5> 中找到關於我們追蹤哪些資料的更多資訊。",
   "app_selection_modal": {
     "continue_in_browser": "在瀏覽器中繼續",
     "open_in_app": "在應用程式中開啟",
@@ -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}}"
 }

package.json

@@ -17,19 +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.54.0",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.55.0",
     "@opentelemetry/resources": "^1.25.1",
     "@opentelemetry/sdk-trace-base": "^1.25.1",
     "@opentelemetry/sdk-trace-web": "^1.9.1",
@@ -41,14 +45,16 @@
     "@sentry/react": "^8.0.0",
     "@sentry/vite-plugin": "^2.0.0",
     "@testing-library/dom": "^10.1.0",
+    "@testing-library/jest-dom": "^6.6.3",
     "@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",
@@ -57,8 +63,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",
@@ -73,20 +79,20 @@
     "eslint-plugin-matrix-org": "^1.2.1",
     "eslint-plugin-react": "^7.29.4",
     "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",
-    "i18next-http-backend": "^2.0.0",
     "i18next-parser": "^9.0.0",
     "jsdom": "^25.0.0",
     "knip": "^5.27.2",
     "livekit-client": "^2.5.7",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "loglevel": "^1.9.1",
-    "matrix-js-sdk": "matrix-org/matrix-js-sdk#0a29063bc9e61ee70ca43820d4bb91f6a27f1237",
-    "matrix-widget-api": "^1.8.2",
+    "matrix-js-sdk": "matrix-org/matrix-js-sdk#2210255d6ffc909c574fb8ef16f92140b2fb7797",
+    "matrix-widget-api": "^1.10.0",
     "normalize.css": "^8.0.1",
     "observable-hooks": "^4.2.3",
     "pako": "^2.0.4",
@@ -106,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/.well-known/apple-app-site-association

@@ -1,26 +0,0 @@
-{
-  "applinks": {
-    "details": [
-      {
-        "appIDs": [
-          "7J4U792NQT.io.element.elementx",
-          "7J4U792NQT.io.element.elementx.nightly",
-          "7J4U792NQT.io.element.elementx.pr"
-        ],
-        "components": [
-          {
-            "?": {
-              "no_universal_links": "?*"
-            },
-            "exclude": true,
-            "comment": "Opt out of universal links"
-          },
-          {
-            "/": "/*",
-            "comment": "Matches any URL"
-          }
-        ]
-      }
-    ]
-  }
-}

public/.well-known/assetlinks.json

@@ -1,32 +0,0 @@
-[
-  {
-    "relation": ["delegate_permission/common.handle_all_urls"],
-    "target": {
-      "namespace": "android_app",
-      "package_name": "io.element.android.x.debug",
-      "sha256_cert_fingerprints": [
-        "B0:B0:51:DC:56:5C:81:2F:E1:7F:6F:3E:94:5B:4D:79:04:71:23:AB:0D:A6:12:86:76:9E:B2:94:91:97:13:0E"
-      ]
-    }
-  },
-  {
-    "relation": ["delegate_permission/common.handle_all_urls"],
-    "target": {
-      "namespace": "android_app",
-      "package_name": "io.element.android.x.nightly",
-      "sha256_cert_fingerprints": [
-        "CA:D3:85:16:84:3A:05:CC:EB:00:AB:7B:D3:80:0F:01:BA:8F:E0:4B:38:86:F3:97:D8:F7:9A:1B:C4:54:E4:0F"
-      ]
-    }
-  },
-  {
-    "relation": ["delegate_permission/common.handle_all_urls"],
-    "target": {
-      "namespace": "android_app",
-      "package_name": "io.element.android.x",
-      "sha256_cert_fingerprints": [
-        "C6:DB:9B:9C:8C:BD:D6:5D:16:E8:EC:8C:8B:91:C8:31:B9:EF:C9:5C:BF:98:AE:41:F6:A9:D8:35:15:1A:7E:16"
-      ]
-    }
-  }
-]

public/index.html

@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="favicon.png" />
+    <link rel="preload" href="/config.json" as="fetch" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0"

renovate.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": ["config:base"],
+  "extends": ["config:recommended"],
   "packageRules": [
     {
       "groupName": "all non-major dependencies",
@@ -26,8 +26,8 @@
     },
     {
       "groupName": "Compound",
-      "matchPackagePrefixes": ["@vector-im/compound-"],
-      "schedule": "before 5am on Tuesday and Friday"
+      "schedule": "before 5am on Tuesday and Friday",
+      "matchPackageNames": ["@vector-im/compound-{/,}**"]
     },
     {
       "groupName": "LiveKit client",
@@ -35,7 +35,7 @@
     },
     {
       "groupName": "LiveKit components",
-      "matchPackagePrefixes": ["@livekit/components-"]
+      "matchPackageNames": ["@livekit/components-{/,}**"]
     },
     {
       "groupName": "Vaul",

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/i18next.d.ts

@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import "i18next";
 // import all namespaces (for the default language, only)
-import app from "../../public/locales/en-GB/app.json";
+import app from "../../locales/en-GB/app.json";
 
 declare module "i18next" {
   interface CustomTypeOptions {

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/Avatar.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { useMemo, FC } from "react";
+import { useMemo, FC, CSSProperties } from "react";
 import { Avatar as CompoundAvatar } from "@vector-im/compound-web";
 
 import { getAvatarUrl } from "./utils/matrix";
@@ -33,6 +33,7 @@ interface Props {
   className?: string;
   src?: string;
   size?: Size | number;
+  style?: CSSProperties;
 }
 
 export const Avatar: FC<Props> = ({
@@ -41,6 +42,8 @@ export const Avatar: FC<Props> = ({
   name,
   src,
   size = Size.MD,
+  style,
+  ...props
 }) => {
   const { client } = useClient();
 
@@ -64,6 +67,8 @@ export const Avatar: FC<Props> = ({
       name={name}
       size={`${sizePx}px`}
       src={resolvedSrc}
+      style={style}
+      {...props}
     />
   );
 };

src/ClientContext.tsx

@@ -16,19 +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 { WidgetApi } from "matrix-widget-api";
+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,
@@ -36,7 +30,6 @@ import {
 } from "./analytics/PosthogAnalytics";
 import { translatedError } from "./TranslatedError";
 import { useEventTarget } from "./useEvents";
-import { Config } from "./config/Config";
 
 declare global {
   interface Window {
@@ -359,7 +352,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
   );
 };
 
-type InitResult = {
+export type InitResult = {
   widgetApi: WidgetApi | null;
   client: MatrixClient;
   passwordlessUser: boolean;
@@ -376,50 +369,8 @@ async function loadClient(): Promise<InitResult | null> {
       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 {
-          widgetApi: null,
-          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

@@ -6,6 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 .modal {
+  --inset-inline: 520px;
   display: flex;
   flex-direction: column;
 }
@@ -35,7 +36,7 @@ Please see LICENSE in the repository root for full details.
 .drawer {
   background: var(--cpd-color-bg-canvas-default);
   inset-block-end: 0;
-  inset-inline: max(0px, calc((100% - 520px) / 2));
+  inset-inline: max(0px, calc((100% - var(--inset-inline)) / 2));
   max-block-size: 90%;
   border-start-start-radius: var(--border-radius);
   border-start-end-radius: var(--border-radius);

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/Overlay.module.css

@@ -42,8 +42,9 @@ Please see LICENSE in the repository root for full details.
 }
 
 .overlay.animate {
+  --overlay-top: 50%;
   left: 50%;
-  top: 50%;
+  top: var(--overlay-top);
   transform: translate(-50%, -50%);
 }
 

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";
 
@@ -66,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.test.ts

@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { describe, expect, it } from "vitest";
 
-import { getRoomIdentifierFromUrl } from "../src/UrlParams";
+import { getRoomIdentifierFromUrl, getUrlParams } from "../src/UrlParams";
 
 const ROOM_NAME = "roomNameHere";
 const ROOM_ID = "!d45f138fsd";
@@ -86,4 +86,18 @@ describe("UrlParams", () => {
         .roomAlias,
     ).toBeFalsy();
   });
+
+  describe("preload", () => {
+    it("defaults to false", () => {
+      expect(getUrlParams().preload).toBe(false);
+    });
+
+    it("ignored in SPA mode", () => {
+      expect(getUrlParams("?preload=true").preload).toBe(false);
+    });
+
+    it("respected in widget mode", () => {
+      expect(getUrlParams("?preload=true&widgetId=12345").preload).toBe(true);
+    });
+  });
 });

src/UrlParams.ts

@@ -211,8 +211,11 @@ export const getUrlParams = (
 
   const fontScale = parseFloat(parser.getParam("fontScale") ?? "");
 
+  const widgetId = parser.getParam("widgetId");
+  const isWidget = !!widgetId;
+
   return {
-    widgetId: parser.getParam("widgetId"),
+    widgetId,
     parentUrl: parser.getParam("parentUrl"),
 
     // NB. we don't validate roomId here as we do in getRoomIdentifierFromUrl:
@@ -224,7 +227,7 @@ export const getUrlParams = (
     confineToRoom:
       parser.getFlagParam("confineToRoom") || parser.getFlagParam("embed"),
     appPrompt: parser.getFlagParam("appPrompt", true),
-    preload: parser.getFlagParam("preload"),
+    preload: isWidget ? parser.getFlagParam("preload") : false,
     hideHeader: parser.getFlagParam("hideHeader"),
     showControls: parser.getFlagParam("showControls", true),
     hideScreensharing: parser.getFlagParam("hideScreensharing"),

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/button/RaisedHandToggleButton.tsx

@@ -1,133 +0,0 @@
-/*
-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 } from "@vector-im/compound-web";
-import {
-  ComponentPropsWithoutRef,
-  FC,
-  ReactNode,
-  useCallback,
-  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 { useReactions } from "../useReactions";
-import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships";
-
-interface InnerButtonProps extends ComponentPropsWithoutRef<"button"> {
-  raised: boolean;
-}
-
-const InnerButton: FC<InnerButtonProps> = ({ raised, ...props }) => {
-  const { t } = useTranslation();
-
-  return (
-    <Tooltip label={t("common.raise_hand")}>
-      <CpdButton
-        kind={raised ? "primary" : "secondary"}
-        {...props}
-        style={{ paddingLeft: 8, paddingRight: 8 }}
-      >
-        <p
-          role="img"
-          aria-hidden
-          style={{
-            width: "30px",
-            height: "0px",
-            display: "inline-block",
-            fontSize: "22px",
-          }}
-        >
-          ✋
-        </p>
-      </CpdButton>
-    </Tooltip>
-  );
-};
-
-interface RaisedHandToggleButtonProps {
-  rtcSession: MatrixRTCSession;
-  client: MatrixClient;
-}
-
-export function RaiseHandToggleButton({
-  client,
-  rtcSession,
-}: RaisedHandToggleButtonProps): ReactNode {
-  const { raisedHands, myReactionId } = useReactions();
-  const [busy, setBusy] = useState(false);
-  const userId = client.getUserId()!;
-  const isHandRaised = !!raisedHands[userId];
-  const memberships = useMatrixRTCSessionMemberships(rtcSession);
-
-  const toggleRaisedHand = useCallback(() => {
-    const raiseHand = async (): Promise<void> => {
-      if (isHandRaised) {
-        if (!myReactionId) {
-          logger.warn(`Hand raised but no reaction event to redact!`);
-          return;
-        }
-        try {
-          setBusy(true);
-          await client.redactEvent(rtcSession.room.roomId, myReactionId);
-          logger.debug("Redacted raise hand event");
-        } catch (ex) {
-          logger.error("Failed to redact reaction event", myReactionId, ex);
-        } finally {
-          setBusy(false);
-        }
-      } else {
-        const myMembership = memberships.find((m) => m.sender === userId);
-        if (!myMembership?.eventId) {
-          logger.error("Cannot find own membership event");
-          return;
-        }
-        const parentEventId = myMembership.eventId;
-        try {
-          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);
-        } catch (ex) {
-          logger.error("Failed to send reaction event", ex);
-        } finally {
-          setBusy(false);
-        }
-      }
-    };
-
-    void raiseHand();
-  }, [
-    client,
-    isHandRaised,
-    memberships,
-    myReactionId,
-    rtcSession.room.roomId,
-    userId,
-  ]);
-
-  return (
-    <InnerButton
-      disabled={busy}
-      onClick={toggleRaisedHand}
-      raised={isHandRaised}
-    />
-  );
-}

src/button/ReactionToggleButton.module.css

@@ -0,0 +1,113 @@
+.raisedButton > svg {
+  color: var(--cpd-color-icon-on-solid-primary);
+}
+
+.reactionPopupMenu {
+  --reaction-button-padding: 10px;
+  --reaction-button-fontsize: 20px;
+  --reaction-button-gap: var(--cpd-separator-spacing);
+  display: flex;
+  width: fit-content;
+}
+
+@media (max-width: 420px) {
+  .reactionPopupMenu {
+    --reaction-button-padding: 8px;
+    --reaction-button-fontsize: 16px;
+    --reaction-button-gap: 6px;
+  }
+}
+
+div.reactionPopupMenuRoot.reactionPopupMenuModal {
+  --overlay-top: 82vh;
+  width: fit-content;
+}
+
+div.reactionPopupMenuRoot {
+  /* Center the drawer */
+  --inset-inline: 30em;
+}
+
+.reactionPopupMenuRoot > div {
+  width: fit-content;
+  max-width: 100vw;
+}
+
+div.reactionPopupMenuRoot.reactionPopupMenuModal > div > div {
+  padding-inline: var(--cpd-space-6x);
+  padding-block: var(--cpd-space-6x);
+}
+
+.reactionPopupMenu section {
+  height: fit-content;
+  flex: 1;
+  max-width: fit-content;
+}
+
+.reactionPopupMenu section.reactionsMenuSection {
+  margin: auto 0;
+  flex: auto;
+}
+
+.reactionsMenu {
+  margin: 0;
+  padding: 0;
+  flex-grow: 1;
+  gap: var(--reaction-button-gap);
+  /* Height of 3 rows plus padding. */
+  max-height: calc(
+    ((var(--reaction-button-fontsize) + var(--cpd-separator-spacing)) * 2) * 3
+  );
+  max-width: calc(
+    ((var(--reaction-button-fontsize) + var(--cpd-separator-spacing)) * 2) * 5
+  );
+  overflow-x: hidden;
+  overflow-y: auto;
+  list-style: none;
+  flex-wrap: wrap;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: start;
+  align-items: auto;
+  align-content: start;
+  width: fit-content;
+}
+
+.reactionsMenu > * {
+  flex: 0 0 auto;
+}
+
+.reactionButton {
+  padding: var(--reaction-button-padding);
+  border-radius: var(--cpd-radius-pill-effect);
+  font-size: var(--reaction-button-fontsize);
+  min-block-size: unset;
+  border: none;
+  aspect-ratio: 1 / 1;
+  height: 100%;
+}
+
+.verticalSeperator {
+  background-color: var(--cpd-color-gray-800);
+  width: 2px;
+  height: auto;
+  margin-left: var(--cpd-separator-spacing);
+  margin-right: var(--cpd-separator-spacing);
+}
+
+.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,157 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { render } from "@testing-library/react";
+import { expect, test } from "vitest";
+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,
+}: {
+  rtcSession: MockRTCSession;
+}): ReactNode {
+  return (
+    <TooltipProvider>
+      <TestReactionsWrapper rtcSession={rtcSession}>
+        <ReactionToggleButton userId={memberUserIdAlice} />
+      </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} />,
+  );
+  await user.click(getByLabelText("common.reactions"));
+  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} />,
+  );
+  await user.click(getByLabelText("common.reactions"));
+  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} />,
+  );
+  const reactionEvent = room.testSendHandRaise(memberEventAlice, membership);
+  await user.click(getByLabelText("common.reactions"));
+  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} />,
+  );
+  await user.click(getByLabelText("common.reactions"));
+  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 fully expand emoji picker", async () => {
+  const user = userEvent.setup();
+  const room = new MockRoom(memberUserIdAlice);
+  const rtcSession = new MockRTCSession(room, membership);
+  const { getByText, container, getByLabelText } = render(
+    <TestComponent rtcSession={rtcSession} />,
+  );
+  await user.click(getByLabelText("common.reactions"));
+  await user.click(getByLabelText("action.show_more"));
+  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 close reaction dialog", async () => {
+  const user = userEvent.setup();
+  const room = new MockRoom(memberUserIdAlice);
+  const rtcSession = new MockRTCSession(room, membership);
+  const { getByLabelText, container } = render(
+    <TestComponent rtcSession={rtcSession} />,
+  );
+  await user.click(getByLabelText("common.reactions"));
+  await user.click(getByLabelText("action.show_more"));
+  await user.click(getByLabelText("action.show_less"));
+  expect(container).toMatchSnapshot();
+});

src/button/ReactionToggleButton.tsx

@@ -0,0 +1,244 @@
+/*
+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, Alert } from "@vector-im/compound-web";
+import {
+  RaisedHandSolidIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  ReactionSolidIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
+import {
+  ComponentPropsWithoutRef,
+  FC,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { useTranslation } from "react-i18next";
+import { logger } from "matrix-js-sdk/src/logger";
+import classNames from "classnames";
+
+import { useReactions } from "../useReactions";
+import styles from "./ReactionToggleButton.module.css";
+import { ReactionOption, ReactionSet, ReactionsRowSize } 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("common.reactions")}>
+      <CpdButton
+        className={classNames(raised && styles.raisedButton)}
+        aria-expanded={open}
+        aria-haspopup
+        kind={raised || open ? "primary" : "secondary"}
+        iconOnly
+        Icon={raised ? RaisedHandSolidIcon : ReactionSolidIcon}
+        {...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 [isFullyExpanded, setExpanded] = useState(false);
+
+  const filteredReactionSet = useMemo(
+    () => (isFullyExpanded ? ReactionSet : ReactionSet.slice(0, 5)),
+    [isFullyExpanded],
+  );
+  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} caption="H">
+            <CpdButton
+              kind={isHandRaised ? "primary" : "secondary"}
+              aria-keyshortcuts="H"
+              aria-pressed={isHandRaised}
+              aria-label={label}
+              onClick={() => toggleRaisedHand()}
+              iconOnly
+              Icon={RaisedHandSolidIcon}
+            />
+          </Tooltip>
+        </section>
+        <div className={styles.verticalSeperator} />
+        <section className={styles.reactionsMenuSection}>
+          <menu
+            className={classNames(
+              isFullyExpanded && styles.reactionsMenuExpanded,
+              styles.reactionsMenu,
+            )}
+          >
+            {filteredReactionSet.map((reaction, index) => (
+              <li key={reaction.name}>
+                <Tooltip
+                  label={reaction.name}
+                  caption={
+                    index < ReactionsRowSize
+                      ? (index + 1).toString()
+                      : undefined
+                  }
+                >
+                  <CpdButton
+                    kind="secondary"
+                    className={styles.reactionButton}
+                    disabled={!canReact}
+                    onClick={() => sendReaction(reaction)}
+                    aria-keyshortcuts={
+                      index < ReactionsRowSize
+                        ? (index + 1).toString()
+                        : undefined
+                    }
+                  >
+                    {reaction.emoji}
+                  </CpdButton>
+                </Tooltip>
+              </li>
+            ))}
+          </menu>
+        </section>
+        <section style={{ marginLeft: "var(--cpd-separator-spacing)" }}>
+          <Tooltip
+            label={
+              isFullyExpanded ? t("action.show_less") : t("action.show_more")
+            }
+          >
+            <CpdButton
+              iconOnly
+              aria-label={
+                isFullyExpanded ? t("action.show_less") : t("action.show_more")
+              }
+              Icon={isFullyExpanded ? ChevronUpIcon : ChevronDownIcon}
+              kind="tertiary"
+              onClick={() => setExpanded(!isFullyExpanded)}
+            />
+          </Tooltip>
+        </section>
+      </div>
+    </>
+  );
+}
+
+interface ReactionToggleButtonProps extends ComponentPropsWithoutRef<"button"> {
+  userId: string;
+}
+
+export function ReactionToggleButton({
+  userId,
+  ...props
+}: ReactionToggleButtonProps): ReactNode {
+  const { t } = useTranslation();
+  const { raisedHands, toggleRaisedHand, sendReaction, reactions } =
+    useReactions();
+  const [busy, setBusy] = useState(false);
+  const [showReactionsMenu, setShowReactionsMenu] = useState(false);
+  const [errorText, setErrorText] = useState<string>();
+
+  const isHandRaised = !!raisedHands[userId];
+  const canReact = !reactions[userId];
+
+  useEffect(() => {
+    // Clear whenever the reactions menu state changes.
+    setErrorText(undefined);
+  }, [showReactionsMenu]);
+
+  const sendRelation = useCallback(
+    async (reaction: ReactionOption) => {
+      try {
+        setBusy(true);
+        await sendReaction(reaction);
+        setErrorText(undefined);
+        setShowReactionsMenu(false);
+      } catch (ex) {
+        setErrorText(ex instanceof Error ? ex.message : "Unknown error");
+        logger.error("Failed to send reaction", ex);
+      } finally {
+        setBusy(false);
+      }
+    },
+    [sendReaction],
+  );
+
+  const wrappedToggleRaisedHand = useCallback(() => {
+    const toggleHand = async (): Promise<void> => {
+      try {
+        setBusy(true);
+        await toggleRaisedHand();
+        setShowReactionsMenu(false);
+      } catch (ex) {
+        setErrorText(ex instanceof Error ? ex.message : "Unknown error");
+        logger.error("Failed to raise/lower hand", ex);
+      } finally {
+        setBusy(false);
+      }
+    };
+
+    void toggleHand();
+  }, [toggleRaisedHand]);
+
+  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}
+        className={styles.reactionPopupMenuRoot}
+        onDismiss={() => setShowReactionsMenu(false)}
+      >
+        <ReactionPopupMenu
+          errorText={errorText}
+          isHandRaised={isHandRaised}
+          canReact={!busy && canReact}
+          sendReaction={(reaction) => void sendRelation(reaction)}
+          toggleRaisedHand={wrappedToggleRaisedHand}
+        />
+      </Modal>
+    </>
+  );
+}

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

@@ -0,0 +1,163 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Can close reaction dialog 1`] = `
+<div
+  aria-hidden="true"
+  data-aria-hidden="true"
+>
+  <button
+    aria-disabled="false"
+    aria-expanded="true"
+    aria-haspopup="true"
+    aria-labelledby=":r9l:"
+    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
+        clip-rule="evenodd"
+        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm3.536-6.464a1 1 0 0 0-1.415-1.415A2.988 2.988 0 0 1 12 15a2.988 2.988 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+        fill-rule="evenodd"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
+exports[`Can fully expand emoji picker 1`] = `
+<div
+  aria-hidden="true"
+  data-aria-hidden="true"
+>
+  <button
+    aria-disabled="false"
+    aria-expanded="true"
+    aria-haspopup="true"
+    aria-labelledby=":r6c:"
+    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
+        clip-rule="evenodd"
+        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm3.536-6.464a1 1 0 0 0-1.415-1.415A2.988 2.988 0 0 1 12 15a2.988 2.988 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+        fill-rule="evenodd"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
+exports[`Can lower hand 1`] = `
+<div>
+  <button
+    aria-disabled="false"
+    aria-expanded="false"
+    aria-haspopup="true"
+    aria-labelledby=":r36:"
+    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-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
+        clip-rule="evenodd"
+        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm3.536-6.464a1 1 0 0 0-1.415-1.415A2.988 2.988 0 0 1 12 15a2.988 2.988 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+        fill-rule="evenodd"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
+exports[`Can raise hand 1`] = `
+<div>
+  <button
+    aria-disabled="false"
+    aria-expanded="false"
+    aria-haspopup="true"
+    aria-labelledby=":r1j:"
+    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
+        clip-rule="evenodd"
+        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm3.536-6.464a1 1 0 0 0-1.415-1.415A2.988 2.988 0 0 1 12 15a2.988 2.988 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+        fill-rule="evenodd"
+      />
+    </svg>
+  </button>
+</div>
+`;

src/button/index.ts

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

src/config/Config.ts

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { merge } from "lodash";
+import { merge } from "lodash-es";
 
 import { getUrlParams } from "../UrlParams";
 import {
@@ -28,11 +28,11 @@ export class Config {
       const internalInstance = new Config();
       Config.internalInstance = internalInstance;
 
-      Config.internalInstance.initPromise = downloadConfig(
-        "../config.json",
-      ).then((config) => {
-        internalInstance.config = merge({}, DEFAULT_CONFIG, config);
-      });
+      Config.internalInstance.initPromise = downloadConfig("/config.json").then(
+        (config) => {
+          internalInstance.config = merge({}, DEFAULT_CONFIG, config);
+        },
+      );
     }
     return Config.internalInstance.initPromise;
   }
@@ -74,11 +74,7 @@ async function downloadConfig(
   configJsonFilename: string,
 ): Promise<ConfigOptions> {
   const url = new URL(configJsonFilename, window.location.href);
-  url.searchParams.set("cachebuster", Date.now().toString());
-  const res = await fetch(url, {
-    cache: "no-cache",
-    method: "GET",
-  });
+  const res = await fetch(url);
 
   if (!res.ok || res.status === 404 || res.status === 0) {
     // Lack of a config isn't an error, we should just use the defaults.

src/config/ConfigOptions.ts

@@ -96,6 +96,30 @@ export interface ConfigOptions {
    * 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
@@ -121,6 +145,9 @@ 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,

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

@@ -5,18 +5,85 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import i18n from "i18next";
+import i18n, {
+  type BackendModule,
+  type ReadCallback,
+  type ResourceKey,
+} from "i18next";
 import { initReactI18next } from "react-i18next";
 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";
 import { ElementCallOpenTelemetry } from "./otel/otel";
 import { platform } from "./Platform";
 
+// This generates a map of locale names to their URL (based on import.meta.url), which looks like this:
+// {
+//   "../locales/en-GB/app.json": "/whatever/assets/root/locales/en-aabbcc.json",
+//   ...
+// }
+const locales = import.meta.glob<string>("../locales/*/*.json", {
+  query: "?url",
+  import: "default",
+  eager: true,
+});
+
+const getLocaleUrl = (
+  language: string,
+  namespace: string,
+): string | undefined => locales[`../locales/${language}/${namespace}.json`];
+
+const supportedLngs = [
+  ...new Set(
+    Object.keys(locales).map((url) => {
+      // The URLs are of the form ../locales/en-GB/app.json
+      // This extracts the language code from the URL
+      const lang = url.match(/\/([^/]+)\/[^/]+\.json$/)?.[1];
+      if (!lang) {
+        throw new Error(`Could not parse locale URL ${url}`);
+      }
+      return lang;
+    }),
+  ),
+];
+
+// A backend that fetches the locale files from the URLs generated by the glob above
+const Backend = {
+  type: "backend",
+  init(): void {},
+  read(language: string, namespace: string, callback: ReadCallback): void {
+    (async (): Promise<ResourceKey> => {
+      const url = getLocaleUrl(language, namespace);
+      if (!url) {
+        throw new Error(
+          `Namespace ${namespace} for locale ${language} not found`,
+        );
+      }
+
+      const response = await fetch(url, {
+        credentials: "omit",
+        headers: {
+          Accept: "application/json",
+        },
+      });
+
+      if (!response.ok) {
+        throw Error(`Failed to fetch ${url}`);
+      }
+
+      return await response.json();
+    })().then(
+      (data) => callback(null, data),
+      (error) => callback(error, null),
+    );
+  },
+} satisfies BackendModule;
+
 enum LoadState {
   None,
   Loading,
@@ -41,10 +108,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 +128,7 @@ export class Initializer {
       lookup: () => getUrlParams().lang ?? undefined,
     });
 
-    i18n
+    await i18n
       .use(Backend)
       .use(languageDetector)
       .use(initReactI18next)
@@ -65,6 +139,7 @@ export class Initializer {
         nsSeparator: false,
         pluralSeparator: "_",
         contextSeparator: "|",
+        supportedLngs,
         interpolation: {
           escapeValue: false, // React has built-in XSS protections
         },
@@ -74,9 +149,6 @@ export class Initializer {
           order: ["urlFragment", "navigator"],
           caches: [],
         },
-      })
-      .catch((e) => {
-        logger.error("Failed to initialize i18n", e);
       });
 
     // Custom Themeing

src/livekit/MediaDevicesContext.tsx

@@ -24,6 +24,7 @@ import {
   audioInput as audioInputSetting,
   audioOutput as audioOutputSetting,
   videoInput as videoInputSetting,
+  Setting,
 } from "../settings/settings";
 import { isFirefox } from "../Platform";
 
@@ -58,7 +59,7 @@ function useObservableState<T>(
 
 function useMediaDevice(
   kind: MediaDeviceKind,
-  fallbackDevice: string | undefined,
+  setting: Setting<string | undefined>,
   usingNames: boolean,
   alwaysDefault: boolean = false,
 ): MediaDevice {
@@ -84,15 +85,21 @@ function useMediaDevice(
     [kind, requestPermissions],
   );
   const available = useObservableState(deviceObserver, []);
-  const [selectedId, select] = useState(fallbackDevice);
+  const [preferredId, select] = useSetting(setting);
 
   return useMemo(() => {
-    let devId;
-    if (available) {
-      devId = available.some((d) => d.deviceId === selectedId)
-        ? selectedId
-        : available.some((d) => d.deviceId === fallbackDevice)
-          ? fallbackDevice
+    let selectedId: string | undefined = undefined;
+    if (!alwaysDefault && available) {
+      // If the preferred device is available, use it. Or if every available
+      // device ID is falsy, the browser is probably just being paranoid about
+      // fingerprinting and we should still try using the preferred device.
+      // Worst case it is not available and the browser will gracefully fall
+      // back to some other device for us when requesting the media stream.
+      // Otherwise, select the first available device.
+      selectedId =
+        available.some((d) => d.deviceId === preferredId) ||
+        available.every((d) => d.deviceId === "")
+          ? preferredId
           : available.at(0)?.deviceId;
     }
 
@@ -102,10 +109,10 @@ function useMediaDevice(
           // device entries for the exact same device ID; deduplicate them
           [...new Map(available.map((d) => [d.deviceId, d])).values()]
         : [],
-      selectedId: alwaysDefault ? undefined : devId,
+      selectedId,
       select,
     };
-  }, [available, selectedId, fallbackDevice, select, alwaysDefault]);
+  }, [available, preferredId, select, alwaysDefault]);
 }
 
 const deviceStub: MediaDevice = {
@@ -141,36 +148,22 @@ export const MediaDevicesProvider: FC<Props> = ({ children }) => {
   // for ouput devices because the selector wont be shown on FF.
   const useOutputNames = usingNames && !isFirefox();
 
-  const [storedAudioInput, setStoredAudioInput] = useSetting(audioInputSetting);
-  const [storedAudioOutput, setStoredAudioOutput] =
-    useSetting(audioOutputSetting);
-  const [storedVideoInput, setStoredVideoInput] = useSetting(videoInputSetting);
-
-  const audioInput = useMediaDevice("audioinput", storedAudioInput, usingNames);
+  const audioInput = useMediaDevice(
+    "audioinput",
+    audioInputSetting,
+    usingNames,
+  );
   const audioOutput = useMediaDevice(
     "audiooutput",
-    storedAudioOutput,
+    audioOutputSetting,
     useOutputNames,
     alwaysUseDefaultAudio,
   );
-  const videoInput = useMediaDevice("videoinput", storedVideoInput, usingNames);
-
-  useEffect(() => {
-    if (audioInput.selectedId !== undefined)
-      setStoredAudioInput(audioInput.selectedId);
-  }, [setStoredAudioInput, audioInput.selectedId]);
-
-  useEffect(() => {
-    // Skip setting state for ff output. Redundent since it is set to always return 'undefined'
-    // but makes it clear while debugging that this is not happening on FF. + perf ;)
-    if (audioOutput.selectedId !== undefined && !isFirefox())
-      setStoredAudioOutput(audioOutput.selectedId);
-  }, [setStoredAudioOutput, audioOutput.selectedId]);
-
-  useEffect(() => {
-    if (videoInput.selectedId !== undefined)
-      setStoredVideoInput(videoInput.selectedId);
-  }, [setStoredVideoInput, videoInput.selectedId]);
+  const videoInput = useMediaDevice(
+    "videoinput",
+    videoInputSetting,
+    usingNames,
+  );
 
   const startUsingDeviceNames = useCallback(
     () => setNumCallersUsingNames((n) => n + 1),

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.module.css

@@ -1,52 +0,0 @@
-.raisedHandWidget {
-  display: flex;
-  background-color: var(--cpd-color-bg-subtle-primary);
-  border-radius: var(--cpd-radius-pill-effect);
-  color: var(--cpd-color-icon-secondary);
-}
-
-.raisedHandWidget > p {
-  padding: none;
-  margin-top: auto;
-  margin-bottom: auto;
-  width: 4em;
-}
-
-.raisedHandWidgetLarge > p {
-  padding: var(--cpd-space-2x);
-}
-
-.raisedHandLarge {
-  margin: var(--cpd-space-2x);
-  padding: var(--cpd-space-2x);
-  padding-block: var(--cpd-space-2x);
-}
-
-.raisedHand {
-  margin: var(--cpd-space-1x);
-  color: var(--cpd-color-icon-secondary);
-  background-color: var(--cpd-color-icon-secondary);
-  display: flex;
-  align-items: center;
-  border-radius: var(--cpd-radius-pill-effect);
-  user-select: none;
-  overflow: hidden;
-  box-shadow: var(--small-drop-shadow);
-  box-sizing: border-box;
-  max-inline-size: 100%;
-  max-width: fit-content;
-}
-
-.raisedHand > span {
-  width: var(--cpd-space-6x);
-  height: var(--cpd-space-6x);
-  display: inline-block;
-  text-align: center;
-  font-size: 16px;
-}
-
-.raisedHandLarge > span {
-  width: var(--cpd-space-8x);
-  height: var(--cpd-space-8x);
-  font-size: 22px;
-}

src/reactions/RaisedHandIndicator.test.tsx

@@ -33,11 +33,23 @@ describe("RaisedHandIndicator", () => {
     );
     expect(container.firstChild).toMatchSnapshot();
   });
-  test("renders a smaller indicator when minature is specified", () => {
+  test("renders a smaller indicator when miniature is specified", () => {
     const dateTime = new Date();
     const { container } = render(
-      <RaisedHandIndicator raisedHandTime={dateTime} minature showTimer />,
+      <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);
+  });
 });

src/reactions/RaisedHandIndicator.tsx

@@ -5,31 +5,54 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { ReactNode, useEffect, useState } from "react";
-import classNames from "classnames";
-import "@formatjs/intl-durationformat/polyfill";
-import { DurationFormat } from "@formatjs/intl-durationformat";
+import {
+  MouseEventHandler,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useState,
+  useMemo,
+} from "react";
+import { useTranslation } from "react-i18next";
 
-import styles from "./RaisedHandIndicator.module.css";
-
-const durationFormatter = new DurationFormat(undefined, {
-  minutesDisplay: "always",
-  secondsDisplay: "always",
-  hoursDisplay: "auto",
-  style: "digital",
-});
+import { ReactionIndicator } from "./ReactionIndicator";
 
 export function RaisedHandIndicator({
   raisedHandTime,
-  minature,
+  miniature,
   showTimer,
+  onClick,
 }: {
   raisedHandTime?: Date;
-  minature?: boolean;
+  miniature?: boolean;
   showTimer?: boolean;
+  onClick?: () => void;
 }): ReactNode {
+  const { t } = useTranslation();
   const [raisedHandDuration, setRaisedHandDuration] = useState("");
 
+  const durationFormatter = useMemo(
+    () =>
+      new Intl.DurationFormat(undefined, {
+        minutesDisplay: "always",
+        secondsDisplay: "always",
+        hoursDisplay: "auto",
+        style: "digital",
+      }),
+    [],
+  );
+
+  const clickCallback = useCallback<MouseEventHandler<HTMLButtonElement>>(
+    (event) => {
+      if (!onClick) {
+        return;
+      }
+      event.preventDefault();
+      onClick();
+    },
+    [onClick],
+  );
+
   // This effect creates a simple timer effect.
   useEffect(() => {
     if (!raisedHandTime || !showTimer) {
@@ -50,28 +73,32 @@ export function RaisedHandIndicator({
     calculateTime();
     const to = setInterval(calculateTime, 1000);
     return (): void => clearInterval(to);
-  }, [setRaisedHandDuration, raisedHandTime, showTimer]);
+  }, [setRaisedHandDuration, raisedHandTime, showTimer, durationFormatter]);
 
-  if (raisedHandTime) {
+  if (!raisedHandTime) {
+    return;
+  }
+
+  const content = (
+    <ReactionIndicator emoji="✋" miniature={miniature}>
+      {showTimer && <p>{raisedHandDuration}</p>}
+    </ReactionIndicator>
+  );
+
+  if (onClick) {
     return (
-      <div
-        className={classNames(styles.raisedHandWidget, {
-          [styles.raisedHandWidgetLarge]: !minature,
-        })}
+      <button
+        aria-label={t("action.lower_hand")}
+        style={{
+          display: "contents",
+          background: "none",
+        }}
+        onClick={clickCallback}
       >
-        <div
-          className={classNames(styles.raisedHand, {
-            [styles.raisedHandLarge]: !minature,
-          })}
-        >
-          <span role="img" aria-label="raised hand">
-            ✋
-          </span>
-        </div>
-        {showTimer && <p>{raisedHandDuration}</p>}
-      </div>
+        {content}
+      </button>
     );
   }
 
-  return null;
+  return content;
 }

src/reactions/ReactionIndicator.module.css

@@ -0,0 +1,62 @@
+.reactionIndicatorWidget {
+  display: flex;
+  /* background-color: var(--cpd-color-bg-subtle-primary); */
+  border-radius: var(--cpd-radius-pill-effect);
+  box-shadow: 0 0 var(--cpd-space-2x) #00000040;
+  background: "ffffff40";
+  backdrop-filter: blur(10px);
+  outline: var(--cpd-border-width-1) solid var(--cpd-color-alpha-gray-400);
+  outline-offset: calc(-1 * var(--cpd-border-width-1));
+}
+
+.reactionIndicatorWidget > p {
+  padding: none;
+  margin-top: auto;
+  margin-bottom: auto;
+  width: 3em;
+}
+
+.reactionIndicatorWidgetLarge > p {
+  padding: var(--cpd-space-2x);
+  padding-right: var(--cpd-space-4x);
+  padding-left: 0;
+}
+
+.reactionLarge {
+  margin: var(--cpd-space-2x);
+  padding: var(--cpd-space-4x);
+  padding-block: var(--cpd-space-4x);
+}
+
+.reaction {
+  margin: var(--cpd-space-1x);
+  color: var(--cpd-color-icon-secondary);
+  /* background-color: var(--cpd-color-icon-secondary); */
+  display: flex;
+  align-items: center;
+  border-radius: var(--cpd-radius-pill-effect);
+  user-select: none;
+  overflow: hidden;
+  /* box-shadow: var(--small-drop-shadow); */
+  box-sizing: border-box;
+  max-inline-size: 100%;
+  max-width: fit-content;
+  padding: var(--cpd-space-1x);
+  padding-block: var(--cpd-space-1x);
+}
+
+.reaction > span {
+  width: var(--cpd-space-6x);
+  height: var(--cpd-space-6x);
+  display: inline-block;
+  text-align: center;
+  font-size: 1.2em;
+  /* Centralise */
+  line-height: 1.2;
+}
+
+.reactionLarge > span {
+  width: 30px;
+  height: 30px;
+  font-size: 25px;
+}