remove act

.eslintrc.cjs

@@ -37,7 +37,6 @@ 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,4 +23,3 @@ 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,8 +14,6 @@ on:
         required: true
       SENTRY_AUTH_TOKEN:
         required: true
-      CODECOV_TOKEN:
-        required: false
 
 jobs:
   build:
@@ -38,7 +36,6 @@ 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 locales"
+        run: "rm -R public/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 locales"
+        run: "sudo chown runner:docker -R public/locales"
 
       - name: Prettier
         run: yarn prettier:format

.gitignore

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

Dockerfile

@@ -2,3 +2,9 @@ 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,24 +3,17 @@
 [![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
@@ -29,23 +22,17 @@ 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 {
@@ -57,63 +44,28 @@ 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 ("Request to join call"), 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 ("ask to join"), a cannot join error or the join view.
 
-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.
+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.
 
 The configuration is a list of Foci configs:
 
@@ -136,18 +88,13 @@ 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
@@ -165,15 +112,6 @@ 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:
 
 ```
@@ -182,25 +120,25 @@ yarn dev
 
 ### Backend
 
-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:
+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._**
 
-- 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
+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.)
 
-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._**
+```json
+"livekit": {
+  "livekit_service_url": "http://localhost:7881"
+},
+```
 
 Run backend components:
 
 ```
 yarn backend
-# or  for podman-compose
-# podman-compose -f dev-backend-docker-compose.yml up
 ```
 
 ### Test Coverage
@@ -212,8 +150,7 @@ 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 `locales/en-GB/app.json` file:
+1. Run `yarn i18n` to extract the new key and update the translation files. This will add a skeleton entry to the `public/locales/en-GB/app.json` file:
    ```jsonc
    {
        ...
@@ -221,16 +158,14 @@ To add a new translation key you can do these steps:
        ...
    }
    ```
-1. Update the skeleton entry in the `locales/en-GB/app.json` file with
-   the English translation:
-
-```jsonc
+1. Update the skeleton entry in the `public/locales/en-GB/app.json` file with the English translation:
+   ```jsonc
    {
        ...
        "some_new_key": "Some new key",
        ...
    }
-```
+   ```
 
 ## Documentation
 

backend-docker-compose.yml

@@ -0,0 +1,52 @@
+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

@@ -1,51 +0,0 @@
-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

@@ -1,22 +0,0 @@
------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

@@ -1,28 +0,0 @@
------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

@@ -1,40 +0,0 @@
-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

@@ -1,15 +0,0 @@
-{
-  "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,10 +1,13 @@
 {
   "default_server_config": {
     "m.homeserver": {
-      "base_url": "http://synapse.localhost:8008",
-      "server_name": "synapse.localhost"
+      "base_url": "https://call.ems.host",
+      "server_name": "call.ems.host"
     }
   },
+  "livekit": {
+    "livekit_service_url": "http://localhost:7881"
+  },
   "features": {
     "feature_use_device_session_member_events": true
   },

config/nginx.conf

@@ -3,17 +3,23 @@ server {
     server_name  localhost;
 
     root   /app;
-    gzip_static on;
-    gzip_vary on;
 
     location / {
-        try_files $uri $uri/ /index.html;
-        add_header Cache-Control "public, max-age=30, stale-while-revalidate=30";
+        # 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;
     }
 
     # assets can be cached because they have hashed filenames
     location /assets {
-        add_header Cache-Control "public, immutable, max-age=31536000";
+        expires 1w;
+        add_header Cache-Control "public, no-transform";
     }
 
     location /apple-app-site-association {

dev-backend-docker-compose.yml

@@ -1,86 +0,0 @@
-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

i18next-parser.config.ts

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

localazy.json

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

package.json

@@ -17,18 +17,14 @@
     "i18n:check": "i18next --fail-on-warnings --fail-on-update",
     "test": "vitest",
     "test:coverage": "vitest --coverage",
-    "backend": "docker-compose -f dev-backend-docker-compose.yml up"
+    "backend": "docker-compose -f 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",
@@ -51,9 +47,8 @@
     "@types/content-type": "^1.1.5",
     "@types/grecaptcha": "^3.0.9",
     "@types/jsdom": "^21.1.7",
-    "@types/lodash-es": "^4.17.12",
+    "@types/lodash": "^4.14.199",
     "@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",
@@ -62,8 +57,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.9.1",
-    "@vector-im/compound-web": "^7.2.0",
+    "@vector-im/compound-design-tokens": "^1.0.0",
+    "@vector-im/compound-web": "^6.0.0",
     "@vitejs/plugin-basic-ssl": "^1.0.1",
     "@vitejs/plugin-react": "^4.0.1",
     "@vitest/coverage-v8": "^2.0.5",
@@ -84,14 +79,15 @@
     "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-es": "^4.17.21",
+    "lodash": "^4.17.21",
     "loglevel": "^1.9.1",
-    "matrix-js-sdk": "matrix-org/matrix-js-sdk#80582a734684b532585b52cde63ef34dc7d774fa",
-    "matrix-widget-api": "^1.10.0",
+    "matrix-js-sdk": "matrix-org/matrix-js-sdk#623b40177a71a2b719762bebe51528f3d8c8ca9e",
+    "matrix-widget-api": "^1.8.2",
     "normalize.css": "^8.0.1",
     "observable-hooks": "^4.2.3",
     "pako": "^2.0.4",
@@ -111,9 +107,8 @@
     "typescript": "^5.1.6",
     "typescript-eslint-language-service": "^5.0.5",
     "unique-names-generator": "^4.6.0",
-    "vaul": "^1.0.0",
+    "vaul": "^0.9.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/index.html

@@ -3,7 +3,6 @@
   <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"

public/locales/de/app.json

@@ -8,14 +8,9 @@
     "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",
@@ -60,10 +55,8 @@
     "password": "Passwort",
     "preferences": "Einstellungen",
     "profile": "Profil",
-    "reaction": "Reaktion",
-    "reactions": "Reaktionen",
+    "raise_hand": "Hand heben",
     "settings": "Einstellungen",
-    "something_went_wrong": "Etwas ist schief gelaufen",
     "unencrypted": "Nicht verschlüsselt",
     "username": "Benutzername",
     "video": "Video"
@@ -71,6 +64,12 @@
   "crypto_version": "Krypto-Version:{{version}}",
   "device_id": "Geräte-ID: {{id}}",
   "disconnected_banner": "Die Verbindung zum Server wurde getrennt.",
+  "e2ee_encryption_status": {
+    "connecting": "Verbinden...",
+    "key_invalid": "Der Medien-Krypto-Schlüssel für diese Person ist ungültig",
+    "key_missing": "Aktueller Medien-Krypto-Schlüssel für diese Person noch nicht erhalten",
+    "password_invalid": "Diese Person verwendet ein anderes Passwort, sodass Sie nicht mit ihr kommunizieren können"
+  },
   "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": {
@@ -80,8 +79,8 @@
     "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",
+    "knock_reject_body": "Die Mitglieder des Raums haben Deine Beitrittsanfrage abgelehnt.",
+    "knock_reject_heading": "Beitritt nicht erlaubt",
     "reason": "Grund"
   },
   "hangup_button_label": "Anruf beenden",
@@ -99,11 +98,11 @@
   "layout_grid_label": "Raster",
   "layout_spotlight_label": "Fokus",
   "lobby": {
-    "ask_to_join": "Teilnahmeanfrage senden",
+    "ask_to_join": "Beitritt anfragen",
     "join_as_guest": "Als Gast beitreten",
     "join_button": "Anruf beitreten",
     "leave_button": "Zurück zu kürzlichen Anrufen",
-    "waiting_for_invite": "Anfrage gesendet! Warten auf Teilnahmefreigabe …"
+    "waiting_for_invite": "Anfrage gesendet"
   },
   "log_in": "Anmelden",
   "logging_in": "Anmelden …",
@@ -114,7 +113,7 @@
   "matrix_id": "Matrix-ID: {{id}}",
   "microphone_off": "Mikrofon aus",
   "microphone_on": "Mikrofon an",
-  "mute_microphone_button_label": "Mikrofon stumm schalten",
+  "mute_microphone_button_label": "Mikrofon deaktivieren",
   "participant_count_one": "{{count, number}}",
   "participant_count_other": "{{count, number}}",
   "qr_code": "QR-Code",
@@ -142,10 +141,6 @@
   "room_auth_view_eula_caption": "Mit einem Klick auf „Weiter“ akzeptierst du unseren <2>Endbenutzer-Lizenzvertrag (EULA)</2>",
   "screenshare_button_label": "Bildschirm teilen",
   "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",
@@ -158,17 +153,10 @@
     "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.",
-    "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",
+    "preferences_tab_show_hand_raised_timer_description": "Einen Timer anzeigen, wenn ein Teilnehmer seine Hand hebt",
+    "preferences_tab_show_hand_raised_timer_label": "Dauer des Handhebens anzeigen",
     "speaker_device_selection_label": "Lautsprecher"
   },
   "star_rating_input_label_one": "{{count}} Stern",
@@ -182,15 +170,14 @@
   "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 einschalten",
+  "unmute_microphone_button_label": "Mikrofon aktivieren",
   "version": "{{productName}} Version: {{version}}",
   "video_tile": {
     "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",
+    "mute_for_me": "Für mich stummschalten",
     "volume": "Lautstärke"
   }
 }

public/locales/en-GB/app.json

@@ -8,14 +8,9 @@
     "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",
@@ -60,10 +55,8 @@
     "password": "Password",
     "preferences": "Preferences",
     "profile": "Profile",
-    "reaction": "Reaction",
-    "reactions": "Reactions",
+    "raise_hand": "Raise hand",
     "settings": "Settings",
-    "something_went_wrong": "Something went wrong",
     "unencrypted": "Not encrypted",
     "username": "Username",
     "video": "Video"
@@ -71,6 +64,12 @@
   "crypto_version": "Crypto version: {{version}}",
   "device_id": "Device ID: {{id}}",
   "disconnected_banner": "Connectivity to the server has been lost.",
+  "e2ee_encryption_status": {
+    "connecting": "Connecting...",
+    "key_invalid": "The end-to-end encrypted media key for this person is invalid",
+    "key_missing": "You haven't received the current end-to-end encrypted media key for this person yet",
+    "password_invalid": "This person is using a different password so you won't be able to communicate with them"
+  },
   "full_screen_view_description": "<0>Submitting debug logs will help us track down the problem.</0>",
   "full_screen_view_h1": "<0>Oops, something's gone wrong.</0>",
   "group_call_loader": {
@@ -80,8 +79,8 @@
     "call_ended_heading": "Call ended",
     "failed_heading": "Failed to join",
     "failed_text": "Call not found or is not accessible.",
-    "knock_reject_body": "Your request to join was declined.",
-    "knock_reject_heading": "Access denied",
+    "knock_reject_body": "The room members declined your request to join.",
+    "knock_reject_heading": "Not allowed to join",
     "reason": "Reason"
   },
   "hangup_button_label": "End call",
@@ -99,11 +98,11 @@
   "layout_grid_label": "Grid",
   "layout_spotlight_label": "Spotlight",
   "lobby": {
-    "ask_to_join": "Request to join call",
+    "ask_to_join": "Ask 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 permission to join…"
+    "waiting_for_invite": "Request sent"
   },
   "log_in": "Log In",
   "logging_in": "Logging in…",
@@ -142,10 +141,6 @@
   "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",
@@ -158,13 +153,6 @@
     "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",
@@ -190,7 +178,6 @@
     "collapse": "Collapse",
     "expand": "Expand",
     "mute_for_me": "Mute for me",
-    "muted_for_me": "Muted for me",
     "volume": "Volume"
   }
 }

renovate.json

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

src/@types/global.d.ts

@@ -6,7 +6,6 @@ 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 {
@@ -24,9 +23,4 @@ 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 "../../locales/en-GB/app.json";
+import app from "../../public/locales/en-GB/app.json";
 
 declare module "i18next" {
   interface CustomTypeOptions {

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

@@ -1,18 +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 {
-  ElementCallReactionEventType,
-  ECallReactionEventContent,
-} from "../reactions";
-
-// Extend Matrix JS SDK types via Typescript declaration merging to support unspecced event fields and types
-declare module "matrix-js-sdk/src/types" {
-  export interface TimelineEvents {
-    [ElementCallReactionEventType]: ECallReactionEventContent;
-  }
-}

src/ClientContext.tsx

@@ -16,13 +16,19 @@ 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 { ClientEvent, type MatrixClient } from "matrix-js-sdk/src/client";
+import { MatrixError } from "matrix-js-sdk/src/matrix";
+import { WidgetApi } from "matrix-widget-api";
 
-import type { WidgetApi } from "matrix-widget-api";
 import { ErrorView } from "./FullScreenView";
+import { fallbackICEServerAllowed, initClient } from "./utils/matrix";
 import { widget } from "./widget";
 import {
   PosthogAnalytics,
@@ -30,6 +36,7 @@ import {
 } from "./analytics/PosthogAnalytics";
 import { translatedError } from "./TranslatedError";
 import { useEventTarget } from "./useEvents";
+import { Config } from "./config/Config";
 
 declare global {
   interface Window {
@@ -352,7 +359,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
   );
 };
 
-export type InitResult = {
+type InitResult = {
   widgetApi: WidgetApi | null;
   client: MatrixClient;
   passwordlessUser: boolean;
@@ -369,8 +376,50 @@ async function loadClient(): Promise<InitResult | null> {
       passwordlessUser: false,
     };
   } else {
-    const { initSPA } = await import("./utils/spa");
-    return initSPA(loadSession, clearSession);
+    // 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;
+    }
   }
 }
 

src/Modal.module.css

@@ -6,7 +6,6 @@ Please see LICENSE in the repository root for full details.
 */
 
 .modal {
-  --inset-inline: 520px;
   display: flex;
   flex-direction: column;
 }
@@ -36,7 +35,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% - var(--inset-inline)) / 2));
+  inset-inline: max(0px, calc((100% - 520px) / 2));
   max-block-size: 90%;
   border-start-start-radius: var(--border-radius);
   border-start-end-radius: var(--border-radius);

src/Modal.tsx

@@ -27,21 +27,8 @@ 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.
    */
@@ -67,11 +54,8 @@ export interface Props {
  */
 export const Modal: FC<Props> = ({
   title,
-  hideHeader,
   children,
   className,
-  classNameDrawer,
-  classNameModal,
   open,
   onDismiss,
   tabbed,
@@ -100,7 +84,6 @@ export const Modal: FC<Props> = ({
           <Drawer.Content
             className={classNames(
               className,
-              classNameDrawer,
               overlayStyles.overlay,
               styles.modal,
               styles.drawer,
@@ -126,28 +109,6 @@ 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>
@@ -165,7 +126,6 @@ export const Modal: FC<Props> = ({
             <Glass
               className={classNames(
                 className,
-                classNameModal,
                 overlayStyles.overlay,
                 overlayStyles.animate,
                 styles.modal,
@@ -174,10 +134,22 @@ export const Modal: FC<Props> = ({
               )}
             >
               <div className={styles.content}>
-                {!hideHeader ? header : null}
-                {hideHeader ? (
-                  <VisuallyHidden asChild>{titleNode}</VisuallyHidden>
-                ) : null}
+                <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>
                 <div className={styles.body}>{children}</div>
               </div>
             </Glass>

src/Overlay.module.css

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

src/Slider.tsx

@@ -8,7 +8,6 @@ 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";
 
@@ -67,10 +66,7 @@ export const Slider: FC<Props> = ({
       <Track className={styles.track}>
         <Range className={styles.highlight} />
       </Track>
-      {/* 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>
+      <Thumb className={styles.handle} aria-label={label} />
     </Root>
   );
 };

src/__snapshots__/Modal.test.tsx.snap

@@ -39,16 +39,13 @@ exports[`the modal renders as a drawer in mobile viewports 1`] = `
   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"
+  vaul-drawer=""
+  vaul-drawer-direction="bottom"
+  vaul-drawer-visible="true"
 >
   <div
     class="content"

src/button/RaisedHandToggleButton.tsx

@@ -0,0 +1,126 @@
+/*
+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, lowerHand } = 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) {
+        try {
+          setBusy(true);
+          await lowerHand();
+        } 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,
+    rtcSession.room.roomId,
+    userId,
+    lowerHand,
+  ]);
+
+  return (
+    <InnerButton
+      disabled={busy}
+      onClick={toggleRaisedHand}
+      raised={isHandRaised}
+    />
+  );
+}

src/button/ReactionToggleButton.module.css

@@ -1,113 +0,0 @@
-.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

@@ -1,157 +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 { 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

@@ -1,244 +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, 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

@@ -1,163 +0,0 @@
-// 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 "./ReactionToggleButton";
+export * from "./RaisedHandToggleButton";

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-es";
+import { merge } from "lodash";
 
 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,7 +74,11 @@ async function downloadConfig(
   configJsonFilename: string,
 ): Promise<ConfigOptions> {
   const url = new URL(configJsonFilename, window.location.href);
-  const res = await fetch(url);
+  url.searchParams.set("cachebuster", Date.now().toString());
+  const res = await fetch(url, {
+    cache: "no-cache",
+    method: "GET",
+  });
 
   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,30 +96,6 @@ 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

src/index.css

@@ -5,14 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-@layer normalize, compound-legacy, compound;
+/* 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). */
 
-@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");
+@layer normalize, compound-legacy, compound;
 
 @import url("normalize.css/normalize.css") layer(normalize);
 @import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css")
@@ -53,6 +52,94 @@ 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));
@@ -98,6 +185,10 @@ 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", async () => {
+test("initBeforeReact sets font family from URL param", () => {
   window.location.hash = "#?font=DejaVu Sans";
-  await Initializer.initBeforeReact();
+  Initializer.initBeforeReact();
   expect(
     getComputedStyle(document.documentElement).getPropertyValue(
       "--font-family",
@@ -19,9 +19,9 @@ test("initBeforeReact sets font family from URL param", async () => {
   ).toBe('"DejaVu Sans"');
 });
 
-test("initBeforeReact sets font scale from URL param", async () => {
+test("initBeforeReact sets font scale from URL param", () => {
   window.location.hash = "#?fontScale=1.2";
-  await Initializer.initBeforeReact();
+  Initializer.initBeforeReact();
   expect(
     getComputedStyle(document.documentElement).getPropertyValue("--font-scale"),
   ).toBe("1.2");

src/initializer.tsx

@@ -5,85 +5,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import i18n, {
-  type BackendModule,
-  type ReadCallback,
-  type ResourceKey,
-} from "i18next";
+import i18n 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,
@@ -108,17 +41,10 @@ export class Initializer {
     return Initializer.internalInstance?.isInitialized;
   }
 
-  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);
+  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
 
     //i18n
     const languageDetector = new LanguageDetector();
@@ -128,7 +54,7 @@ export class Initializer {
       lookup: () => getUrlParams().lang ?? undefined,
     });
 
-    await i18n
+    i18n
       .use(Backend)
       .use(languageDetector)
       .use(initReactI18next)
@@ -139,7 +65,6 @@ export class Initializer {
         nsSeparator: false,
         pluralSeparator: "_",
         contextSeparator: "|",
-        supportedLngs,
         interpolation: {
           escapeValue: false, // React has built-in XSS protections
         },
@@ -149,6 +74,9 @@ export class Initializer {
           order: ["urlFragment", "navigator"],
           caches: [],
         },
+      })
+      .catch((e) => {
+        logger.error("Failed to initialize i18n", e);
       });
 
     // Custom Themeing

src/main.tsx

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

src/reactions/RaisedHandIndicator.module.css

@@ -0,0 +1,57 @@
+.raisedHandWidget {
+  display: flex;
+  background-color: var(--cpd-color-bg-subtle-primary);
+  border-radius: var(--cpd-radius-pill-effect);
+  color: var(--cpd-color-icon-secondary);
+}
+
+.button {
+  display: contents;
+  background: none;
+}
+
+.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: 1.3em;
+}
+
+.raisedHandLarge > span {
+  width: var(--cpd-space-8x);
+  height: var(--cpd-space-8x);
+  font-size: 1.9em;
+}

src/reactions/RaisedHandIndicator.tsx

@@ -11,11 +11,19 @@ import {
   useCallback,
   useEffect,
   useState,
-  useMemo,
 } from "react";
-import { useTranslation } from "react-i18next";
+import classNames from "classnames";
+import "@formatjs/intl-durationformat/polyfill";
+import { DurationFormat } from "@formatjs/intl-durationformat";
 
-import { ReactionIndicator } from "./ReactionIndicator";
+import styles from "./RaisedHandIndicator.module.css";
+
+const durationFormatter = new DurationFormat(undefined, {
+  minutesDisplay: "always",
+  secondsDisplay: "always",
+  hoursDisplay: "auto",
+  style: "digital",
+});
 
 export function RaisedHandIndicator({
   raisedHandTime,
@@ -28,20 +36,8 @@ export function RaisedHandIndicator({
   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) {
@@ -73,26 +69,36 @@ export function RaisedHandIndicator({
     calculateTime();
     const to = setInterval(calculateTime, 1000);
     return (): void => clearInterval(to);
-  }, [setRaisedHandDuration, raisedHandTime, showTimer, durationFormatter]);
+  }, [setRaisedHandDuration, raisedHandTime, showTimer]);
 
   if (!raisedHandTime) {
     return;
   }
 
   const content = (
-    <ReactionIndicator emoji="✋" miniature={miniature}>
+    <div
+      className={classNames(styles.raisedHandWidget, {
+        [styles.raisedHandWidgetLarge]: !miniature,
+      })}
+    >
+      <div
+        className={classNames(styles.raisedHand, {
+          [styles.raisedHandLarge]: !miniature,
+        })}
+      >
+        <span role="img" aria-label="raised hand">
+          ✋
+        </span>
+      </div>
       {showTimer && <p>{raisedHandDuration}</p>}
-    </ReactionIndicator>
+    </div>
   );
 
   if (onClick) {
     return (
       <button
-        aria-label={t("action.lower_hand")}
-        style={{
-          display: "contents",
-          background: "none",
-        }}
+        aria-label="lower raised hand"
+        className={styles.button}
         onClick={clickCallback}
       >
         {content}

src/reactions/ReactionIndicator.module.css

@@ -1,62 +0,0 @@
-.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;
-}

src/reactions/ReactionIndicator.tsx

@@ -1,41 +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 { PropsWithChildren, ReactNode } from "react";
-import classNames from "classnames";
-import { useTranslation } from "react-i18next";
-
-import styles from "./ReactionIndicator.module.css";
-
-export function ReactionIndicator({
-  emoji,
-  miniature,
-  children,
-}: PropsWithChildren<{
-  miniature?: boolean;
-  emoji: string;
-}>): ReactNode {
-  const { t } = useTranslation();
-  return (
-    <div
-      className={classNames(styles.reactionIndicatorWidget, {
-        [styles.reactionIndicatorWidgetLarge]: !miniature,
-      })}
-    >
-      <div
-        className={classNames(styles.reaction, {
-          [styles.reactionLarge]: !miniature,
-        })}
-      >
-        <span role="img" aria-label={t("common.reaction")}>
-          {emoji}
-        </span>
-      </div>
-      {children}
-    </div>
-  );
-}

src/reactions/__snapshots__/RaisedHandIndicator.test.tsx.snap

@@ -2,13 +2,13 @@
 
 exports[`RaisedHandIndicator > renders a smaller indicator when miniature is specified 1`] = `
 <div
-  class="reactionIndicatorWidget"
+  class="raisedHandWidget"
 >
   <div
-    class="reaction"
+    class="raisedHand"
   >
     <span
-      aria-label="common.reaction"
+      aria-label="raised hand"
       role="img"
     >
       ✋
@@ -22,13 +22,13 @@ exports[`RaisedHandIndicator > renders a smaller indicator when miniature is spe
 
 exports[`RaisedHandIndicator > renders an indicator when a hand has been raised 1`] = `
 <div
-  class="reactionIndicatorWidget reactionIndicatorWidgetLarge"
+  class="raisedHandWidget raisedHandWidgetLarge"
 >
   <div
-    class="reaction reactionLarge"
+    class="raisedHand raisedHandLarge"
   >
     <span
-      aria-label="common.reaction"
+      aria-label="raised hand"
       role="img"
     >
       ✋
@@ -42,13 +42,13 @@ exports[`RaisedHandIndicator > renders an indicator when a hand has been raised
 
 exports[`RaisedHandIndicator > renders an indicator when a hand has been raised with the expected time 1`] = `
 <div
-  class="reactionIndicatorWidget reactionIndicatorWidgetLarge"
+  class="raisedHandWidget raisedHandWidgetLarge"
 >
   <div
-    class="reaction reactionLarge"
+    class="raisedHand raisedHandLarge"
   >
     <span
-      aria-label="common.reaction"
+      aria-label="raised hand"
       role="img"
     >
       ✋

src/reactions/index.ts

@@ -1,183 +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 { RelationType } from "matrix-js-sdk/src/types";
-
-import catSoundOgg from "../sound/reactions/cat.ogg?url";
-import catSoundMp3 from "../sound/reactions/cat.mp3?url";
-import clapSoundOgg from "../sound/reactions/clap.ogg?url";
-import clapSoundMp3 from "../sound/reactions/clap.mp3?url";
-import cricketsSoundOgg from "../sound/reactions/crickets.ogg?url";
-import cricketsSoundMp3 from "../sound/reactions/crickets.mp3?url";
-import dogSoundOgg from "../sound/reactions/dog.ogg?url";
-import dogSoundMp3 from "../sound/reactions/dog.mp3?url";
-import genericSoundOgg from "../sound/reactions/generic.ogg?url";
-import genericSoundMp3 from "../sound/reactions/generic.mp3?url";
-import lightbulbSoundOgg from "../sound/reactions/lightbulb.ogg?url";
-import lightbulbSoundMp3 from "../sound/reactions/lightbulb.mp3?url";
-import partySoundOgg from "../sound/reactions/party.ogg?url";
-import partySoundMp3 from "../sound/reactions/party.mp3?url";
-import deerSoundOgg from "../sound/reactions/deer.ogg?url";
-import deerSoundMp3 from "../sound/reactions/deer.mp3?url";
-import rockSoundOgg from "../sound/reactions/rock.ogg?url";
-import rockSoundMp3 from "../sound/reactions/rock.mp3?url";
-
-export const ElementCallReactionEventType = "io.element.call.reaction";
-
-export interface ReactionOption {
-  /**
-   * The emoji to display. This is always displayed even if no emoji is matched
-   * from `ReactionSet`.
-   *
-   * @note Any excess characters are trimmed from this string.
-   */
-  emoji: string;
-  /**
-   * The name of the emoji. This is the unique key used when looking for a local
-   * effect in our `ReactionSet` array.
-   */
-  name: string;
-  /**
-   * Optional aliases to look for when searching for an emoji in the interface.
-   */
-  alias?: string[];
-  /**
-   * Optional sound to play. An ogg sound must always be provided.
-   * If this sound isn't given, `GenericReaction` is used.
-   */
-  sound?: {
-    mp3?: string;
-    ogg: string;
-  };
-}
-
-export interface ECallReactionEventContent {
-  "m.relates_to": {
-    rel_type: RelationType.Reference;
-    event_id: string;
-  };
-  emoji: string;
-  name: string;
-}
-
-export const GenericReaction: ReactionOption = {
-  name: "generic",
-  emoji: "", // Filled in by user
-  sound: {
-    mp3: genericSoundMp3,
-    ogg: genericSoundOgg,
-  },
-};
-
-export const ReactionsRowSize = 5;
-
-// The first {ReactionsRowSize} reactions are always visible.
-export const ReactionSet: ReactionOption[] = [
-  {
-    emoji: "👍",
-    name: "thumbsup",
-    // TODO: These need to be translated.
-    alias: ["+1", "yes", "thumbs up"],
-  },
-  {
-    emoji: "🎉",
-    name: "party",
-    alias: ["hurray", "success"],
-    sound: {
-      ogg: partySoundOgg,
-      mp3: partySoundMp3,
-    },
-  },
-  {
-    emoji: "👏",
-    name: "clapping",
-    alias: ["celebrate", "success"],
-    sound: {
-      ogg: clapSoundOgg,
-      mp3: clapSoundMp3,
-    },
-  },
-  {
-    emoji: "🐶",
-    name: "dog",
-    alias: ["doggo", "pupper", "woofer", "bark"],
-    sound: {
-      ogg: dogSoundOgg,
-      mp3: dogSoundMp3,
-    },
-  },
-  {
-    emoji: "🐱",
-    name: "cat",
-    alias: ["meow", "kitty"],
-    sound: {
-      ogg: catSoundOgg,
-      mp3: catSoundMp3,
-    },
-  },
-  {
-    emoji: "💡",
-    name: "lightbulb",
-    alias: ["bulb", "light", "idea", "ping"],
-    sound: {
-      ogg: lightbulbSoundOgg,
-      mp3: lightbulbSoundMp3,
-    },
-  },
-  {
-    emoji: "🦗",
-    name: "crickets",
-    alias: ["awkward", "silence"],
-    sound: {
-      ogg: cricketsSoundOgg,
-      mp3: cricketsSoundMp3,
-    },
-  },
-  {
-    emoji: "👎",
-    name: "thumbsdown",
-    alias: ["-1", "no", "thumbs no"],
-  },
-  {
-    emoji: "😵‍💫",
-    name: "dizzy",
-    alias: ["dazed", "confused"],
-  },
-  {
-    emoji: "👌",
-    name: "ok",
-    alias: ["okay", "cool"],
-  },
-  {
-    emoji: "🥰",
-    name: "heart",
-    alias: ["heart", "love", "smiling"],
-  },
-  {
-    emoji: "😄",
-    name: "laugh",
-    alias: ["giggle", "joy", "smiling"],
-  },
-  {
-    emoji: "🦌",
-    name: "deer",
-    alias: ["stag", "doe", "bleat"],
-    sound: {
-      ogg: deerSoundOgg,
-      mp3: deerSoundMp3,
-    },
-  },
-  {
-    emoji: "🤘",
-    name: "rock",
-    alias: ["cool", "horns", "guitar"],
-    sound: {
-      ogg: rockSoundOgg,
-      mp3: rockSoundMp3,
-    },
-  },
-];

src/room/GroupCallLoader.tsx

@@ -0,0 +1,77 @@
+/*
+Copyright 2022-2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { useTranslation } from "react-i18next";
+import { MatrixError } from "matrix-js-sdk/src/matrix";
+import { Heading, Text } from "@vector-im/compound-web";
+
+import { Link } from "../button/Link";
+import {
+  useLoadGroupCall,
+  GroupCallStatus,
+  CallTerminatedMessage,
+} from "./useLoadGroupCall";
+import { ErrorView, FullScreenView } from "../FullScreenView";
+
+interface Props {
+  client: MatrixClient;
+  roomIdOrAlias: string;
+  viaServers: string[];
+  children: (groupCallState: GroupCallStatus) => JSX.Element;
+}
+
+export function GroupCallLoader({
+  client,
+  roomIdOrAlias,
+  viaServers,
+  children,
+}: Props): JSX.Element {
+  const { t } = useTranslation();
+  const groupCallState = useLoadGroupCall(client, roomIdOrAlias, viaServers);
+
+  switch (groupCallState.kind) {
+    case "loaded":
+    case "waitForInvite":
+    case "canKnock":
+      return children(groupCallState);
+    case "loading":
+      return (
+        <FullScreenView>
+          <h1>{t("common.loading")}</h1>
+        </FullScreenView>
+      );
+    case "failed":
+      if ((groupCallState.error as MatrixError).errcode === "M_NOT_FOUND") {
+        return (
+          <FullScreenView>
+            <Heading>{t("group_call_loader.failed_heading")}</Heading>
+            <Text>{t("group_call_loader.failed_text")}</Text>
+            {/* XXX: A 'create it for me' button would be the obvious UX here. Two screens already have
+            dupes of this flow, let's make a common component and put it here. */}
+            <Link to="/">{t("common.home")}</Link>
+          </FullScreenView>
+        );
+      } else if (groupCallState.error instanceof CallTerminatedMessage) {
+        return (
+          <FullScreenView>
+            <Heading>{groupCallState.error.message}</Heading>
+            <Text>{groupCallState.error.messageBody}</Text>
+            {groupCallState.error.reason && (
+              <>
+                {t("group_call_loader.reason")}:
+                <Text size="sm">"{groupCallState.error.reason}"</Text>
+              </>
+            )}
+            <Link to="/">{t("common.home")}</Link>
+          </FullScreenView>
+        );
+      } else {
+        return <ErrorView error={groupCallState.error} />;
+      }
+  }
+}

src/room/GroupCallView.tsx

@@ -177,37 +177,29 @@ export const GroupCallView: FC<Props> = ({
       }
     };
 
-    if (skipLobby) {
-      if (widget) {
-        if (preload) {
-          // In preload mode without lobby we wait for a join action before entering
-          const onJoin = (ev: CustomEvent<IWidgetApiRequest>): void => {
-            (async (): Promise<void> => {
-              await defaultDeviceSetup(
-                ev.detail.data as unknown as JoinCallData,
-              );
-              await enterRTCSession(rtcSession, perParticipantE2EE);
-              widget!.api.transport.reply(ev.detail, {});
-            })().catch((e) => {
-              logger.error("Error joining RTC session", e);
-            });
-          };
-          widget.lazyActions.on(ElementWidgetActions.JoinCall, onJoin);
-          return (): void => {
-            widget!.lazyActions.off(ElementWidgetActions.JoinCall, onJoin);
-          };
-        } else {
-          // No lobby and no preload: we enter the rtc session right away
-          (async (): Promise<void> => {
-            await defaultDeviceSetup({ audioInput: null, videoInput: null });
-            await enterRTCSession(rtcSession, perParticipantE2EE);
-          })().catch((e) => {
-            logger.error("Error joining RTC session", e);
-          });
-        }
-      } else {
-        void enterRTCSession(rtcSession, perParticipantE2EE);
-      }
+    if (widget && preload && skipLobby) {
+      // In preload mode without lobby we wait for a join action before entering
+      const onJoin = (ev: CustomEvent<IWidgetApiRequest>): void => {
+        (async (): Promise<void> => {
+          await defaultDeviceSetup(ev.detail.data as unknown as JoinCallData);
+          await enterRTCSession(rtcSession, perParticipantE2EE);
+          widget!.api.transport.reply(ev.detail, {});
+        })().catch((e) => {
+          logger.error("Error joining RTC session", e);
+        });
+      };
+      widget.lazyActions.on(ElementWidgetActions.JoinCall, onJoin);
+      return (): void => {
+        widget!.lazyActions.off(ElementWidgetActions.JoinCall, onJoin);
+      };
+    } else if (widget && !preload && skipLobby) {
+      // No lobby and no preload: we enter the rtc session right away
+      (async (): Promise<void> => {
+        await defaultDeviceSetup({ audioInput: null, videoInput: null });
+        await enterRTCSession(rtcSession, perParticipantE2EE);
+      })().catch((e) => {
+        logger.error("Error joining RTC session", e);
+      });
     }
   }, [rtcSession, preload, skipLobby, perParticipantE2EE]);
 

src/room/InCallView.module.css

@@ -36,14 +36,12 @@ Please see LICENSE in the repository root for full details.
   inset-block-end: 0;
   z-index: 1;
   display: grid;
-  grid-template-columns: minmax(0, var(--inline-content-inset)) 1fr auto 1fr minmax(
-      0,
-      var(--inline-content-inset)
-    );
-  grid-template-areas: ". logo buttons layout .";
+  grid-template-columns: 1fr auto 1fr;
+  grid-template-areas: "logo buttons layout";
   align-items: center;
   gap: var(--cpd-space-3x);
-  padding-block: var(--cpd-space-10x);
+  padding-block: var(--cpd-space-4x);
+  padding-inline: var(--inline-content-inset);
   background: linear-gradient(
     180deg,
     rgba(0, 0, 0, 0) 0%,
@@ -66,6 +64,7 @@ Please see LICENSE in the repository root for full details.
 .footer.overlay.hidden {
   display: grid;
   opacity: 0;
+  pointer-events: none;
 }
 
 .footer.overlay:has(:focus-visible) {
@@ -84,7 +83,6 @@ Please see LICENSE in the repository root for full details.
 
 .buttons {
   grid-area: buttons;
-  justify-self: center;
   display: flex;
   gap: var(--cpd-space-3x);
 }
@@ -94,52 +92,18 @@ Please see LICENSE in the repository root for full details.
   justify-self: end;
 }
 
-@media (max-width: 660px) {
-  .footer {
-    grid-template-areas: ". buttons buttons buttons .";
-  }
-
-  .logo {
-    display: none;
-  }
-
-  .layout {
-    display: none !important;
-  }
-}
-
-@media (max-width: 370px) {
-  .raiseHand {
-    display: none;
-  }
-}
-
-@media (max-width: 340px) {
-  .invite,
-  .switchCamera,
-  .shareScreen {
-    display: none;
-  }
-
-  @media (max-height: 400px) {
-    .footer {
-      display: none;
-    }
-  }
-}
-
-@media (max-height: 400px) {
-  .footer {
-    padding-block: var(--cpd-space-4x);
-  }
-}
-
-@media (max-height: 800px) {
+@media (min-height: 400px) {
   .footer {
     padding-block: var(--cpd-space-8x);
   }
 }
 
+@media (min-height: 800px) {
+  .footer {
+    padding-block: var(--cpd-space-10x);
+  }
+}
+
 @media (min-width: 800px) {
   .buttons {
     gap: var(--cpd-space-4x);

src/room/InCallView.tsx

@@ -41,7 +41,7 @@ import {
   VideoButton,
   ShareScreenButton,
   SettingsButton,
-  ReactionToggleButton,
+  RaiseHandToggleButton,
   SwitchCameraButton,
 } from "../button";
 import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
@@ -83,10 +83,7 @@ import { GridTileViewModel, TileViewModel } from "../state/TileViewModel";
 import { ReactionsProvider, useReactions } from "../useReactions";
 import handSoundOgg from "../sound/raise_hand.ogg?url";
 import handSoundMp3 from "../sound/raise_hand.mp3?url";
-import { ReactionsAudioRenderer } from "./ReactionAudioRenderer";
 import { useSwitchCamera } from "./useSwitchCamera";
-import { soundEffectVolumeSetting, useSetting } from "../settings/settings";
-import { ReactionsOverlay } from "./ReactionsOverlay";
 
 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 
@@ -182,9 +179,7 @@ export const InCallView: FC<InCallViewProps> = ({
   connState,
   onShareClick,
 }) => {
-  const [soundEffectVolume] = useSetting(soundEffectVolumeSetting);
-  const { supportsReactions, raisedHands, sendReaction, toggleRaisedHand } =
-    useReactions();
+  const { supportsReactions, raisedHands } = useReactions();
   const raisedHandCount = useMemo(
     () => Object.keys(raisedHands).length,
     [raisedHands],
@@ -203,6 +198,7 @@ export const InCallView: FC<InCallViewProps> = ({
 
   const containerRef1 = useRef<HTMLDivElement | null>(null);
   const [containerRef2, bounds] = useMeasure();
+  const boundsValid = bounds.height > 0;
   // Merge the refs so they can attach to the same element
   const containerRef = useMergedRefs(containerRef1, containerRef2);
 
@@ -228,10 +224,12 @@ export const InCallView: FC<InCallViewProps> = ({
     toggleMicrophone,
     toggleCamera,
     (muted) => muteStates.audio.setEnabled?.(!muted),
-    (reaction) => void sendReaction(reaction),
-    () => void toggleRaisedHand(),
   );
 
+  const mobile = boundsValid && bounds.width <= 660;
+  const reducedControls = boundsValid && bounds.width <= 340;
+  const noControls = reducedControls && bounds.height <= 400;
+
   const windowMode = useObservableEagerState(vm.windowMode);
   const layout = useObservableEagerState(vm.layout);
   const gridMode = useObservableEagerState(vm.gridMode);
@@ -253,22 +251,12 @@ export const InCallView: FC<InCallViewProps> = ({
   }, [vm]);
   const onTouchCancel = useCallback(() => (touchStart.current = null), []);
 
-  // We also need to tell the footer controls to prevent touch events from
-  // bubbling up, or else the footer will be dismissed before a click/change
-  // event can be registered on the control
-  const onControlsTouchEnd = useCallback(
-    (e: TouchEvent) => {
-      // Somehow applying pointer-events: none to the controls when the footer
-      // is hidden is not enough to stop clicks from happening as the footer
-      // becomes visible, so we check manually whether the footer is shown
-      if (showFooter) {
-        e.stopPropagation();
-        vm.tapControls();
-      } else {
-        e.preventDefault();
-      }
-    },
-    [vm, showFooter],
+  // We also need to tell the layout toggle to prevent touch events from
+  // bubbling up, or else the controls will be dismissed before a change event
+  // can be registered on the toggle
+  const onLayoutToggleTouchEnd = useCallback(
+    (e: TouchEvent) => e.stopPropagation(),
+    [],
   );
 
   const onPointerMove = useCallback(
@@ -346,17 +334,11 @@ export const InCallView: FC<InCallViewProps> = ({
       return;
     }
     if (previousRaisedHandCount < raisedHandCount) {
-      handRaisePlayer.current.volume = soundEffectVolume;
       handRaisePlayer.current.play().catch((ex) => {
         logger.warn("Failed to play raise hand sound", ex);
       });
     }
-  }, [
-    raisedHandCount,
-    handRaisePlayer,
-    previousRaisedHandCount,
-    soundEffectVolume,
-  ]);
+  }, [raisedHandCount, handRaisePlayer, previousRaisedHandCount]);
 
   useEffect(() => {
     widget?.api.transport
@@ -529,105 +511,95 @@ export const InCallView: FC<InCallViewProps> = ({
       .catch(logger.error);
   }, [localParticipant, isScreenShareEnabled]);
 
-  const buttons: JSX.Element[] = [];
+  let footer: JSX.Element | null;
 
-  buttons.push(
-    <MicButton
-      key="audio"
-      muted={!muteStates.audio.enabled}
-      onClick={toggleMicrophone}
-      onTouchEnd={onControlsTouchEnd}
-      disabled={muteStates.audio.setEnabled === null}
-      data-testid="incall_mute"
-    />,
-    <VideoButton
-      key="video"
-      muted={!muteStates.video.enabled}
-      onClick={toggleCamera}
-      onTouchEnd={onControlsTouchEnd}
-      disabled={muteStates.video.setEnabled === null}
-      data-testid="incall_videomute"
-    />,
-  );
-  if (switchCamera !== null)
-    buttons.push(
-      <SwitchCameraButton
-        key="switch_camera"
-        className={styles.switchCamera}
-        onClick={switchCamera}
-        onTouchEnd={onControlsTouchEnd}
-      />,
-    );
-  if (canScreenshare && !hideScreensharing) {
-    buttons.push(
-      <ShareScreenButton
-        key="share_screen"
-        className={styles.shareScreen}
-        enabled={isScreenShareEnabled}
-        onClick={toggleScreensharing}
-        onTouchEnd={onControlsTouchEnd}
-        data-testid="incall_screenshare"
-      />,
-    );
-  }
-  if (supportsReactions) {
-    buttons.push(
-      <ReactionToggleButton
-        key="raise_hand"
-        className={styles.raiseHand}
-        userId={client.getUserId()!}
-        onTouchEnd={onControlsTouchEnd}
-      />,
-    );
-  }
-  if (layout.type !== "pip")
-    buttons.push(
-      <SettingsButton
-        key="settings"
-        onClick={openSettings}
-        onTouchEnd={onControlsTouchEnd}
-      />,
-    );
+  if (noControls) {
+    footer = null;
+  } else {
+    const buttons: JSX.Element[] = [];
 
-  buttons.push(
-    <EndCallButton
-      key="end_call"
-      onClick={function (): void {
-        onLeave();
-      }}
-      onTouchEnd={onControlsTouchEnd}
-      data-testid="incall_leave"
-    />,
-  );
-  const footer = (
-    <div
-      ref={footerRef}
-      className={classNames(styles.footer, {
-        [styles.overlay]: windowMode === "flat",
-        [styles.hidden]: !showFooter || (!showControls && hideHeader),
-      })}
-    >
-      {!hideHeader && (
-        <div className={styles.logo}>
-          <LogoMark width={24} height={24} aria-hidden />
-          <LogoType
-            width={80}
-            height={11}
-            aria-label={import.meta.env.VITE_PRODUCT_NAME || "Element Call"}
+    buttons.push(
+      <MicButton
+        key="audio"
+        muted={!muteStates.audio.enabled}
+        onClick={toggleMicrophone}
+        disabled={muteStates.audio.setEnabled === null}
+        data-testid="incall_mute"
+      />,
+      <VideoButton
+        key="video"
+        muted={!muteStates.video.enabled}
+        onClick={toggleCamera}
+        disabled={muteStates.video.setEnabled === null}
+        data-testid="incall_videomute"
+      />,
+    );
+    if (!reducedControls) {
+      if (switchCamera !== null)
+        buttons.push(
+          <SwitchCameraButton key="switch_camera" onClick={switchCamera} />,
+        );
+      if (canScreenshare && !hideScreensharing) {
+        buttons.push(
+          <ShareScreenButton
+            key="share_screen"
+            enabled={isScreenShareEnabled}
+            onClick={toggleScreensharing}
+            data-testid="incall_screenshare"
+          />,
+        );
+      }
+      if (supportsReactions) {
+        buttons.push(
+          <RaiseHandToggleButton
+            client={client}
+            rtcSession={rtcSession}
+            key="4"
+          />,
+        );
+      }
+      buttons.push(<SettingsButton key="settings" onClick={openSettings} />);
+    }
+
+    buttons.push(
+      <EndCallButton
+        key="end_call"
+        onClick={function (): void {
+          onLeave();
+        }}
+        data-testid="incall_leave"
+      />,
+    );
+    footer = (
+      <div
+        ref={footerRef}
+        className={classNames(styles.footer, {
+          [styles.overlay]: windowMode === "flat",
+          [styles.hidden]: !showFooter || (!showControls && hideHeader),
+        })}
+      >
+        {!mobile && !hideHeader && (
+          <div className={styles.logo}>
+            <LogoMark width={24} height={24} aria-hidden />
+            <LogoType
+              width={80}
+              height={11}
+              aria-label={import.meta.env.VITE_PRODUCT_NAME || "Element Call"}
+            />
+          </div>
+        )}
+        {showControls && <div className={styles.buttons}>{buttons}</div>}
+        {!mobile && showControls && (
+          <LayoutToggle
+            className={styles.layout}
+            layout={gridMode}
+            setLayout={setGridMode}
+            onTouchEnd={onLayoutToggleTouchEnd}
           />
-        </div>
-      )}
-      {showControls && <div className={styles.buttons}>{buttons}</div>}
-      {showControls && (
-        <LayoutToggle
-          className={styles.layout}
-          layout={gridMode}
-          setLayout={setGridMode}
-          onTouchEnd={onControlsTouchEnd}
-        />
-      )}
-    </div>
-  );
+        )}
+      </div>
+    );
+  }
 
   return (
     <div
@@ -659,37 +631,28 @@ export const InCallView: FC<InCallViewProps> = ({
               />
             </LeftNav>
             <RightNav>
-              {showControls && onShareClick !== null && (
-                <InviteButton
-                  className={styles.invite}
-                  onClick={onShareClick}
-                />
+              {!reducedControls && showControls && onShareClick !== null && (
+                <InviteButton onClick={onShareClick} />
               )}
             </RightNav>
           </Header>
         ))}
       <RoomAudioRenderer />
       {renderContent()}
-      <audio ref={handRaisePlayer} preload="auto" hidden>
+      <audio ref={handRaisePlayer} hidden>
         <source src={handSoundOgg} type="audio/ogg; codecs=vorbis" />
         <source src={handSoundMp3} type="audio/mpeg" />
       </audio>
-      <ReactionsAudioRenderer />
-      <ReactionsOverlay />
       {footer}
-      {layout.type !== "pip" && (
-        <>
-          <RageshakeRequestModal {...rageshakeRequestModalProps} />
-          <SettingsModal
-            client={client}
-            roomId={rtcSession.room.roomId}
-            open={settingsModalOpen}
-            onDismiss={closeSettings}
-            tab={settingsTab}
-            onTabChange={setSettingsTab}
-          />
-        </>
-      )}
+      {!noControls && <RageshakeRequestModal {...rageshakeRequestModalProps} />}
+      <SettingsModal
+        client={client}
+        roomId={rtcSession.room.roomId}
+        open={settingsModalOpen}
+        onDismiss={closeSettings}
+        tab={settingsTab}
+        onTabChange={setSettingsTab}
+      />
     </div>
   );
 };

src/room/ReactionAudioRenderer.test.tsx

@@ -1,181 +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 { render } from "@testing-library/react";
-import { afterAll, expect, test } from "vitest";
-import { TooltipProvider } from "@vector-im/compound-web";
-import { act, ReactNode } from "react";
-
-import {
-  MockRoom,
-  MockRTCSession,
-  TestReactionsWrapper,
-} from "../utils/testReactions";
-import { ReactionsAudioRenderer } from "./ReactionAudioRenderer";
-import { GenericReaction, ReactionSet } from "../reactions";
-import {
-  playReactionsSound,
-  soundEffectVolumeSetting,
-} from "../settings/settings";
-
-const memberUserIdAlice = "@alice:example.org";
-const memberUserIdBob = "@bob:example.org";
-const memberUserIdCharlie = "@charlie:example.org";
-const memberEventAlice = "$membership-alice:example.org";
-const memberEventBob = "$membership-bob:example.org";
-const memberEventCharlie = "$membership-charlie:example.org";
-
-const membership: Record<string, string> = {
-  [memberEventAlice]: memberUserIdAlice,
-  [memberEventBob]: memberUserIdBob,
-  [memberEventCharlie]: memberUserIdCharlie,
-};
-
-function TestComponent({
-  rtcSession,
-}: {
-  rtcSession: MockRTCSession;
-}): ReactNode {
-  return (
-    <TooltipProvider>
-      <TestReactionsWrapper rtcSession={rtcSession}>
-        <ReactionsAudioRenderer />
-      </TestReactionsWrapper>
-    </TooltipProvider>
-  );
-}
-
-const originalPlayFn = window.HTMLMediaElement.prototype.play;
-afterAll(() => {
-  playReactionsSound.setValue(playReactionsSound.defaultValue);
-  soundEffectVolumeSetting.setValue(soundEffectVolumeSetting.defaultValue);
-  window.HTMLMediaElement.prototype.play = originalPlayFn;
-});
-
-test("preloads all audio elements", () => {
-  playReactionsSound.setValue(true);
-  const rtcSession = new MockRTCSession(
-    new MockRoom(memberUserIdAlice),
-    membership,
-  );
-  const { container } = render(<TestComponent rtcSession={rtcSession} />);
-  expect(container.getElementsByTagName("audio")).toHaveLength(
-    // All reactions plus the generic sound
-    ReactionSet.filter((r) => r.sound).length + 1,
-  );
-});
-
-test("loads no audio elements when disabled in settings", () => {
-  playReactionsSound.setValue(false);
-  const rtcSession = new MockRTCSession(
-    new MockRoom(memberUserIdAlice),
-    membership,
-  );
-  const { container } = render(<TestComponent rtcSession={rtcSession} />);
-  expect(container.getElementsByTagName("audio")).toHaveLength(0);
-});
-
-test("will play an audio sound when there is a reaction", () => {
-  const audioIsPlaying: string[] = [];
-  window.HTMLMediaElement.prototype.play = async function (): Promise<void> {
-    audioIsPlaying.push((this.children[0] as HTMLSourceElement).src);
-    return Promise.resolve();
-  };
-  playReactionsSound.setValue(true);
-  const room = new MockRoom(memberUserIdAlice);
-  const rtcSession = new MockRTCSession(room, membership);
-  render(<TestComponent rtcSession={rtcSession} />);
-
-  // Find the first reaction with a sound effect
-  const chosenReaction = ReactionSet.find((r) => !!r.sound);
-  if (!chosenReaction) {
-    throw Error(
-      "No reactions have sounds configured, this test cannot succeed",
-    );
-  }
-  act(() => {
-    room.testSendReaction(memberEventAlice, chosenReaction, membership);
-  });
-  expect(audioIsPlaying).toHaveLength(1);
-  expect(audioIsPlaying[0]).toContain(chosenReaction.sound?.ogg);
-});
-
-test("will play the generic audio sound when there is soundless reaction", () => {
-  const audioIsPlaying: string[] = [];
-  window.HTMLMediaElement.prototype.play = async function (): Promise<void> {
-    audioIsPlaying.push((this.children[0] as HTMLSourceElement).src);
-    return Promise.resolve();
-  };
-  playReactionsSound.setValue(true);
-  const room = new MockRoom(memberUserIdAlice);
-  const rtcSession = new MockRTCSession(room, membership);
-  render(<TestComponent rtcSession={rtcSession} />);
-
-  // Find the first reaction with a sound effect
-  const chosenReaction = ReactionSet.find((r) => !r.sound);
-  if (!chosenReaction) {
-    throw Error(
-      "No reactions have sounds configured, this test cannot succeed",
-    );
-  }
-  act(() => {
-    room.testSendReaction(memberEventAlice, chosenReaction, membership);
-  });
-  expect(audioIsPlaying).toHaveLength(1);
-  expect(audioIsPlaying[0]).toContain(GenericReaction.sound?.ogg);
-});
-
-test("will play an audio sound with the correct volume", () => {
-  playReactionsSound.setValue(true);
-  soundEffectVolumeSetting.setValue(0.5);
-  const room = new MockRoom(memberUserIdAlice);
-  const rtcSession = new MockRTCSession(room, membership);
-  const { getByTestId } = render(<TestComponent rtcSession={rtcSession} />);
-
-  // Find the first reaction with a sound effect
-  const chosenReaction = ReactionSet.find((r) => !!r.sound);
-  if (!chosenReaction) {
-    throw Error(
-      "No reactions have sounds configured, this test cannot succeed",
-    );
-  }
-  act(() => {
-    room.testSendReaction(memberEventAlice, chosenReaction, membership);
-  });
-  expect((getByTestId(chosenReaction.name) as HTMLAudioElement).volume).toEqual(
-    0.5,
-  );
-});
-
-test("will play multiple audio sounds when there are multiple different reactions", () => {
-  const audioIsPlaying: string[] = [];
-  window.HTMLMediaElement.prototype.play = async function (): Promise<void> {
-    audioIsPlaying.push((this.children[0] as HTMLSourceElement).src);
-    return Promise.resolve();
-  };
-  playReactionsSound.setValue(true);
-
-  const room = new MockRoom(memberUserIdAlice);
-  const rtcSession = new MockRTCSession(room, membership);
-  render(<TestComponent rtcSession={rtcSession} />);
-
-  // Find the first reaction with a sound effect
-  const [reaction1, reaction2] = ReactionSet.filter((r) => !!r.sound);
-  if (!reaction1 || !reaction2) {
-    throw Error(
-      "No reactions have sounds configured, this test cannot succeed",
-    );
-  }
-  act(() => {
-    room.testSendReaction(memberEventAlice, reaction1, membership);
-    room.testSendReaction(memberEventBob, reaction2, membership);
-    room.testSendReaction(memberEventCharlie, reaction1, membership);
-  });
-  expect(audioIsPlaying).toHaveLength(2);
-  expect(audioIsPlaying[0]).toContain(reaction1.sound?.ogg);
-  expect(audioIsPlaying[1]).toContain(reaction2.sound?.ogg);
-});

src/room/ReactionAudioRenderer.tsx

@@ -1,74 +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 { ReactNode, useEffect, useRef } from "react";
-
-import { useReactions } from "../useReactions";
-import {
-  playReactionsSound,
-  soundEffectVolumeSetting as effectSoundVolumeSetting,
-  useSetting,
-} from "../settings/settings";
-import { GenericReaction, ReactionSet } from "../reactions";
-
-export function ReactionsAudioRenderer(): ReactNode {
-  const { reactions } = useReactions();
-  const [shouldPlay] = useSetting(playReactionsSound);
-  const [effectSoundVolume] = useSetting(effectSoundVolumeSetting);
-  const audioElements = useRef<Record<string, HTMLAudioElement | null>>({});
-
-  useEffect(() => {
-    if (!audioElements.current) {
-      return;
-    }
-
-    if (!shouldPlay) {
-      return;
-    }
-    for (const reactionName of new Set(
-      Object.values(reactions).map((r) => r.name),
-    )) {
-      const audioElement =
-        audioElements.current[reactionName] ?? audioElements.current.generic;
-      if (audioElement?.paused) {
-        audioElement.volume = effectSoundVolume;
-        void audioElement.play();
-      }
-    }
-  }, [audioElements, shouldPlay, reactions, effectSoundVolume]);
-
-  // Do not render any audio elements if playback is disabled. Will save
-  // audio file fetches.
-  if (!shouldPlay) {
-    return null;
-  }
-
-  // NOTE: We load all audio elements ahead of time to allow the cache
-  // to be populated, rather than risk a cache miss and have the audio
-  // be delayed.
-  return (
-    <>
-      {[GenericReaction, ...ReactionSet].map(
-        (r) =>
-          r.sound && (
-            <audio
-              ref={(el) => (audioElements.current[r.name] = el)}
-              data-testid={r.name}
-              key={r.name}
-              preload="auto"
-              hidden
-            >
-              <source src={r.sound.ogg} type="audio/ogg; codecs=vorbis" />
-              {r.sound.mp3 ? (
-                <source src={r.sound.mp3} type="audio/mpeg" />
-              ) : null}
-            </audio>
-          ),
-      )}
-    </>
-  );
-}

src/room/ReactionsOverlay.module.css

@@ -1,54 +0,0 @@
-.container {
-  position: absolute;
-  display: inline;
-  z-index: 2;
-  pointer-events: none;
-  width: 100vw;
-  height: 100vh;
-  left: 0;
-  top: 0;
-}
-
-.reaction {
-  font-size: 32pt;
-  /* Reactions are "active" for 3 seconds (as per REACTION_ACTIVE_TIME_MS), give a bit more time for it to fade out. */
-  animation-duration: 4s;
-  animation-name: reaction-up;
-  width: fit-content;
-  position: relative;
-  top: 80vh;
-}
-
-@keyframes reaction-up {
-  from {
-    opacity: 1;
-    translate: 0 0;
-    scale: 200%;
-    top: 80vh;
-  }
-
-  to {
-    top: 0;
-    opacity: 0;
-    scale: 100%;
-  }
-}
-
-@media (prefers-reduced-motion) {
-  @keyframes reaction-up-reduced {
-    from {
-      opacity: 1;
-    }
-
-    to {
-      opacity: 0;
-    }
-  }
-
-  .reaction {
-    font-size: 48pt;
-    animation-name: reaction-up-reduced;
-    top: calc(-50vh + (48pt / 2));
-    left: calc(50vw - (48pt / 2)) !important;
-  }
-}

src/room/ReactionsOverlay.test.tsx

@@ -1,120 +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 { render } from "@testing-library/react";
-import { expect, test } from "vitest";
-import { TooltipProvider } from "@vector-im/compound-web";
-import { act, ReactNode } from "react";
-import { afterEach } from "node:test";
-
-import {
-  MockRoom,
-  MockRTCSession,
-  TestReactionsWrapper,
-} from "../utils/testReactions";
-import { showReactions } from "../settings/settings";
-import { ReactionsOverlay } from "./ReactionsOverlay";
-import { ReactionSet } from "../reactions";
-
-const memberUserIdAlice = "@alice:example.org";
-const memberUserIdBob = "@bob:example.org";
-const memberUserIdCharlie = "@charlie:example.org";
-const memberEventAlice = "$membership-alice:example.org";
-const memberEventBob = "$membership-bob:example.org";
-const memberEventCharlie = "$membership-charlie:example.org";
-
-const membership: Record<string, string> = {
-  [memberEventAlice]: memberUserIdAlice,
-  [memberEventBob]: memberUserIdBob,
-  [memberEventCharlie]: memberUserIdCharlie,
-};
-
-function TestComponent({
-  rtcSession,
-}: {
-  rtcSession: MockRTCSession;
-}): ReactNode {
-  return (
-    <TooltipProvider>
-      <TestReactionsWrapper rtcSession={rtcSession}>
-        <ReactionsOverlay />
-      </TestReactionsWrapper>
-    </TooltipProvider>
-  );
-}
-
-afterEach(() => {
-  showReactions.setValue(showReactions.defaultValue);
-});
-
-test("defaults to showing no reactions", () => {
-  showReactions.setValue(true);
-  const rtcSession = new MockRTCSession(
-    new MockRoom(memberUserIdAlice),
-    membership,
-  );
-  const { container } = render(<TestComponent rtcSession={rtcSession} />);
-  expect(container.getElementsByTagName("span")).toHaveLength(0);
-});
-
-test("shows a reaction when sent", () => {
-  showReactions.setValue(true);
-  const reaction = ReactionSet[0];
-  const room = new MockRoom(memberUserIdAlice);
-  const rtcSession = new MockRTCSession(room, membership);
-  const { getByRole } = render(<TestComponent rtcSession={rtcSession} />);
-  act(() => {
-    room.testSendReaction(memberEventAlice, reaction, membership);
-  });
-  const span = getByRole("presentation");
-  expect(getByRole("presentation")).toBeTruthy();
-  expect(span.innerHTML).toEqual(reaction.emoji);
-});
-
-test("shows two of the same reaction when sent", () => {
-  showReactions.setValue(true);
-  const reaction = ReactionSet[0];
-  const room = new MockRoom(memberUserIdAlice);
-  const rtcSession = new MockRTCSession(room, membership);
-  const { getAllByRole } = render(<TestComponent rtcSession={rtcSession} />);
-  act(() => {
-    room.testSendReaction(memberEventAlice, reaction, membership);
-  });
-  act(() => {
-    room.testSendReaction(memberEventBob, reaction, membership);
-  });
-  expect(getAllByRole("presentation")).toHaveLength(2);
-});
-
-test("shows two different reactions when sent", () => {
-  showReactions.setValue(true);
-  const room = new MockRoom(memberUserIdAlice);
-  const rtcSession = new MockRTCSession(room, membership);
-  const [reactionA, reactionB] = ReactionSet;
-  const { getAllByRole } = render(<TestComponent rtcSession={rtcSession} />);
-  act(() => {
-    room.testSendReaction(memberEventAlice, reactionA, membership);
-  });
-  act(() => {
-    room.testSendReaction(memberEventBob, reactionB, membership);
-  });
-  const [reactionElementA, reactionElementB] = getAllByRole("presentation");
-  expect(reactionElementA.innerHTML).toEqual(reactionA.emoji);
-  expect(reactionElementB.innerHTML).toEqual(reactionB.emoji);
-});
-
-test("hides reactions when reaction animations are disabled", () => {
-  showReactions.setValue(false);
-  const reaction = ReactionSet[0];
-  const room = new MockRoom(memberUserIdAlice);
-  const rtcSession = new MockRTCSession(room, membership);
-  act(() => {
-    room.testSendReaction(memberEventAlice, reaction, membership);
-  });
-  const { container } = render(<TestComponent rtcSession={rtcSession} />);
-  expect(container.getElementsByTagName("span")).toHaveLength(0);
-});

src/room/ReactionsOverlay.tsx

@@ -1,50 +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 { ReactNode, useMemo } from "react";
-
-import { useReactions } from "../useReactions";
-import {
-  showReactions as showReactionsSetting,
-  useSetting,
-} from "../settings/settings";
-import styles from "./ReactionsOverlay.module.css";
-
-export function ReactionsOverlay(): ReactNode {
-  const { reactions } = useReactions();
-  const [showReactions] = useSetting(showReactionsSetting);
-  const reactionsIcons = useMemo(
-    () =>
-      showReactions
-        ? Object.entries(reactions).map(([sender, { emoji }]) => ({
-            sender,
-            emoji,
-            startX: Math.ceil(Math.random() * 80) + 10,
-          }))
-        : [],
-    [showReactions, reactions],
-  );
-
-  return (
-    <div className={styles.container}>
-      {reactionsIcons.map(({ sender, emoji, startX }) => (
-        <span
-          // Reactions effects are considered presentation elements. The reaction
-          // is also present on the sender's tile, which assistive technology can
-          // read from instead.
-          role="presentation"
-          style={{ left: `${startX}vw` }}
-          className={styles.reaction}
-          // A sender can only send one emoji at a time.
-          key={sender}
-        >
-          {emoji}
-        </span>
-      ))}
-    </div>
-  );
-}

src/room/RoomPage.tsx

@@ -5,16 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, useEffect, useState, ReactNode, useRef } from "react";
+import { FC, useEffect, useState, useCallback, ReactNode } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import { useTranslation } from "react-i18next";
 import { CheckIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
-import { MatrixError } from "matrix-js-sdk/src/http-api";
-import { Heading, Text } from "@vector-im/compound-web";
 
 import { useClientLegacy } from "../ClientContext";
-import { ErrorView, FullScreenView, LoadingView } from "../FullScreenView";
+import { ErrorView, LoadingView } from "../FullScreenView";
 import { RoomAuthView } from "./RoomAuthView";
+import { GroupCallLoader } from "./GroupCallLoader";
 import { GroupCallView } from "./GroupCallView";
 import { useRoomIdentifier, useUrlParams } from "../UrlParams";
 import { useRegisterPasswordlessUser } from "../auth/useRegisterPasswordlessUser";
@@ -22,14 +21,13 @@ import { HomePage } from "../home/HomePage";
 import { platform } from "../Platform";
 import { AppSelectionModal } from "./AppSelectionModal";
 import { widget } from "../widget";
-import { CallTerminatedMessage, useLoadGroupCall } from "./useLoadGroupCall";
+import { GroupCallStatus } from "./useLoadGroupCall";
 import { LobbyView } from "./LobbyView";
 import { E2eeType } from "../e2ee/e2eeType";
 import { useProfile } from "../profile/useProfile";
 import { useMuteStates } from "./MuteStates";
 import { useOptInAnalytics } from "../settings/settings";
 import { Config } from "../config/Config";
-import { Link } from "../button/Link";
 
 export const RoomPage: FC = () => {
   const {
@@ -55,7 +53,6 @@ export const RoomPage: FC = () => {
     useClientLegacy();
   const { avatarUrl, displayName: userDisplayName } = useProfile(client);
 
-  const groupCallState = useLoadGroupCall(client, roomIdOrAlias, viaServers);
   const muteStates = useMuteStates();
 
   useEffect(() => {
@@ -85,112 +82,82 @@ export const RoomPage: FC = () => {
     if (optInAnalytics === null && setOptInAnalytics) setOptInAnalytics(true);
   }, [optInAnalytics, setOptInAnalytics]);
 
-  const wasInWaitForInviteState = useRef<boolean>(false);
-
-  useEffect(() => {
-    if (groupCallState.kind === "loaded" && wasInWaitForInviteState.current) {
-      logger.log("Play join sound 'Not yet implemented'");
-    }
-  }, [groupCallState.kind]);
-
-  const groupCallView = (): JSX.Element => {
-    switch (groupCallState.kind) {
-      case "loaded":
-        return (
-          <GroupCallView
-            client={client!}
-            rtcSession={groupCallState.rtcSession}
-            isPasswordlessUser={passwordlessUser}
-            confineToRoom={confineToRoom}
-            preload={preload}
-            skipLobby={skipLobby || wasInWaitForInviteState.current}
-            hideHeader={hideHeader}
-            muteStates={muteStates}
-          />
-        );
-      case "waitForInvite":
-      case "canKnock": {
-        wasInWaitForInviteState.current =
-          wasInWaitForInviteState.current ||
-          groupCallState.kind === "waitForInvite";
-        const knock =
-          groupCallState.kind === "canKnock" ? groupCallState.knock : null;
-        const label: string | JSX.Element =
-          groupCallState.kind === "canKnock" ? (
-            t("lobby.ask_to_join")
-          ) : (
-            <>
-              {t("lobby.waiting_for_invite")}
-              <CheckIcon />
-            </>
-          );
-        return (
-          <LobbyView
-            client={client!}
-            matrixInfo={{
-              userId: client!.getUserId() ?? "",
-              displayName: userDisplayName ?? "",
-              avatarUrl: avatarUrl ?? "",
-              roomAlias: null,
-              roomId: groupCallState.roomSummary.room_id,
-              roomName: groupCallState.roomSummary.name ?? "",
-              roomAvatar: groupCallState.roomSummary.avatar_url ?? null,
-              e2eeSystem: {
-                kind: groupCallState.roomSummary["im.nheko.summary.encryption"]
-                  ? E2eeType.PER_PARTICIPANT
-                  : E2eeType.NONE,
-              },
-            }}
-            onEnter={(): void => knock?.()}
-            enterLabel={label}
-            waitingForInvite={groupCallState.kind === "waitForInvite"}
-            confineToRoom={confineToRoom}
-            hideHeader={hideHeader}
-            participantCount={null}
-            muteStates={muteStates}
-            onShareClick={null}
-          />
-        );
-      }
-      case "loading":
-        return (
-          <FullScreenView>
-            <h1>{t("common.loading")}</h1>
-          </FullScreenView>
-        );
-      case "failed":
-        wasInWaitForInviteState.current = false;
-        if ((groupCallState.error as MatrixError).errcode === "M_NOT_FOUND") {
+  const groupCallView = useCallback(
+    (groupCallState: GroupCallStatus): JSX.Element => {
+      switch (groupCallState.kind) {
+        case "loaded":
           return (
-            <FullScreenView>
-              <Heading>{t("group_call_loader.failed_heading")}</Heading>
-              <Text>{t("group_call_loader.failed_text")}</Text>
-              {/* XXX: A 'create it for me' button would be the obvious UX here. Two screens already have
-            dupes of this flow, let's make a common component and put it here. */}
-              <Link to="/">{t("common.home")}</Link>
-            </FullScreenView>
+            <GroupCallView
+              client={client!}
+              rtcSession={groupCallState.rtcSession}
+              isPasswordlessUser={passwordlessUser}
+              confineToRoom={confineToRoom}
+              preload={preload}
+              skipLobby={skipLobby}
+              hideHeader={hideHeader}
+              muteStates={muteStates}
+            />
           );
-        } else if (groupCallState.error instanceof CallTerminatedMessage) {
+        case "waitForInvite":
+        case "canKnock": {
+          const knock =
+            groupCallState.kind === "canKnock" ? groupCallState.knock : null;
+          const label: string | JSX.Element =
+            groupCallState.kind === "canKnock" ? (
+              t("lobby.ask_to_join")
+            ) : (
+              <>
+                {t("lobby.waiting_for_invite")}
+                <CheckIcon />
+              </>
+            );
           return (
-            <FullScreenView>
-              <Heading>{groupCallState.error.message}</Heading>
-              <Text>{groupCallState.error.messageBody}</Text>
-              {groupCallState.error.reason && (
-                <>
-                  {t("group_call_loader.reason")}:
-                  <Text size="sm">"{groupCallState.error.reason}"</Text>
-                </>
-              )}
-              <Link to="/">{t("common.home")}</Link>
-            </FullScreenView>
+            <LobbyView
+              client={client!}
+              matrixInfo={{
+                userId: client!.getUserId() ?? "",
+                displayName: userDisplayName ?? "",
+                avatarUrl: avatarUrl ?? "",
+                roomAlias: null,
+                roomId: groupCallState.roomSummary.room_id,
+                roomName: groupCallState.roomSummary.name ?? "",
+                roomAvatar: groupCallState.roomSummary.avatar_url ?? null,
+                e2eeSystem: {
+                  kind: groupCallState.roomSummary[
+                    "im.nheko.summary.encryption"
+                  ]
+                    ? E2eeType.PER_PARTICIPANT
+                    : E2eeType.NONE,
+                },
+              }}
+              onEnter={(): void => knock?.()}
+              enterLabel={label}
+              waitingForInvite={groupCallState.kind === "waitForInvite"}
+              confineToRoom={confineToRoom}
+              hideHeader={hideHeader}
+              participantCount={null}
+              muteStates={muteStates}
+              onShareClick={null}
+            />
           );
-        } else {
-          return <ErrorView error={groupCallState.error} />;
         }
-      default:
-        return <> </>;
-    }
-  };
+        default:
+          return <> </>;
+      }
+    },
+    [
+      client,
+      passwordlessUser,
+      confineToRoom,
+      preload,
+      skipLobby,
+      hideHeader,
+      muteStates,
+      t,
+      userDisplayName,
+      avatarUrl,
+    ],
+  );
 
   let content: ReactNode;
   if (loading || isRegistering) {
@@ -203,7 +170,15 @@ export const RoomPage: FC = () => {
     // TODO: This doesn't belong here, the app routes need to be reworked
     content = <HomePage />;
   } else {
-    content = groupCallView();
+    content = (
+      <GroupCallLoader
+        client={client}
+        roomIdOrAlias={roomIdOrAlias}
+        viaServers={viaServers}
+      >
+        {groupCallView}
+      </GroupCallLoader>
+    );
   }
 
   return (

src/room/useLoadGroupCall.ts

@@ -117,8 +117,8 @@ export class CallTerminatedMessage extends Error {
 }
 
 export const useLoadGroupCall = (
-  client: MatrixClient | undefined,
-  roomIdOrAlias: string | null,
+  client: MatrixClient,
+  roomIdOrAlias: string,
   viaServers: string[],
 ): GroupCallStatus => {
   const [state, setState] = useState<GroupCallStatus>({ kind: "loading" });
@@ -159,9 +159,6 @@ export const useLoadGroupCall = (
       ?.getContent().reason;
 
   useEffect(() => {
-    if (!client || !roomIdOrAlias) {
-      return;
-    }
     const getRoomByAlias = async (alias: string): Promise<Room> => {
       // We lowercase the localpart when we create the room, so we must lowercase
       // it here too (we just do the whole alias). We can't do the same to room IDs

src/rtcSessionHelpers.ts

@@ -98,9 +98,8 @@ export async function enterRTCSession(
 
   // right now we assume everything is a room-scoped call
   const livekitAlias = rtcSession.room.roomId;
-  const { features, matrix_rtc_session: matrixRtcSessionConfig } = Config.get();
   const useDeviceSessionMemberEvents =
-    features?.feature_use_device_session_member_events;
+    Config.get().features?.feature_use_device_session_member_events;
   rtcSession.joinRoomSession(
     await makePreferredLivekitFoci(rtcSession, livekitAlias),
     makeActiveFocus(),
@@ -109,11 +108,6 @@ export async function enterRTCSession(
       ...(useDeviceSessionMemberEvents !== undefined && {
         useLegacyMemberEvents: !useDeviceSessionMemberEvents,
       }),
-      membershipServerSideExpiryTimeout:
-        matrixRtcSessionConfig?.membership_server_side_expiry_timeout,
-      membershipKeepAlivePeriod:
-        matrixRtcSessionConfig?.membership_keep_alive_period,
-      makeKeyDelay: matrixRtcSessionConfig?.key_rotation_on_leave_delay,
     },
   );
 }

src/settings/PreferencesSettingsTab.tsx

@@ -1,19 +1,17 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2022-2024 New Vector Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { ChangeEvent, FC } from "react";
+import { ChangeEvent, FC, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { Text } from "@vector-im/compound-web";
 
 import { FieldRow, InputField } from "../input/Input";
 import {
   showHandRaisedTimer as showHandRaisedTimerSetting,
-  showReactions as showReactionsSetting,
-  playReactionsSound as playReactionsSoundSetting,
   useSetting,
 } from "./settings";
 
@@ -23,19 +21,13 @@ export const PreferencesSettingsTab: FC = () => {
     showHandRaisedTimerSetting,
   );
 
-  const [showReactions, setShowReactions] = useSetting(showReactionsSetting);
-
-  const [playReactionsSound, setPlayReactionSound] = useSetting(
-    playReactionsSoundSetting,
+  const onChangeSetting = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      setShowHandRaisedTimer(e.target.checked);
+    },
+    [setShowHandRaisedTimer],
   );
 
-  const onChangeSetting = (
-    e: ChangeEvent<HTMLInputElement>,
-    fn: (value: boolean) => void,
-  ): void => {
-    fn(e.target.checked);
-  };
-
   return (
     <div>
       <h4>{t("settings.preferences_tab_h4")}</h4>
@@ -49,30 +41,7 @@ export const PreferencesSettingsTab: FC = () => {
           )}
           type="checkbox"
           checked={showHandRaisedTimer}
-          onChange={(e) => onChangeSetting(e, setShowHandRaisedTimer)}
-        />
-      </FieldRow>
-      <h5>{t("settings.preferences_tab.reactions_title")}</h5>
-      <FieldRow>
-        <InputField
-          id="showReactions"
-          label={t("settings.preferences_tab.reactions_show_label")}
-          description={t("settings.preferences_tab.reactions_show_description")}
-          type="checkbox"
-          checked={showReactions}
-          onChange={(e) => onChangeSetting(e, setShowReactions)}
-        />
-      </FieldRow>
-      <FieldRow>
-        <InputField
-          id="playReactionSound"
-          label={t("settings.preferences_tab.reactions_play_sound_label")}
-          description={t(
-            "settings.preferences_tab.reactions_play_sound_description",
-          )}
-          type="checkbox"
-          checked={playReactionsSound}
-          onChange={(e) => onChangeSetting(e, setPlayReactionSound)}
+          onChange={onChangeSetting}
         />
       </FieldRow>
     </div>