Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2026-03-31 07:00:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'livekit' into toger5/tiles_based_on_rtc_member

Browse Source
This commit is contained in:
Hugh Nimmo-Smith
2024-11-11 10:41:11 +00:00
parent 886dc2c2fe b22d2dba5f
commit 02b96fa924
69 changed files with 2890 additions and 655 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

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

135
README.md
View File

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

52
backend-docker-compose.yml
View File

@@ -1,52 +0,0 @@
version: "3.9"
networks:
lkbackend:
services:
auth-service:
image: ghcr.io/element-hq/lk-jwt-service:latest-ci
hostname: auth-server
# Use host network in case the configured homeserver runs on localhost
network_mode: host
environment:
- LK_JWT_PORT=8881
- LIVEKIT_URL=ws://localhost:7880
- LIVEKIT_KEY=devkey
- LIVEKIT_SECRET=secret
# If the configured homeserver runs on localhost, it'll probably be using
# a self-signed certificate
- LIVEKIT_INSECURE_SKIP_VERIFY_TLS=YES_I_KNOW_WHAT_I_AM_DOING
deploy:
restart_policy:
condition: on-failure
networks:
- lkbackend
livekit:
image: livekit/livekit-server:latest
command: --dev --config /etc/livekit.yaml
restart: unless-stopped
# The SFU seems to work far more reliably when we let it share the host
# network rather than opening specific ports (but why?? we're not missing
# any…)
network_mode: host
# ports:
# - "7880:7880/tcp"
# - "7881:7881/tcp"
# - "7882:7882/tcp"
# - "50100-50200:50100-50200/udp"
volumes:
- ./backend/livekit.yaml:/etc/livekit.yaml
networks:
- lkbackend
redis:
image: redis:6-alpine
command: redis-server /etc/redis.conf
ports:
- 6379:6379
volumes:
- ./backend/redis.conf:/etc/redis.conf
networks:
- lkbackend

51
backend/dev_homeserver.yaml Normal file
View File

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

0
backend/livekit.yaml → backend/dev_livekit.yaml
View File

22
backend/tls_localhost_cert.pem Normal file
View File

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

28
backend/tls_localhost_key.pem Normal file
View File

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

40
backend/tls_localhost_nginx.conf Normal file
View File

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

15
config/config.devenv.json Normal file
View File

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

7
config/config.sample.json
View File

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

2
config/nginx.conf
View File

@@ -13,7 +13,7 @@ server {
# and may or may not bear any resemblance to when the resource changed
add_header Last-Modified "";
try_files $uri /$uri /index.html;
try_files $uri $uri/ /index.html;
}
# assets can be cached because they have hashed filenames

86
dev-backend-docker-compose.yml Normal file
View File

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

9
package.json
View File

@@ -17,7 +17,7 @@
"i18n:check": "i18next --fail-on-warnings --fail-on-update",
"test": "vitest",
"test:coverage": "vitest --coverage",
"backend": "docker-compose -f backend-docker-compose.yml up"
"backend": "docker-compose -f dev-backend-docker-compose.yml up"
},
"devDependencies": {
"@babel/core": "^7.16.5",
@@ -25,6 +25,7 @@
"@babel/preset-react": "^7.22.15",
"@babel/preset-typescript": "^7.23.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",
@@ -57,8 +58,8 @@
"@typescript-eslint/eslint-plugin": "^8.0.0",
"@typescript-eslint/parser": "^8.0.0",
"@use-gesture/react": "^10.2.11",
"@vector-im/compound-design-tokens": "^1.0.0",
"@vector-im/compound-web": "^6.0.0",
"@vector-im/compound-design-tokens": "^1.9.1",
"@vector-im/compound-web": "element-hq/compound-web#46cf2d94d9c9b6d25e80ef0e785f3a929ed040ea",
"@vitejs/plugin-basic-ssl": "^1.0.1",
"@vitejs/plugin-react": "^4.0.1",
"@vitest/coverage-v8": "^2.0.5",
@@ -86,7 +87,7 @@
"livekit-client": "^2.5.7",
"lodash": "^4.17.21",
"loglevel": "^1.9.1",
"matrix-js-sdk": "matrix-org/matrix-js-sdk#e11f9defb9b9603ee2d982a8fd2b0c9577fbf48c",
"matrix-js-sdk": "matrix-org/matrix-js-sdk#6971e7bebaad643c233e5057da7a0d42441c0789",
"matrix-widget-api": "^1.8.2",
"normalize.css": "^8.0.1",
"observable-hooks": "^4.2.3",

32
public/locales/de/app.json
View File

@@ -4,11 +4,17 @@
},
"action": {
"close": "Schließen",
"close_search": "Suche beenden",
"copy_link": "Link kopieren",
"edit": "Bearbeiten",
"go": "Los geht’s",
"invite": "Einladen",
"lower_hand": "Handmeldung zurücknehmen",
"no": "Nein",
"open_search": "Suchen",
"pick_reaction": "Reaktion auswählen",
"raise_hand": "Handmeldung",
"raise_hand_or_send_reaction": "Handmeldung oder Reaktion senden",
"register": "Registrieren",
"remove": "Entfernen",
"sign_in": "Anmelden",
@@ -55,8 +61,10 @@
"password": "Passwort",
"preferences": "Einstellungen",
"profile": "Profil",
"raise_hand": "Hand heben",
"reaction": "Reaktion",
"search": "Suche",
"settings": "Einstellungen",
"something_went_wrong": "Etwas ist schief gelaufen",
"unencrypted": "Nicht verschlüsselt",
"username": "Benutzername",
"video": "Video"
@@ -64,12 +72,6 @@
"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": {
@@ -126,6 +128,7 @@
"rageshake_sending": "Senden …",
"rageshake_sending_logs": "Sende Debug-Protokolle …",
"rageshake_sent": "Danke!",
"reaction_search": "Reaktionen suchen...",
"recaptcha_caption": "Diese Seite wird durch reCAPTCHA geschützt und es gelten Googles <2>Datenschutzerklärung</2> und <6>Nutzungsbedingungen</6>. <9></9>Mit einem Klick auf „Registrieren“ akzeptierst du unseren <2>Endbenutzer-Lizenzvertrag (EULA)</2>",
"recaptcha_dismissed": "Recaptcha abgelehnt",
"recaptcha_not_loaded": "Recaptcha nicht geladen",
@@ -141,6 +144,10 @@
"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",
@@ -153,10 +160,17 @@
"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": "Reaktionen anzeigen",
"reactions_show_label": "Zeige eine Animation, wenn jemand eine Reaktion sendet.",
"reactions_title": "Reaktionen"
},
"preferences_tab_body": "Hier können zusätzliche Optionen für individuelle Anforderungen eingestellt werden",
"preferences_tab_h4": "Einstellungen",
"preferences_tab_show_hand_raised_timer_description": "Einen Timer anzeigen, wenn ein Teilnehmer seine Hand hebt",
"preferences_tab_show_hand_raised_timer_label": "Dauer des Handhebens anzeigen",
"preferences_tab_show_hand_raised_timer_description": "Einen Timer zur Handmeldung anzeigen",
"preferences_tab_show_hand_raised_timer_label": "Dauer der Handmeldung anzeigen",
"speaker_device_selection_label": "Lautsprecher"
},
"star_rating_input_label_one": "{{count}} Stern",

28
public/locales/en-GB/app.json
View File

@@ -4,11 +4,17 @@
},
"action": {
"close": "Close",
"close_search": "Close search",
"copy_link": "Copy link",
"edit": "Edit",
"go": "Go",
"invite": "Invite",
"lower_hand": "Lower hand",
"no": "No",
"open_search": "Open search",
"pick_reaction": "Pick reaction",
"raise_hand": "Raise hand",
"raise_hand_or_send_reaction": "Raise hand or send reaction",
"register": "Register",
"remove": "Remove",
"sign_in": "Sign in",
@@ -55,8 +61,10 @@
"password": "Password",
"preferences": "Preferences",
"profile": "Profile",
"raise_hand": "Raise hand",
"reaction": "Reaction",
"search": "Search",
"settings": "Settings",
"something_went_wrong": "Something went wrong",
"unencrypted": "Not encrypted",
"username": "Username",
"video": "Video"
@@ -64,12 +72,6 @@
"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": {
@@ -126,6 +128,7 @@
"rageshake_sending": "Sending…",
"rageshake_sending_logs": "Sending debug logs…",
"rageshake_sent": "Thanks!",
"reaction_search": "Search reactions…",
"recaptcha_caption": "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>",
"recaptcha_dismissed": "Recaptcha dismissed",
"recaptcha_not_loaded": "Recaptcha not loaded",
@@ -141,6 +144,10 @@
"room_auth_view_eula_caption": "By clicking \"Continue\", you agree to our <2>End User Licensing Agreement (EULA)</2>",
"screenshare_button_label": "Share screen",
"settings": {
"audio_tab": {
"effect_volume_description": "Adjust the volume at which reactions and hand raised effects play",
"effect_volume_label": "Sound effect volume"
},
"developer_settings_label": "Developer Settings",
"developer_settings_label_description": "Expose developer settings in the settings window.",
"developer_tab_title": "Developer",
@@ -153,6 +160,13 @@
"feedback_tab_title": "Feedback",
"more_tab_title": "More",
"opt_in_description": "<0></0><1></1>You may withdraw consent by unchecking this box. If you are currently in a call, this setting will take effect at the end of the call.",
"preferences_tab": {
"reactions_play_sound_description": "Play a sound effect when anyone sends a reaction into a call.",
"reactions_play_sound_label": "Play reaction sounds",
"reactions_show_description": "Show reactions",
"reactions_show_label": "Show an animation when anyone sends a reaction.",
"reactions_title": "Reactions"
},
"preferences_tab_body": "Here you can configure extra options for an improved experience",
"preferences_tab_h4": "Preferences",
"preferences_tab_show_hand_raised_timer_description": "Show a timer when a participant raises their hand",

18
src/@types/matrix-js-sdk.d.ts vendored Normal file
View File

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

73
src/Modal.test.tsx Normal file
View File

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

72
src/Modal.tsx
View File

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

75
src/__snapshots__/Modal.test.tsx.snap Normal file
View File

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

126
src/button/RaisedHandToggleButton.tsx
View File

@@ -1,126 +0,0 @@
/*
Copyright 2024 New Vector Ltd.
SPDX-License-Identifier: AGPL-3.0-only
Please see LICENSE in the repository root for full details.
*/
import { Button as CpdButton, Tooltip } from "@vector-im/compound-web";
import {
ComponentPropsWithoutRef,
FC,
ReactNode,
useCallback,
useState,
} from "react";
import { useTranslation } from "react-i18next";
import { logger } from "matrix-js-sdk/src/logger";
import { EventType, RelationType } from "matrix-js-sdk/src/matrix";
import { MatrixClient } from "matrix-js-sdk/src/client";
import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
import { useReactions } from "../useReactions";
import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships";
interface InnerButtonProps extends ComponentPropsWithoutRef<"button"> {
raised: boolean;
}
const InnerButton: FC<InnerButtonProps> = ({ raised, ...props }) => {
const { t } = useTranslation();
return (
<Tooltip label={t("common.raise_hand")}>
<CpdButton
kind={raised ? "primary" : "secondary"}
{...props}
style={{ paddingLeft: 8, paddingRight: 8 }}
>
<p
role="img"
aria-hidden
style={{
width: "30px",
height: "0px",
display: "inline-block",
fontSize: "22px",
}}
>
✋
</p>
</CpdButton>
</Tooltip>
);
};
interface RaisedHandToggleButtonProps {
rtcSession: MatrixRTCSession;
client: MatrixClient;
}
export function RaiseHandToggleButton({
client,
rtcSession,
}: RaisedHandToggleButtonProps): ReactNode {
const { raisedHands, 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}
/>
);
}

82
src/button/ReactionToggleButton.module.css Normal file
View File

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

214
src/button/ReactionToggleButton.test.tsx Normal file
View File

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

350
src/button/ReactionToggleButton.tsx Normal file
View File

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

241
src/button/__snapshots__/ReactionToggleButton.test.tsx.snap Normal file
View File

@@ -0,0 +1,241 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Can close search 1`] = `
<div
aria-hidden="true"
data-aria-hidden="true"
>
<button
aria-disabled="false"
aria-expanded="true"
aria-haspopup="true"
aria-label="action.raise_hand_or_send_reaction"
aria-labelledby=":rec:"
class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
data-kind="primary"
data-size="lg"
role="button"
tabindex="0"
>
<svg
aria-hidden="true"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.536 15.536a1 1 0 0 0-1.415-1.415 2.987 2.987 0 0 1-2.12.879 2.988 2.988 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
/>
<path
d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
/>
</svg>
</button>
</div>
`;
exports[`Can close search with the escape key 1`] = `
<div>
<button
aria-disabled="false"
aria-expanded="false"
aria-haspopup="true"
aria-label="action.raise_hand_or_send_reaction"
aria-labelledby=":rhh:"
class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
data-kind="secondary"
data-size="lg"
role="button"
tabindex="0"
>
<svg
aria-hidden="true"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.536 15.536a1 1 0 0 0-1.415-1.415 2.987 2.987 0 0 1-2.12.879 2.988 2.988 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
/>
<path
d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
/>
</svg>
</button>
</div>
`;
exports[`Can lower hand 1`] = `
<div>
<button
aria-disabled="false"
aria-expanded="false"
aria-haspopup="true"
aria-label="action.raise_hand_or_send_reaction"
aria-labelledby=":r3i:"
class="_button_i91xf_17 raisedButton _has-icon_i91xf_66 _icon-only_i91xf_59"
data-kind="primary"
data-size="lg"
role="button"
tabindex="0"
>
<svg
aria-hidden="true"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11 3a1 1 0 1 1 2 0v8.5a.5.5 0 0 0 1 0V4a1 1 0 1 1 2 0v10.2l3.284-2.597a1.081 1.081 0 0 1 1.47 1.577c-.613.673-1.214 1.367-1.818 2.064-1.267 1.463-2.541 2.934-3.944 4.235A6 6 0 0 1 5 15V7a1 1 0 0 1 2 0v5.5a.5.5 0 0 0 1 0V4a1 1 0 0 1 2 0v7.5a.5.5 0 0 0 1 0V3Z"
/>
</svg>
</button>
</div>
`;
exports[`Can open menu 1`] = `
<div
aria-hidden="true"
data-aria-hidden="true"
>
<button
aria-disabled="false"
aria-expanded="true"
aria-haspopup="true"
aria-label="action.raise_hand_or_send_reaction"
aria-labelledby=":r0:"
class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
data-kind="primary"
data-size="lg"
role="button"
tabindex="0"
>
<svg
aria-hidden="true"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.536 15.536a1 1 0 0 0-1.415-1.415 2.987 2.987 0 0 1-2.12.879 2.988 2.988 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
/>
<path
d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
/>
</svg>
</button>
</div>
`;
exports[`Can raise hand 1`] = `
<div>
<button
aria-disabled="false"
aria-expanded="false"
aria-haspopup="true"
aria-label="action.raise_hand_or_send_reaction"
aria-labelledby=":r1p:"
class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
data-kind="secondary"
data-size="lg"
role="button"
tabindex="0"
>
<svg
aria-hidden="true"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.536 15.536a1 1 0 0 0-1.415-1.415 2.987 2.987 0 0 1-2.12.879 2.988 2.988 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
/>
<path
d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
/>
</svg>
</button>
</div>
`;
exports[`Can search for and send emoji 1`] = `
<div
aria-hidden="true"
data-aria-hidden="true"
>
<button
aria-disabled="false"
aria-expanded="true"
aria-haspopup="true"
aria-label="action.raise_hand_or_send_reaction"
aria-labelledby=":r74:"
class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
data-kind="primary"
data-size="lg"
role="button"
tabindex="0"
>
<svg
aria-hidden="true"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.536 15.536a1 1 0 0 0-1.415-1.415 2.987 2.987 0 0 1-2.12.879 2.988 2.988 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
/>
<path
d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
/>
</svg>
</button>
</div>
`;
exports[`Can search for and send emoji with the keyboard 1`] = `
<div
aria-hidden="true"
data-aria-hidden="true"
>
<button
aria-disabled="false"
aria-expanded="true"
aria-haspopup="true"
aria-label="action.raise_hand_or_send_reaction"
aria-labelledby=":ra3:"
class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
data-kind="primary"
data-size="lg"
role="button"
tabindex="0"
>
<svg
aria-hidden="true"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.536 15.536a1 1 0 0 0-1.415-1.415 2.987 2.987 0 0 1-2.12.879 2.988 2.988 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
/>
<path
d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
/>
</svg>
</button>
</div>
`;

2
src/button/index.ts
View File

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

2
src/main.tsx
View File

@@ -20,6 +20,8 @@ import {
setLogExtension as setLKLogExtension,
setLogLevel as setLKLogLevel,
} from "livekit-client";
import "@formatjs/intl-segmenter/polyfill";
import "@formatjs/intl-durationformat/polyfill";
import { App } from "./App";
import { init as initRageshake } from "./settings/rageshake";

30
src/reactions/RaisedHandIndicator.tsx
View File

@@ -12,11 +12,10 @@ import {
useEffect,
useState,
} from "react";
import classNames from "classnames";
import "@formatjs/intl-durationformat/polyfill";
import { DurationFormat } from "@formatjs/intl-durationformat";
import { useTranslation } from "react-i18next";
import styles from "./RaisedHandIndicator.module.css";
import { ReactionIndicator } from "./ReactionIndicator";
const durationFormatter = new DurationFormat(undefined, {
minutesDisplay: "always",
@@ -36,6 +35,7 @@ export function RaisedHandIndicator({
showTimer?: boolean;
onClick?: () => void;
}): ReactNode {
const { t } = useTranslation();
const [raisedHandDuration, setRaisedHandDuration] = useState("");
const clickCallback = useCallback<MouseEventHandler<HTMLButtonElement>>(
@@ -76,29 +76,19 @@ export function RaisedHandIndicator({
}
const content = (
<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>
<ReactionIndicator emoji="✋" miniature={miniature}>
{showTimer && <p>{raisedHandDuration}</p>}
</div>
</ReactionIndicator>
);
if (onClick) {
return (
<button
aria-label="lower raised hand"
className={styles.button}
aria-label={t("action.lower_hand")}
style={{
display: "contents",
background: "none",
}}
onClick={clickCallback}
>
{content}

35
src/reactions/RaisedHandIndicator.module.css → src/reactions/ReactionIndicator.module.css
View File

@@ -1,33 +1,28 @@
.raisedHandWidget {
.reactionIndicatorWidget {
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 {
.reactionIndicatorWidget > p {
padding: none;
margin-top: auto;
margin-bottom: auto;
width: 4em;
}
.raisedHandWidgetLarge > p {
.reactionIndicatorWidgetLarge > p {
padding: var(--cpd-space-2x);
}
.raisedHandLarge {
.reactionLarge {
margin: var(--cpd-space-2x);
padding: var(--cpd-space-2x);
padding-block: var(--cpd-space-2x);
padding: var(--cpd-space-4x);
padding-block: var(--cpd-space-4x);
}
.raisedHand {
.reaction {
margin: var(--cpd-space-1x);
color: var(--cpd-color-icon-secondary);
background-color: var(--cpd-color-icon-secondary);
@@ -40,18 +35,22 @@
box-sizing: border-box;
max-inline-size: 100%;
max-width: fit-content;
padding: var(--cpd-space-1x);
padding-block: var(--cpd-space-1x);
}
.raisedHand > span {
.reaction > span {
width: var(--cpd-space-6x);
height: var(--cpd-space-6x);
display: inline-block;
text-align: center;
font-size: 1.3em;
font-size: 1.2em;
/* Centralise */
line-height: 1.2;
}
.raisedHandLarge > span {
width: var(--cpd-space-8x);
height: var(--cpd-space-8x);
font-size: 1.9em;
.reactionLarge > span {
width: 30px;
height: 30px;
font-size: 25px;
}

41
src/reactions/ReactionIndicator.tsx Normal file
View File

@@ -0,0 +1,41 @@
/*
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>
);
}

18
src/reactions/__snapshots__/RaisedHandIndicator.test.tsx.snap
View File

@@ -2,13 +2,13 @@
exports[`RaisedHandIndicator > renders a smaller indicator when miniature is specified 1`] = `
<div
class="raisedHandWidget"
class="reactionIndicatorWidget"
>
<div
class="raisedHand"
class="reaction"
>
<span
aria-label="raised hand"
aria-label="common.reaction"
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="raisedHandWidget raisedHandWidgetLarge"
class="reactionIndicatorWidget reactionIndicatorWidgetLarge"
>
<div
class="raisedHand raisedHandLarge"
class="reaction reactionLarge"
>
<span
aria-label="raised hand"
aria-label="common.reaction"
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="raisedHandWidget raisedHandWidgetLarge"
class="reactionIndicatorWidget reactionIndicatorWidgetLarge"
>
<div
class="raisedHand raisedHandLarge"
class="reaction reactionLarge"
>
<span
aria-label="raised hand"
aria-label="common.reaction"
role="img"
>
✋

181
src/reactions/index.ts Normal file
View File

@@ -0,0 +1,181 @@
/*
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,
},
};
// The first 6 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,
},
},
];

99
src/room/InCallView.module.css
View File

@@ -36,12 +36,14 @@ Please see LICENSE in the repository root for full details.
inset-block-end: 0;
z-index: 1;
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-areas: "logo buttons layout";
grid-template-columns: minmax(0, var(--inline-content-inset)) 1fr auto 1fr minmax(
0,
var(--inline-content-inset)
);
grid-template-areas: ". logo buttons layout .";
align-items: center;
gap: var(--cpd-space-3x);
padding-block: var(--cpd-space-4x);
padding-inline: var(--inline-content-inset);
padding-block: var(--cpd-space-10x);
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
@@ -64,7 +66,6 @@ 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) {
@@ -83,6 +84,7 @@ Please see LICENSE in the repository root for full details.
.buttons {
grid-area: buttons;
justify-self: center;
display: flex;
gap: var(--cpd-space-3x);
}
@@ -92,15 +94,49 @@ Please see LICENSE in the repository root for full details.
justify-self: end;
}
@media (min-height: 400px) {
@media (max-width: 660px) {
.footer {
padding-block: var(--cpd-space-8x);
grid-template-areas: ". buttons buttons buttons .";
}
.logo {
display: none;
}
.layout {
display: none !important;
}
}
@media (min-height: 800px) {
@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-10x);
padding-block: var(--cpd-space-4x);
}
}
@media (max-height: 800px) {
.footer {
padding-block: var(--cpd-space-8x);
}
}
@@ -144,3 +180,48 @@ Please see LICENSE in the repository root for full details.
position: relative;
flex-grow: 1;
}
.floatingReaction {
position: relative;
display: inline;
z-index: 2;
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;
pointer-events: none;
}
@keyframes reaction-up {
from {
opacity: 1;
translate: 100vw 0;
scale: 200%;
}
to {
opacity: 0;
translate: 100vw -100vh;
scale: 100%;
}
}
@media (prefers-reduced-motion) {
@keyframes reaction-up-reduced {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.floatingReaction {
font-size: 48pt;
animation-name: reaction-up-reduced;
top: calc(-50vh + (48pt / 2));
left: calc(50vw - (48pt / 2)) !important;
}
}

273
src/room/InCallView.tsx
View File

@@ -41,7 +41,7 @@ import {
VideoButton,
ShareScreenButton,
SettingsButton,
RaiseHandToggleButton,
ReactionToggleButton,
SwitchCameraButton,
} from "../button";
import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
@@ -83,7 +83,13 @@ 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,
showReactions,
useSetting,
} from "../settings/settings";
const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
@@ -174,13 +180,27 @@ export const InCallView: FC<InCallViewProps> = ({
connState,
onShareClick,
}) => {
const { supportsReactions, raisedHands } = useReactions();
const [shouldShowReactions] = useSetting(showReactions);
const [soundEffectVolume] = useSetting(soundEffectVolumeSetting);
const { supportsReactions, raisedHands, reactions } = useReactions();
const raisedHandCount = useMemo(
() => Object.keys(raisedHands).length,
[raisedHands],
);
const previousRaisedHandCount = useDeferredValue(raisedHandCount);
const reactionsIcons = useMemo(
() =>
shouldShowReactions
? Object.entries(reactions).map(([sender, { emoji }]) => ({
sender,
emoji,
startX: -Math.ceil(Math.random() * 50) - 25,
}))
: [],
[shouldShowReactions, reactions],
);
useWakeLock();
useEffect(() => {
@@ -194,7 +214,6 @@ export const InCallView: FC<InCallViewProps> = ({
const nonMemberItemCount = useObservableEagerState(vm.nonMemberItemCount);
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);
@@ -222,10 +241,6 @@ export const InCallView: FC<InCallViewProps> = ({
(muted) => muteStates.audio.setEnabled?.(!muted),
);
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);
@@ -247,12 +262,22 @@ export const InCallView: FC<InCallViewProps> = ({
}, [vm]);
const onTouchCancel = useCallback(() => (touchStart.current = null), []);
// 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(),
[],
// 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],
);
const onPointerMove = useCallback(
@@ -330,11 +355,17 @@ 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]);
}, [
raisedHandCount,
handRaisePlayer,
previousRaisedHandCount,
soundEffectVolume,
]);
useEffect(() => {
widget?.api.transport
@@ -507,95 +538,106 @@ export const InCallView: FC<InCallViewProps> = ({
.catch(logger.error);
}, [localParticipant, isScreenShareEnabled]);
let footer: JSX.Element | null;
if (noControls) {
footer = null;
} else {
const buttons: JSX.Element[] = [];
const buttons: JSX.Element[] = [];
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(
<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"
<SwitchCameraButton
key="switch_camera"
className={styles.switchCamera}
onClick={switchCamera}
onTouchEnd={onControlsTouchEnd}
/>,
);
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} />);
}
if (canScreenshare && !hideScreensharing) {
buttons.push(
<EndCallButton
key="end_call"
onClick={function (): void {
onLeave();
}}
data-testid="incall_leave"
<ShareScreenButton
key="share_screen"
className={styles.shareScreen}
enabled={isScreenShareEnabled}
onClick={toggleScreensharing}
onTouchEnd={onControlsTouchEnd}
data-testid="incall_screenshare"
/>,
);
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>
);
}
if (supportsReactions) {
buttons.push(
<ReactionToggleButton
key="raise_hand"
className={styles.raiseHand}
client={client}
rtcSession={rtcSession}
onTouchEnd={onControlsTouchEnd}
/>,
);
}
if (layout.type !== "pip")
buttons.push(
<SettingsButton
key="settings"
onClick={openSettings}
onTouchEnd={onControlsTouchEnd}
/>,
);
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"}
/>
</div>
)}
{showControls && <div className={styles.buttons}>{buttons}</div>}
{showControls && (
<LayoutToggle
className={styles.layout}
layout={gridMode}
setLayout={setGridMode}
onTouchEnd={onControlsTouchEnd}
/>
)}
</div>
);
return (
<div
@@ -628,28 +670,45 @@ export const InCallView: FC<InCallViewProps> = ({
/>
</LeftNav>
<RightNav>
{!reducedControls && showControls && onShareClick !== null && (
<InviteButton onClick={onShareClick} />
{showControls && onShareClick !== null && (
<InviteButton
className={styles.invite}
onClick={onShareClick}
/>
)}
</RightNav>
</Header>
))}
<RoomAudioRenderer />
{renderContent()}
<audio ref={handRaisePlayer} hidden>
<audio ref={handRaisePlayer} preload="auto" hidden>
<source src={handSoundOgg} type="audio/ogg; codecs=vorbis" />
<source src={handSoundMp3} type="audio/mpeg" />
</audio>
<ReactionsAudioRenderer />
{reactionsIcons.map(({ sender, emoji, startX }) => (
<span
style={{ left: `${startX}vw` }}
className={styles.floatingReaction}
key={sender}
>
{emoji}
</span>
))}
{footer}
{!noControls && <RageshakeRequestModal {...rageshakeRequestModalProps} />}
<SettingsModal
client={client}
roomId={rtcSession.room.roomId}
open={settingsModalOpen}
onDismiss={closeSettings}
tab={settingsTab}
onTabChange={setSettingsTab}
/>
{layout.type !== "pip" && (
<>
<RageshakeRequestModal {...rageshakeRequestModalProps} />
<SettingsModal
client={client}
roomId={rtcSession.room.roomId}
open={settingsModalOpen}
onDismiss={closeSettings}
tab={settingsTab}
onTabChange={setSettingsTab}
/>
</>
)}
</div>
);
};

181
src/room/ReactionAudioRenderer.test.tsx Normal file
View File

@@ -0,0 +1,181 @@
/*
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);
});

74
src/room/ReactionAudioRenderer.tsx Normal file
View File

@@ -0,0 +1,74 @@
/*
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>
),
)}
</>
);
}

1
src/room/VideoPreview.module.css
View File

@@ -66,6 +66,7 @@ video.mirror {
margin-inline: 0;
border-radius: 0;
block-size: 100%;
width: 100%;
}
.buttonBar {

47
src/settings/PreferencesSettingsTab.tsx
View File

@@ -1,17 +1,19 @@
/*
Copyright 2022-2024 New Vector Ltd.
Copyright 2024 New Vector Ltd.
SPDX-License-Identifier: AGPL-3.0-only
Please see LICENSE in the repository root for full details.
*/
import { ChangeEvent, FC, useCallback } from "react";
import { ChangeEvent, FC } 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";
@@ -21,13 +23,19 @@ export const PreferencesSettingsTab: FC = () => {
showHandRaisedTimerSetting,
);
const onChangeSetting = useCallback(
(e: ChangeEvent<HTMLInputElement>) => {
setShowHandRaisedTimer(e.target.checked);
},
[setShowHandRaisedTimer],
const [showReactions, setShowReactions] = useSetting(showReactionsSetting);
const [playReactionsSound, setPlayReactionSound] = useSetting(
playReactionsSoundSetting,
);
const onChangeSetting = (
e: ChangeEvent<HTMLInputElement>,
fn: (value: boolean) => void,
): void => {
fn(e.target.checked);
};
return (
<div>
<h4>{t("settings.preferences_tab_h4")}</h4>
@@ -41,7 +49,30 @@ export const PreferencesSettingsTab: FC = () => {
)}
type="checkbox"
checked={showHandRaisedTimer}
onChange={onChangeSetting}
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)}
/>
</FieldRow>
</div>

17
src/settings/SettingsModal.module.css
View File

@@ -16,3 +16,20 @@ Please see LICENSE in the repository root for full details.
.fieldRowText {
margin-bottom: 0;
}
.volumeSlider {
margin-top: var(--cpd-space-2x);
}
.volumeSlider > label {
margin-bottom: var(--cpd-space-1x);
display: block;
}
.volumeSlider > span {
max-width: 20em;
}
.volumeSlider > p {
color: var(--cpd-color-text-secondary);
}

19
src/settings/SettingsModal.tsx
View File

@@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details.
import { ChangeEvent, FC, ReactNode, useCallback } from "react";
import { Trans, useTranslation } from "react-i18next";
import { MatrixClient } from "matrix-js-sdk/src/matrix";
import { Dropdown, Text } from "@vector-im/compound-web";
import { Dropdown, Separator, Text } from "@vector-im/compound-web";
import { Modal } from "../Modal";
import styles from "./SettingsModal.module.css";
@@ -29,9 +29,11 @@ import {
duplicateTiles as duplicateTilesSetting,
showNonMemberTiles as showNonMemberTilesSetting,
useOptInAnalytics,
soundEffectVolumeSetting,
} from "./settings";
import { isFirefox } from "../Platform";
import { PreferencesSettingsTab } from "./PreferencesSettingsTab";
import { Slider } from "../Slider";
type SettingsTab =
| "audio"
@@ -121,6 +123,8 @@ export const SettingsModal: FC<Props> = ({
const devices = useMediaDevices();
useMediaDeviceNames(devices, open);
const [soundVolume, setSoundVolume] = useSetting(soundEffectVolumeSetting);
const audioTab: Tab<SettingsTab> = {
key: "audio",
name: t("common.audio"),
@@ -132,6 +136,19 @@ export const SettingsModal: FC<Props> = ({
devices.audioOutput,
t("settings.speaker_device_selection_label"),
)}
<Separator />
<div className={styles.volumeSlider}>
<label>{t("settings.audio_tab.effect_volume_label")}</label>
<p>{t("settings.audio_tab.effect_volume_description")}</p>
<Slider
label={t("video_tile.volume")}
value={soundVolume}
onValueChange={setSoundVolume}
min={0}
max={1}
step={0.01}
/>
</div>
</>
),
};

17
src/settings/settings.ts
View File

@@ -12,7 +12,10 @@ import { useObservableEagerState } from "observable-hooks";
import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
export class Setting<T> {
public constructor(key: string, defaultValue: T) {
public constructor(
key: string,
public readonly defaultValue: T,
) {
this.key = `matrix-setting-${key}`;
const storedValue = localStorage.getItem(this.key);
@@ -97,4 +100,16 @@ export const showHandRaisedTimer = new Setting<boolean>(
false,
);
export const showReactions = new Setting<boolean>("reactions-show", true);
export const playReactionsSound = new Setting<boolean>(
"reactions-play-sound",
true,
);
export const soundEffectVolumeSetting = new Setting<number>(
"sound-effect-volume",
1,
);
export const alwaysShowSelf = new Setting<boolean>("always-show-self", true);

22
src/sound/LICENCE.md Normal file
View File

@@ -0,0 +1,22 @@
# Sound effect licences
The following sound effects have been licensed from Pixabay, under https://pixabay.com/service/license-summary/.
- `raise_hand`
- `reactions/cat`
- `reactions/clap`
- `reactions/crickets`
- `reactions/dog`
- `reactions/generic`
- `reactions/lightbulb`
- `reactions/party`
### Other
The following sound effects have been originally created by Element.
- `blocked`
- `end_talk`
- `start_talk_local`
- `start_talk_remote`
- `reactions/rock`

BIN
src/sound/reactions/cat.mp3 Normal file
View File

Binary file not shown.

BIN
src/sound/reactions/cat.ogg Normal file
View File

Binary file not shown.

BIN
src/sound/reactions/clap.mp3 Normal file
View File

Binary file not shown.

BIN
src/sound/reactions/clap.ogg Normal file
View File

Binary file not shown.

BIN
src/sound/reactions/crickets.mp3 Normal file
View File

Binary file not shown.

BIN
src/sound/reactions/crickets.ogg Normal file
View File

Binary file not shown.

BIN
src/sound/reactions/deer.mp3 Normal file
View File

Binary file not shown.

BIN
src/sound/reactions/deer.ogg Normal file
View File

Binary file not shown.

BIN
src/sound/reactions/dog.mp3 Normal file
View File

Binary file not shown.

BIN
src/sound/reactions/dog.ogg Normal file
View File

Binary file not shown.

BIN
src/sound/reactions/generic.mp3 Normal file
View File

Binary file not shown.

BIN
src/sound/reactions/generic.ogg Normal file
View File

Binary file not shown.

BIN
src/sound/reactions/lightbulb.mp3 Normal file
View File

Binary file not shown.

BIN
src/sound/reactions/lightbulb.ogg Normal file
View File

Binary file not shown.

BIN
src/sound/reactions/party.mp3 Normal file
View File

Binary file not shown.

BIN
src/sound/reactions/party.ogg Normal file
View File

Binary file not shown.

BIN
src/sound/reactions/rock.mp3 Normal file
View File

Binary file not shown.

BIN
src/sound/reactions/rock.ogg Normal file
View File

Binary file not shown.

51
src/state/CallViewModel.ts
View File

@@ -86,6 +86,10 @@ const POST_FOCUS_PARTICIPANT_UPDATE_DELAY_MS = 3000;
// on mobile. No spotlight tile should be shown below this threshold.
const smallMobileCallThreshold = 3;
// How long the footer should be shown for when hovering over or interacting
// with the interface
const showFooterMs = 4000;
export interface GridLayoutMedia {
type: "grid";
spotlight?: MediaViewModel[];
@@ -1042,6 +1046,7 @@ export class CallViewModel extends ViewModel {
);
private readonly screenTap = new Subject<void>();
private readonly controlsTap = new Subject<void>();
private readonly screenHover = new Subject<void>();
private readonly screenUnhover = new Subject<void>();
@@ -1052,6 +1057,13 @@ export class CallViewModel extends ViewModel {
this.screenTap.next();
}
/**
* Callback for when the user taps the call's controls.
*/
public tapControls(): void {
this.controlsTap.next();
}
/**
* Callback for when the user hovers over the call view.
*/
@@ -1086,27 +1098,38 @@ export class CallViewModel extends ViewModel {
if (isFirefox()) return of(true);
// Show/hide the footer in response to interactions
return merge(
this.screenTap.pipe(map(() => "tap" as const)),
this.screenTap.pipe(map(() => "tap screen" as const)),
this.controlsTap.pipe(map(() => "tap controls" as const)),
this.screenHover.pipe(map(() => "hover" as const)),
).pipe(
switchScan(
(state, interaction) =>
interaction === "tap"
? state
switchScan((state, interaction) => {
switch (interaction) {
case "tap screen":
return state
? // Toggle visibility on tap
of(false)
: // Hide after a timeout
timer(6000).pipe(
timer(showFooterMs).pipe(
map(() => false),
startWith(true),
)
: // Show on hover and hide after a timeout
race(timer(3000), this.screenUnhover.pipe(take(1))).pipe(
map(() => false),
startWith(true),
),
false,
),
);
case "tap controls":
// The user is interacting with things, so reset the timeout
return timer(showFooterMs).pipe(
map(() => false),
startWith(true),
);
case "hover":
// Show on hover and hide after a timeout
return race(
timer(showFooterMs),
this.screenUnhover.pipe(take(1)),
).pipe(
map(() => false),
startWith(true),
);
}
}, false),
startWith(false),
);
}

2
src/tile/GridTile.test.tsx
View File

@@ -44,6 +44,8 @@ test("GridTile is accessible", async () => {
off: () => {},
client: {
getUserId: () => null,
on: () => {},
off: () => {},
},
},
memberships: [],

6
src/tile/GridTile.tsx
View File

@@ -48,6 +48,7 @@ import { useLatest } from "../useLatest";
import { GridTileViewModel } from "../state/TileViewModel";
import { useMergedRefs } from "../useMergedRefs";
import { useReactions } from "../useReactions";
import { ReactionOption } from "../reactions";
interface TileProps {
className?: string;
@@ -93,7 +94,7 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
},
[vm],
);
const { raisedHands, lowerHand } = useReactions();
const { raisedHands, lowerHand, reactions } = useReactions();
const MicIcon = audioEnabled ? MicOnSolidIcon : MicOffSolidIcon;
@@ -112,6 +113,8 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
);
const handRaised: Date | undefined = raisedHands[vm.member?.userId ?? ""];
const currentReaction: ReactionOption | undefined =
reactions[vm.member?.userId ?? ""];
const raisedHandOnClick =
vm.local && handRaised ? (): void => void lowerHand() : undefined;
@@ -157,6 +160,7 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
</Menu>
}
raisedHandTime={handRaised}
currentReaction={currentReaction}
raisedHandOnClick={raisedHandOnClick}
{...props}
/>

29
src/tile/MediaView.tsx
View File

@@ -20,6 +20,8 @@ import { Avatar } from "../Avatar";
import { EncryptionStatus } from "../state/MediaViewModel";
import { RaisedHandIndicator } from "../reactions/RaisedHandIndicator";
import { showHandRaisedTimer, useSetting } from "../settings/settings";
import { ReactionOption } from "../reactions";
import { ReactionIndicator } from "../reactions/ReactionIndicator";
interface Props extends ComponentProps<typeof animated.div> {
className?: string;
@@ -37,6 +39,7 @@ interface Props extends ComponentProps<typeof animated.div> {
displayName: string;
primaryButton?: ReactNode;
raisedHandTime?: Date;
currentReaction?: ReactionOption;
raisedHandOnClick?: () => void;
}
@@ -58,6 +61,7 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
primaryButton,
encryptionStatus,
raisedHandTime,
currentReaction,
raisedHandOnClick,
...props
},
@@ -98,7 +102,22 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
)}
</div>
<div className={styles.fg}>
{encryptionStatus !== EncryptionStatus.Okay && (
<div style={{ display: "flex" }}>
<RaisedHandIndicator
raisedHandTime={raisedHandTime}
miniature={avatarSize < 96}
showTimer={handRaiseTimerVisible}
onClick={raisedHandOnClick}
/>
{currentReaction && (
<ReactionIndicator
miniature={avatarSize < 96}
emoji={currentReaction.emoji}
/>
)}
</div>
{/* TODO: Bring this back once encryption status is less broken */}
{/*encryptionStatus !== EncryptionStatus.Okay && (
<div className={styles.status}>
<Text as="span" size="sm" weight="medium" className={styles.name}>
{encryptionStatus === EncryptionStatus.Connecting &&
@@ -111,13 +130,7 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
t("e2ee_encryption_status.password_invalid")}
</Text>
</div>
)}
<RaisedHandIndicator
raisedHandTime={raisedHandTime}
miniature={avatarSize < 96}
showTimer={handRaiseTimerVisible}
onClick={raisedHandOnClick}
/>
)*/}
<div className={styles.nameTag}>
{nameTagLeadingIcon}
<Text as="span" size="sm" weight="medium" className={styles.name}>

2
src/useMediaQuery.ts
View File

@@ -13,7 +13,7 @@ import { useEventTarget } from "./useEvents";
* React hook that tracks whether the given media query matches.
*/
export function useMediaQuery(query: string): boolean {
const mediaQuery = useMemo(() => matchMedia(query), [query]);
const mediaQuery = useMemo(() => window.matchMedia(query), [query]);
const [numChanges, setNumChanges] = useState(0);
useEventTarget(

230
src/useReactions.test.tsx
View File

@@ -5,34 +5,19 @@ SPDX-License-Identifier: AGPL-3.0-only
Please see LICENSE in the repository root for full details.
*/
import { act, render } from "@testing-library/react";
import { FC, ReactNode } from "react";
import { render } from "@testing-library/react";
import { act, FC } from "react";
import { describe, expect, test } from "vitest";
import {
MatrixRTCSession,
MatrixRTCSessionEvent,
} from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
import {
EventTimeline,
EventTimelineSet,
EventType,
MatrixClient,
MatrixEvent,
Room,
RoomEvent,
} from "matrix-js-sdk/src/matrix";
import EventEmitter from "events";
import { randomUUID } from "crypto";
import { CallMembership } from "matrix-js-sdk/src/matrixrtc";
import { RoomEvent } from "matrix-js-sdk/src/matrix";
import { ReactionsProvider, useReactions } from "./useReactions";
/**
* Test explanation.
* This test suite checks that the useReactions hook appropriately reacts
* to new reactions, redactions and membership changesin the room. There is
* a large amount of test structure used to construct a mock environment.
*/
import { useReactions } from "./useReactions";
import {
createHandRaisedReaction,
createRedaction,
MockRoom,
MockRTCSession,
TestReactionsWrapper,
} from "./utils/testReactions";
const memberUserIdAlice = "@alice:example.org";
const memberEventAlice = "$membership-alice:example.org";
@@ -45,6 +30,13 @@ const membership: Record<string, string> = {
"$membership-charlie:example.org": "@charlie:example.org",
};
/**
* Test explanation.
* This test suite checks that the useReactions hook appropriately reacts
* to new reactions, redactions and membership changesin the room. There is
* a large amount of test structure used to construct a mock environment.
*/
const TestComponent: FC = () => {
const { raisedHands } = useReactions();
return (
@@ -61,138 +53,42 @@ const TestComponent: FC = () => {
);
};
const TestComponentWrapper = ({
rtcSession,
}: {
rtcSession: MockRTCSession;
}): ReactNode => {
return (
<ReactionsProvider rtcSession={rtcSession as unknown as MatrixRTCSession}>
<TestComponent />
</ReactionsProvider>
);
};
export class MockRTCSession extends EventEmitter {
public memberships: Partial<CallMembership>[] = Object.entries(
membership,
).map(([eventId, sender]) => ({
sender,
eventId,
createdTs: (): number => Date.now(),
}));
public constructor(public readonly room: MockRoom) {
super();
}
public testRemoveMember(userId: string): void {
this.memberships = this.memberships.filter((u) => u.sender !== userId);
this.emit(MatrixRTCSessionEvent.MembershipsChanged);
}
public testAddMember(sender: string): void {
this.memberships.push({
sender,
eventId: `!fake-${randomUUID()}:event`,
createdTs: (): number => Date.now(),
});
this.emit(MatrixRTCSessionEvent.MembershipsChanged);
}
}
function createReaction(
parentMemberEvent: string,
overridenSender?: string,
): MatrixEvent {
return new MatrixEvent({
sender: overridenSender ?? membership[parentMemberEvent],
type: EventType.Reaction,
origin_server_ts: new Date().getTime(),
content: {
"m.relates_to": {
key: "🖐️",
event_id: parentMemberEvent,
},
},
event_id: randomUUID(),
});
}
function createRedaction(sender: string, reactionEventId: string): MatrixEvent {
return new MatrixEvent({
sender,
type: EventType.RoomRedaction,
origin_server_ts: new Date().getTime(),
redacts: reactionEventId,
content: {},
event_id: randomUUID(),
});
}
export class MockRoom extends EventEmitter {
public constructor(private readonly existingRelations: MatrixEvent[] = []) {
super();
}
public get client(): MatrixClient {
return {
getUserId: (): string => memberUserIdAlice,
} as unknown as MatrixClient;
}
public get relations(): Room["relations"] {
return {
getChildEventsForEvent: (membershipEventId: string) => ({
getRelations: (): MatrixEvent[] => {
return this.existingRelations.filter(
(r) =>
r.getContent()["m.relates_to"]?.event_id === membershipEventId,
);
},
}),
} as unknown as Room["relations"];
}
public testSendReaction(
parentMemberEvent: string,
overridenSender?: string,
): string {
const evt = createReaction(parentMemberEvent, overridenSender);
this.emit(RoomEvent.Timeline, evt, this, undefined, false, {
timeline: new EventTimeline(new EventTimelineSet(undefined)),
});
return evt.getId()!;
}
}
describe("useReactions", () => {
test("starts with an empty list", () => {
const rtcSession = new MockRTCSession(new MockRoom());
const rtcSession = new MockRTCSession(
new MockRoom(memberUserIdAlice),
membership,
);
const { queryByRole } = render(
<TestComponentWrapper rtcSession={rtcSession} />,
<TestReactionsWrapper rtcSession={rtcSession}>
<TestComponent />
</TestReactionsWrapper>,
);
expect(queryByRole("list")?.children).to.have.lengthOf(0);
});
test("handles incoming raised hand", async () => {
const room = new MockRoom();
const rtcSession = new MockRTCSession(room);
const room = new MockRoom(memberUserIdAlice);
const rtcSession = new MockRTCSession(room, membership);
const { queryByRole } = render(
<TestComponentWrapper rtcSession={rtcSession} />,
<TestReactionsWrapper rtcSession={rtcSession}>
<TestComponent />
</TestReactionsWrapper>,
);
await act(() => room.testSendReaction(memberEventAlice));
await act(() => room.testSendHandRaise(memberEventAlice, membership));
expect(queryByRole("list")?.children).to.have.lengthOf(1);
await act(() => room.testSendReaction(memberEventBob));
await act(() => room.testSendHandRaise(memberEventBob, membership));
expect(queryByRole("list")?.children).to.have.lengthOf(2);
});
test("handles incoming unraised hand", async () => {
const room = new MockRoom();
const rtcSession = new MockRTCSession(room);
const room = new MockRoom(memberUserIdAlice);
const rtcSession = new MockRTCSession(room, membership);
const { queryByRole } = render(
<TestComponentWrapper rtcSession={rtcSession} />,
<TestReactionsWrapper rtcSession={rtcSession}>
<TestComponent />
</TestReactionsWrapper>,
);
const reactionEventId = await act(() =>
room.testSendReaction(memberEventAlice),
room.testSendHandRaise(memberEventAlice, membership),
);
expect(queryByRole("list")?.children).to.have.lengthOf(1);
await act(() =>
@@ -206,30 +102,42 @@ describe("useReactions", () => {
expect(queryByRole("list")?.children).to.have.lengthOf(0);
});
test("handles loading prior raised hand events", () => {
const room = new MockRoom([createReaction(memberEventAlice)]);
const rtcSession = new MockRTCSession(room);
const room = new MockRoom(memberUserIdAlice, [
createHandRaisedReaction(memberEventAlice, membership),
]);
const rtcSession = new MockRTCSession(room, membership);
const { queryByRole } = render(
<TestComponentWrapper rtcSession={rtcSession} />,
<TestReactionsWrapper rtcSession={rtcSession}>
<TestComponent />
</TestReactionsWrapper>,
);
expect(queryByRole("list")?.children).to.have.lengthOf(1);
});
// If the membership event changes for a user, we want to remove
// the raised hand event.
test("will remove reaction when a member leaves the call", () => {
const room = new MockRoom([createReaction(memberEventAlice)]);
const rtcSession = new MockRTCSession(room);
const room = new MockRoom(memberUserIdAlice, [
createHandRaisedReaction(memberEventAlice, membership),
]);
const rtcSession = new MockRTCSession(room, membership);
const { queryByRole } = render(
<TestComponentWrapper rtcSession={rtcSession} />,
<TestReactionsWrapper rtcSession={rtcSession}>
<TestComponent />
</TestReactionsWrapper>,
);
expect(queryByRole("list")?.children).to.have.lengthOf(1);
act(() => rtcSession.testRemoveMember(memberUserIdAlice));
expect(queryByRole("list")?.children).to.have.lengthOf(0);
});
test("will remove reaction when a member joins via a new event", () => {
const room = new MockRoom([createReaction(memberEventAlice)]);
const rtcSession = new MockRTCSession(room);
const room = new MockRoom(memberUserIdAlice, [
createHandRaisedReaction(memberEventAlice, membership),
]);
const rtcSession = new MockRTCSession(room, membership);
const { queryByRole } = render(
<TestComponentWrapper rtcSession={rtcSession} />,
<TestReactionsWrapper rtcSession={rtcSession}>
<TestComponent />
</TestReactionsWrapper>,
);
expect(queryByRole("list")?.children).to.have.lengthOf(1);
// Simulate leaving and rejoining
@@ -240,22 +148,26 @@ describe("useReactions", () => {
expect(queryByRole("list")?.children).to.have.lengthOf(0);
});
test("ignores invalid sender for historic event", () => {
const room = new MockRoom([
createReaction(memberEventAlice, memberUserIdBob),
const room = new MockRoom(memberUserIdAlice, [
createHandRaisedReaction(memberEventAlice, memberUserIdBob),
]);
const rtcSession = new MockRTCSession(room);
const rtcSession = new MockRTCSession(room, membership);
const { queryByRole } = render(
<TestComponentWrapper rtcSession={rtcSession} />,
<TestReactionsWrapper rtcSession={rtcSession}>
<TestComponent />
</TestReactionsWrapper>,
);
expect(queryByRole("list")?.children).to.have.lengthOf(0);
});
test("ignores invalid sender for new event", async () => {
const room = new MockRoom([]);
const rtcSession = new MockRTCSession(room);
const room = new MockRoom(memberUserIdAlice);
const rtcSession = new MockRTCSession(room, membership);
const { queryByRole } = render(
<TestComponentWrapper rtcSession={rtcSession} />,
<TestReactionsWrapper rtcSession={rtcSession}>
<TestComponent />
</TestReactionsWrapper>,
);
await act(() => room.testSendReaction(memberEventAlice, memberUserIdBob));
await act(() => room.testSendHandRaise(memberEventAlice, memberUserIdBob));
expect(queryByRole("list")?.children).to.have.lengthOf(0);
});
});

132
src/useReactions.tsx
View File

@@ -10,6 +10,7 @@ import {
MatrixEvent,
RelationType,
RoomEvent as MatrixRoomEvent,
MatrixEventEvent,
} from "matrix-js-sdk/src/matrix";
import { ReactionEventContent } from "matrix-js-sdk/src/types";
import {
@@ -26,10 +27,19 @@ import { logger } from "matrix-js-sdk/src/logger";
import { useMatrixRTCSessionMemberships } from "./useMatrixRTCSessionMemberships";
import { useClientState } from "./ClientContext";
import {
ECallReactionEventContent,
ElementCallReactionEventType,
GenericReaction,
ReactionOption,
ReactionSet,
} from "./reactions";
import { useLatest } from "./useLatest";
interface ReactionsContextType {
raisedHands: Record<string, Date>;
supportsReactions: boolean;
reactions: Record<string, ReactionOption>;
lowerHand: () => Promise<void>;
}
@@ -52,6 +62,8 @@ interface RaisedHandInfo {
time: Date;
}
const REACTION_ACTIVE_TIME_MS = 3000;
export const useReactions = (): ReactionsContextType => {
const context = useContext(ReactionsContext);
if (!context) {
@@ -80,6 +92,10 @@ export const ReactionsProvider = ({
const room = rtcSession.room;
const myUserId = room.client.getUserId();
const [reactions, setReactions] = useState<Record<string, ReactionOption>>(
{},
);
// Reduce the data down for the consumers.
const resultRaisedHands = useMemo(
() =>
@@ -162,29 +178,95 @@ export const ReactionsProvider = ({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [room, memberships, myUserId, addRaisedHand, removeRaisedHand]);
const latestMemberships = useLatest(memberships);
const latestRaisedHands = useLatest(raisedHands);
// This effect handles any *live* reaction/redactions in the room.
useEffect(() => {
const reactionTimeouts = new Set<number>();
const handleReactionEvent = (event: MatrixEvent): void => {
if (event.isSending()) {
// Skip any events that are still sending.
return;
}
// Decrypted events might come from a different room
if (event.getRoomId() !== room.roomId) return;
// Skip any events that are still sending.
if (event.isSending()) return;
const sender = event.getSender();
const reactionEventId = event.getId();
if (!sender || !reactionEventId) {
// Skip any event without a sender or event ID.
return;
}
// Skip any event without a sender or event ID.
if (!sender || !reactionEventId) return;
if (event.getType() === EventType.Reaction) {
if (event.getType() === ElementCallReactionEventType) {
room.client
.decryptEventIfNeeded(event)
.catch((e) => logger.warn(`Failed to decrypt ${event.getId()}`, e));
if (event.isBeingDecrypted() || event.isDecryptionFailure()) return;
const content: ECallReactionEventContent = event.getContent();
const membershipEventId = content?.["m.relates_to"]?.event_id;
// Check to see if this reaction was made to a membership event (and the
// sender of the reaction matches the membership)
if (
!latestMemberships.current.some(
(e) => e.eventId === membershipEventId && e.sender === sender,
)
) {
logger.warn(
`Reaction target was not a membership event for ${sender}, ignoring`,
);
return;
}
if (!content.emoji) {
logger.warn(`Reaction had no emoji from ${reactionEventId}`);
return;
}
const segment = new Intl.Segmenter(undefined, {
granularity: "grapheme",
})
.segment(content.emoji)
[Symbol.iterator]();
const emoji = segment.next().value?.segment;
if (!emoji) {
logger.warn(
`Reaction had no emoji from ${reactionEventId} after splitting`,
);
return;
}
// One of our custom reactions
const reaction = {
...GenericReaction,
emoji,
// If we don't find a reaction, we can fallback to the generic sound.
...ReactionSet.find((r) => r.name === content.name),
};
setReactions((reactions) => {
if (reactions[sender]) {
// We've still got a reaction from this user, ignore it to prevent spamming
return reactions;
}
const timeout = window.setTimeout(() => {
// Clear the reaction after some time.
setReactions(({ [sender]: _unused, ...remaining }) => remaining);
reactionTimeouts.delete(timeout);
}, REACTION_ACTIVE_TIME_MS);
reactionTimeouts.add(timeout);
return {
...reactions,
[sender]: reaction,
};
});
} else if (event.getType() === EventType.Reaction) {
const content = event.getContent() as ReactionEventContent;
const membershipEventId = content["m.relates_to"].event_id;
// Check to see if this reaction was made to a membership event (and the
// sender of the reaction matches the membership)
if (
!memberships.some(
!latestMemberships.current.some(
(e) => e.eventId === membershipEventId && e.sender === sender,
)
) {
@@ -203,7 +285,7 @@ export const ReactionsProvider = ({
}
} else if (event.getType() === EventType.RoomRedaction) {
const targetEvent = event.event.redacts;
const targetUser = Object.entries(raisedHands).find(
const targetUser = Object.entries(latestRaisedHands.current).find(
([_u, r]) => r.reactionEventId === targetEvent,
)?.[0];
if (!targetUser) {
@@ -216,6 +298,7 @@ export const ReactionsProvider = ({
room.on(MatrixRoomEvent.Timeline, handleReactionEvent);
room.on(MatrixRoomEvent.Redaction, handleReactionEvent);
room.client.on(MatrixEventEvent.Decrypted, handleReactionEvent);
// We listen for a local echo to get the real event ID, as timeline events
// may still be sending.
@@ -224,17 +307,22 @@ export const ReactionsProvider = ({
return (): void => {
room.off(MatrixRoomEvent.Timeline, handleReactionEvent);
room.off(MatrixRoomEvent.Redaction, handleReactionEvent);
room.client.off(MatrixEventEvent.Decrypted, handleReactionEvent);
room.off(MatrixRoomEvent.LocalEchoUpdated, handleReactionEvent);
reactionTimeouts.forEach((t) => clearTimeout(t));
// If we're clearing timeouts, we also clear all reactions.
setReactions({});
};
}, [room, addRaisedHand, removeRaisedHand, memberships, raisedHands]);
}, [
room,
addRaisedHand,
removeRaisedHand,
latestMemberships,
latestRaisedHands,
]);
const lowerHand = useCallback(async () => {
if (
!myUserId ||
clientState?.state !== "valid" ||
!clientState.authenticated ||
!raisedHands[myUserId]
) {
if (!myUserId || !raisedHands[myUserId]) {
return;
}
const myReactionId = raisedHands[myUserId].reactionEventId;
@@ -243,21 +331,19 @@ export const ReactionsProvider = ({
return;
}
try {
await clientState.authenticated.client.redactEvent(
rtcSession.room.roomId,
myReactionId,
);
await room.client.redactEvent(rtcSession.room.roomId, myReactionId);
logger.debug("Redacted raise hand event");
} catch (ex) {
logger.error("Failed to redact reaction event", myReactionId, ex);
}
}, [myUserId, raisedHands, clientState, rtcSession]);
}, [myUserId, raisedHands, rtcSession, room]);
return (
<ReactionsContext.Provider
value={{
raisedHands: resultRaisedHands,
supportsReactions,
reactions,
lowerHand,
}}
>

206
src/utils/testReactions.tsx Normal file
View File

@@ -0,0 +1,206 @@
/*
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 { randomUUID } from "crypto";
import EventEmitter from "events";
import { MatrixClient } from "matrix-js-sdk/src/client";
import { EventType, RoomEvent, RelationType } from "matrix-js-sdk/src/matrix";
import {
MatrixEvent,
EventTimeline,
EventTimelineSet,
Room,
} from "matrix-js-sdk/src/matrix";
import {
MatrixRTCSession,
MatrixRTCSessionEvent,
} from "matrix-js-sdk/src/matrixrtc";
import { ReactionsProvider } from "../useReactions";
import {
ECallReactionEventContent,
ElementCallReactionEventType,
ReactionOption,
} from "../reactions";
export const TestReactionsWrapper = ({
rtcSession,
children,
}: PropsWithChildren<{
rtcSession: MockRTCSession;
}>): ReactNode => {
return (
<ReactionsProvider rtcSession={rtcSession as unknown as MatrixRTCSession}>
{children}
</ReactionsProvider>
);
};
export class MockRTCSession extends EventEmitter {
public memberships: {
sender: string;
eventId: string;
createdTs: () => Date;
}[];
public constructor(
public readonly room: MockRoom,
membership: Record<string, string>,
) {
super();
this.memberships = Object.entries(membership).map(([eventId, sender]) => ({
sender,
eventId,
createdTs: (): Date => new Date(),
}));
}
public testRemoveMember(userId: string): void {
this.memberships = this.memberships.filter((u) => u.sender !== userId);
this.emit(MatrixRTCSessionEvent.MembershipsChanged);
}
public testAddMember(sender: string): void {
this.memberships.push({
sender,
eventId: `!fake-${randomUUID()}:event`,
createdTs: (): Date => new Date(),
});
this.emit(MatrixRTCSessionEvent.MembershipsChanged);
}
}
export function createHandRaisedReaction(
parentMemberEvent: string,
membershipOrOverridenSender: Record<string, string> | string,
): MatrixEvent {
return new MatrixEvent({
sender:
typeof membershipOrOverridenSender === "string"
? membershipOrOverridenSender
: membershipOrOverridenSender[parentMemberEvent],
type: EventType.Reaction,
origin_server_ts: new Date().getTime(),
content: {
"m.relates_to": {
key: "🖐️",
event_id: parentMemberEvent,
},
},
event_id: randomUUID(),
});
}
export function createRedaction(
sender: string,
reactionEventId: string,
): MatrixEvent {
return new MatrixEvent({
sender,
type: EventType.RoomRedaction,
origin_server_ts: new Date().getTime(),
redacts: reactionEventId,
content: {},
event_id: randomUUID(),
});
}
export class MockRoom extends EventEmitter {
public readonly testSentEvents: Parameters<MatrixClient["sendEvent"]>[] = [];
public readonly testRedactedEvents: Parameters<
MatrixClient["redactEvent"]
>[] = [];
public constructor(
private readonly ownUserId: string,
private readonly existingRelations: MatrixEvent[] = [],
) {
super();
}
public get client(): MatrixClient {
return {
getUserId: (): string => this.ownUserId,
sendEvent: async (
...props: Parameters<MatrixClient["sendEvent"]>
): ReturnType<MatrixClient["sendEvent"]> => {
this.testSentEvents.push(props);
return Promise.resolve({ event_id: randomUUID() });
},
redactEvent: async (
...props: Parameters<MatrixClient["redactEvent"]>
): ReturnType<MatrixClient["redactEvent"]> => {
this.testRedactedEvents.push(props);
return Promise.resolve({ event_id: randomUUID() });
},
decryptEventIfNeeded: async () => {},
on() {
return this;
},
off() {
return this;
},
} as unknown as MatrixClient;
}
public get relations(): Room["relations"] {
return {
getChildEventsForEvent: (membershipEventId: string) => ({
getRelations: (): MatrixEvent[] => {
return this.existingRelations.filter(
(r) =>
r.getContent()["m.relates_to"]?.event_id === membershipEventId,
);
},
}),
} as unknown as Room["relations"];
}
public testSendHandRaise(
parentMemberEvent: string,
membershipOrOverridenSender: Record<string, string> | string,
): string {
const evt = createHandRaisedReaction(
parentMemberEvent,
membershipOrOverridenSender,
);
this.emit(RoomEvent.Timeline, evt, this, undefined, false, {
timeline: new EventTimeline(new EventTimelineSet(undefined)),
});
return evt.getId()!;
}
public testSendReaction(
parentMemberEvent: string,
reaction: ReactionOption,
membershipOrOverridenSender: Record<string, string> | string,
): string {
const evt = new MatrixEvent({
sender:
typeof membershipOrOverridenSender === "string"
? membershipOrOverridenSender
: membershipOrOverridenSender[parentMemberEvent],
type: ElementCallReactionEventType,
origin_server_ts: new Date().getTime(),
content: {
"m.relates_to": {
rel_type: RelationType.Reference,
event_id: parentMemberEvent,
},
emoji: reaction.emoji,
name: reaction.name,
} satisfies ECallReactionEventContent,
event_id: randomUUID(),
});
this.emit(RoomEvent.Timeline, evt, this, undefined, false, {
timeline: new EventTimeline(new EventTimelineSet(undefined)),
});
return evt.getId()!;
}
}

2
src/widget.ts
View File

@@ -15,6 +15,7 @@ import type { IWidgetApiRequest } from "matrix-widget-api";
import { LazyEventEmitter } from "./LazyEventEmitter";
import { getUrlParams } from "./UrlParams";
import { Config } from "./config/Config";
import { ElementCallReactionEventType } from "./reactions";
// Subset of the actions in matrix-react-sdk
export enum ElementWidgetActions {
@@ -105,6 +106,7 @@ export const widget = ((): WidgetHelpers | null => {
EventType.CallEncryptionKeysPrefix,
EventType.Reaction,
EventType.RoomRedaction,
ElementCallReactionEventType,
];
const sendState = [

67
yarn.lock
View File

@@ -1608,6 +1608,15 @@
dependencies:
tslib "2"
"@formatjs/intl-segmenter@^11.7.3":
version "11.7.3"
resolved "https://registry.yarnpkg.com/@formatjs/intl-segmenter/-/intl-segmenter-11.7.3.tgz#aeb49c33c81fec68419922c64c72188b659eaa5a"
integrity sha512-IvEDQRe0t0ouqaqZK2KobGt/+BhwDHdtbS8GWhdl+fjmWbhXMz2mHihu5fAYkYChum5eNfGhEF5P+bLCeYq67w==
dependencies:
"@formatjs/ecma402-abstract" "2.2.3"
"@formatjs/intl-localematcher" "0.5.7"
tslib "2"
"@gulpjs/to-absolute-glob@^4.0.0":
version "4.0.0"
resolved "https://registry.yarnpkg.com/@gulpjs/to-absolute-glob/-/to-absolute-glob-4.0.0.tgz#1fc2460d3953e1d9b9f2dfdb4bcc99da4710c021"
@@ -3100,15 +3109,14 @@
dependencies:
"@use-gesture/core" "10.3.1"
"@vector-im/compound-design-tokens@^1.0.0":
version "1.9.0"
resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-1.9.0.tgz#a3788845110fdcafb1720f633cb060b86f9a1592"
integrity sha512-09eIRJSiWtAqK605eIu+PfT1ugu7u13gkvfxvfN7kjJMHQOzHSvDxmwADmfIzlV7oBQ8M+5D4KSKHNskvMxWsA==
"@vector-im/compound-design-tokens@^1.9.1":
version "1.9.1"
resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-1.9.1.tgz#644dc7ca5ca251fd476af2a7c075e9d740c08871"
integrity sha512-zjI+PhoNLNrJrLU8whEGjzCuxdqIz6tM0ARYBMS8AG1vC+NlGak6Y21TWnzHT3VINNhnF+PiQ9lFWsU65GydOg==
"@vector-im/compound-web@^6.0.0":
version "6.3.2"
resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-6.3.2.tgz#92e92056b7922474424a4bf4a3068ebb5bade7c2"
integrity sha512-l1Bz+QFdgnwzJ17fpC9gzbDMHBsfwdb1AX53LOS1p91tdo2pypElGAJDWpaCy90UT900tKjZd+0qwMapdkuQmg==
"@vector-im/compound-web@element-hq/compound-web#46cf2d94d9c9b6d25e80ef0e785f3a929ed040ea":
version "7.1.0"
resolved "https://codeload.github.com/element-hq/compound-web/tar.gz/46cf2d94d9c9b6d25e80ef0e785f3a929ed040ea"
dependencies:
"@floating-ui/react" "^0.26.24"
"@radix-ui/react-context-menu" "^2.2.1"
@@ -5990,9 +5998,9 @@ matrix-events-sdk@0.0.1:
resolved "https://registry.yarnpkg.com/matrix-events-sdk/-/matrix-events-sdk-0.0.1.tgz#c8c38911e2cb29023b0bbac8d6f32e0de2c957dd"
integrity sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA==
matrix-js-sdk@matrix-org/matrix-js-sdk#e11f9defb9b9603ee2d982a8fd2b0c9577fbf48c:
matrix-js-sdk@matrix-org/matrix-js-sdk#6971e7bebaad643c233e5057da7a0d42441c0789:
version "34.10.0"
resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/e11f9defb9b9603ee2d982a8fd2b0c9577fbf48c"
resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/6971e7bebaad643c233e5057da7a0d42441c0789"
dependencies:
"@babel/runtime" "^7.12.5"
"@matrix-org/matrix-sdk-crypto-wasm" "^9.0.0"
@@ -6010,10 +6018,10 @@ matrix-js-sdk@matrix-org/matrix-js-sdk#e11f9defb9b9603ee2d982a8fd2b0c9577fbf48c:
unhomoglyph "^1.0.6"
uuid "11"
matrix-widget-api@^1.8.2:
version "1.9.0"
resolved "https://registry.yarnpkg.com/matrix-widget-api/-/matrix-widget-api-1.9.0.tgz#884136b405bd3c56e4ea285095c9e01ec52b6b1f"
integrity sha512-au8mqralNDqrEvaVAkU37bXOb8I9SCe+ACdPk11QWw58FKstVq31q2wRz+qWA6J+42KJ6s1DggWbG/S3fEs3jw==
matrix-widget-api@^1.10.0, matrix-widget-api@^1.8.2:
version "1.10.0"
resolved "https://registry.yarnpkg.com/matrix-widget-api/-/matrix-widget-api-1.10.0.tgz#d31ea073a5871a1fb1a511ef900b0c125a37bf55"
integrity sha512-rkAJ29briYV7TJnfBVLVSKtpeBrBju15JZFSDP6wj8YdbCu1bdmlplJayQ+vYaw1x4fzI49Q+Nz3E85s46sRDw==
dependencies:
"@types/events" "^3.0.0"
events "^3.2.0"
@@ -7527,7 +7535,16 @@ streamx@^2.12.0, streamx@^2.12.5, streamx@^2.13.2, streamx@^2.14.0:
optionalDependencies:
bare-events "^2.2.0"
"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
"string-width-cjs@npm:string-width@^4.2.0":
version "4.2.3"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
dependencies:
emoji-regex "^8.0.0"
is-fullwidth-code-point "^3.0.0"
strip-ansi "^6.0.1"
string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
version "4.2.3"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -7622,7 +7639,14 @@ string_decoder@~1.1.1:
dependencies:
safe-buffer "~5.1.0"
"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1, strip-ansi@^7.0.1:
"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
version "6.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
dependencies:
ansi-regex "^5.0.1"
strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1, strip-ansi@^7.0.1:
version "6.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -8416,7 +8440,7 @@ word-wrap@^1.2.5:
resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
version "7.0.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -8434,6 +8458,15 @@ wrap-ansi@^6.2.0:
string-width "^4.1.0"
strip-ansi "^6.0.0"
wrap-ansi@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
dependencies:
ansi-styles "^4.0.0"
string-width "^4.1.0"
strip-ansi "^6.0.0"
wrap-ansi@^8.1.0:
version "8.1.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"