Merge pull request #1337 from RiotTranslateBot/weblate-element-call-element-call

Translations update from Weblate

.eslintrc.cjs

@@ -1,6 +1,16 @@
 module.exports = {
   plugins: ["matrix-org"],
-  extends: ["plugin:matrix-org/react", "plugin:matrix-org/a11y", "prettier"],
+  extends: [
+    "prettier",
+    "plugin:matrix-org/react",
+    "plugin:matrix-org/a11y",
+    "plugin:matrix-org/typescript",
+  ],
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: "module",
+    project: ["./tsconfig.json"],
+  },
   env: {
     browser: true,
     node: true,

.github/workflows/lint.yaml

@@ -19,6 +19,6 @@ jobs:
       - name: i18n
         run: "yarn run i18n:check"
       - name: ESLint
-        run: "yarn run lint:js"
+        run: "yarn run lint:eslint"
       - name: Type check
         run: "yarn run lint:types"

.github/workflows/publish.yaml

@@ -3,6 +3,8 @@ name: Build & publish images to the package registry for tags
 on:
   release:
     types: [published]
+  push:
+    branches: [livekit]
 
 env:
   REGISTRY: ghcr.io
@@ -16,6 +18,10 @@ jobs:
       contents: write # required to upload release asset
       packages: write
     steps:
+      - name: Get current time
+        id: current-time
+        run: echo "unix_time=$(date +'%s')" >> $GITHUB_OUTPUT
+
       - name: Check it out
         uses: actions/checkout@v2
 
@@ -43,21 +49,27 @@ jobs:
 
       - name: Create Tarball
         env:
-          GITHUB_TAG_NAME: ${{ github.event.release.tag_name }}
+          TARBALL_VERSION: ${{ github.event.release.tag_name || github.sha }}
         run: |
-          tar --numeric-owner --transform "s/dist/element-call-${GITHUB_TAG_NAME}/" -cvzf element-call-${GITHUB_TAG_NAME}.tar.gz dist
+          tar --numeric-owner --transform "s/dist/element-call-${TARBALL_VERSION}/" -cvzf element-call-${TARBALL_VERSION}.tar.gz dist
+
       - name: Upload
-        uses: alexellis/upload-assets@0.4.0
+        uses: actions/upload-artifact@0b7f8abb1508181956e8e162db84b466c27e18ce
         env:
           GITHUB_TOKEN: ${{ github.token }}
         with:
-          asset_paths: '["element-call-${{ github.event.release.tag_name }}.tar.gz"]'
+          path: "./element-call-*.tar.gz"
 
       - name: Extract metadata (tags, labels) for Docker
         id: meta
-        uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38
+        uses: docker/metadata-action@818d4b7b91585d195f67373fd9cb0332e31a7175
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=sha,format=short,event=branch
+            type=semver,pattern={{version}}
+            type=raw,value=latest-ci,enable={{is_default_branch}}
+            type=raw,value=latest-ci_${{steps.current-time.outputs.unix_time}},enable={{is_default_branch}}
 
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@dc7b9719a96d48369863986a06765841d7ea23f6

README.md

@@ -9,7 +9,7 @@ For prior version of the Element Call that relied solely on full-mesh logic, che
 
 ![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 [element-call.netlify.app](https://element-call.netlify.app).
+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
 
@@ -88,20 +88,16 @@ yarn dev
 
 ### Backend
 
-Add in you `.env` in root dir with:
+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._**
 
-```yaml
+To use it, add SFU parameter in your local config `./public/config.yml`:
-# Develop backend settings:
-LIVEKIT_KEY="devkey"
-LIVEKIT_SECRET="secret"
-```
-
-Add SFU parameter in your local config `./public/config.yml`:
 
 ```yaml
 "livekit": {
-    "server_url": "ws://localhost:7880",
+    "jwt_service_url": "http://localhost:8881"
-    "jwt_service_url": "http:/localhost:8881"
   },
 ```
 

backend-docker-compose.yml

@@ -1,5 +1,3 @@
-# LiveKit requires host networking, which is only available on Linux
-# This compose will not function correctly on Mac or Windows
 version: "3.9"
 
 networks:
@@ -7,15 +5,14 @@ networks:
 
 services:
   auth-service:
-    build:
+    image: ghcr.io/vector-im/lk-jwt-service:latest-ci
-      context: ./backend/auth
-    container_name: auth-server
     hostname: auth-server
     ports:
       - 8881:8080
     environment:
-      - LIVEKIT_KEY=${LIVEKIT_KEY}
+      - LIVEKIT_URL=ws://localhost:7880
-      - LIVEKIT_SECRET=${LIVEKIT_SECRET}
+      - LIVEKIT_KEY=devkey
+      - LIVEKIT_SECRET=secret
     deploy:
       restart_policy:
         condition: on-failure

backend/auth/Dockerfile

@@ -1,15 +0,0 @@
-FROM golang:1.20-alpine
-
-WORKDIR /app
-
-COPY go.mod ./
-COPY go.sum ./
-RUN go mod download
-
-COPY *.go ./
-
-RUN go build -o /auth-server
-
-EXPOSE 8080
-
-CMD [ "/auth-server" ]

backend/auth/go.mod

@@ -1,20 +0,0 @@
-module vector-auth-server
-
-go 1.20
-
-require github.com/livekit/protocol v1.5.7
-
-require (
-	github.com/go-jose/go-jose/v3 v3.0.0 // indirect
-	github.com/golang/protobuf v1.5.3 // indirect
-	github.com/twitchtv/twirp v8.1.3+incompatible // indirect
-	golang.org/x/crypto v0.9.0 // indirect
-	golang.org/x/exp v0.0.0-20230515195305-f3d0a9c9a5cc // indirect
-	golang.org/x/net v0.10.0 // indirect
-	golang.org/x/sys v0.8.0 // indirect
-	golang.org/x/text v0.9.0 // indirect
-	google.golang.org/genproto v0.0.0-20230403163135-c38d8f061ccd // indirect
-	google.golang.org/grpc v1.55.0 // indirect
-	google.golang.org/protobuf v1.30.0 // indirect
-	gopkg.in/yaml.v3 v3.0.1 // indirect
-)

backend/auth/go.sum

@@ -1,94 +0,0 @@
-github.com/beorn7/perks v1.0.1 h1:VlbKKnNfV8bJzeqoa4cOKqO6bYr3WgKZxO8Z16+hsOM=
-github.com/cespare/xxhash/v2 v2.2.0 h1:DC2CZ1Ep5Y4k3ZQ899DldepgrayRUGE6BBZ/cd9Cj44=
-github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
-github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
-github.com/dgryski/go-rendezvous v0.0.0-20200823014737-9f7001d12a5f h1:lO4WD4F/rVNCu3HqELle0jiPLLBs70cWOduZpkS1E78=
-github.com/eapache/channels v1.1.0 h1:F1taHcn7/F0i8DYqKXJnyhJcVpp2kgFcNePxXtnyu4k=
-github.com/eapache/queue v1.1.0 h1:YOEu7KNc61ntiQlcEeUIoDTJ2o8mQznoNvUhiigpIqc=
-github.com/frostbyte73/core v0.0.9 h1:AmE9GjgGpPsWk9ZkmY3HsYUs2hf2tZt+/W6r49URBQI=
-github.com/gammazero/deque v0.2.1 h1:qSdsbG6pgp6nL7A0+K/B7s12mcCY/5l5SIUpMOl+dC0=
-github.com/go-jose/go-jose/v3 v3.0.0 h1:s6rrhirfEP/CGIoc6p+PZAeogN2SxKav6Wp7+dyMWVo=
-github.com/go-jose/go-jose/v3 v3.0.0/go.mod h1:RNkWWRld676jZEYoV3+XK8L2ZnNSvIsxFMht0mSX+u8=
-github.com/go-logr/logr v1.2.4 h1:g01GSCwiDw2xSZfjJ2/T9M+S6pFdcNtFYsp+Y43HYDQ=
-github.com/golang/protobuf v1.5.0/go.mod h1:FsONVRAS9T7sI+LIUmWTfcYkHO4aIWwzhcaSAoJOfIk=
-github.com/golang/protobuf v1.5.3 h1:KhyjKVUg7Usr/dYsdSqoFveMYd5ko72D+zANwlG1mmg=
-github.com/golang/protobuf v1.5.3/go.mod h1:XVQd3VNwM+JqD3oG2Ue2ip4fOMUkwXdXDdiuN0vRsmY=
-github.com/google/go-cmp v0.5.0/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
-github.com/google/go-cmp v0.5.5/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
-github.com/google/go-cmp v0.5.9 h1:O2Tfq5qg4qc4AmwVlvv0oLiVAGB7enBSJ2x2DqQFi38=
-github.com/google/uuid v1.3.0 h1:t6JiXgmwXMjEs8VusXIJk2BXHsn+wx8BZdTaoZ5fu7I=
-github.com/jxskiss/base62 v1.1.0 h1:A5zbF8v8WXx2xixnAKD2w+abC+sIzYJX+nxmhA6HWFw=
-github.com/lithammer/shortuuid/v4 v4.0.0 h1:QRbbVkfgNippHOS8PXDkti4NaWeyYfcBTHtw7k08o4c=
-github.com/livekit/mageutil v0.0.0-20230125210925-54e8a70427c1 h1:jm09419p0lqTkDaKb5iXdynYrzB84ErPPO4LbRASk58=
-github.com/livekit/protocol v1.5.7 h1:jZeFQEmLuIhFblXDGPRCBbfjVJHb+YU7AsO+SMoXF70=
-github.com/livekit/protocol v1.5.7/go.mod h1:ZaOnsvP+JS4s7vI1UO+JVdBagvvLp/lBXDAl2hkDS0I=
-github.com/livekit/psrpc v0.3.0 h1:giBZsfM3CWA0oIYXofsMITbVQtyW7u/ES9sQmVspHPM=
-github.com/mackerelio/go-osstat v0.2.4 h1:qxGbdPkFo65PXOb/F/nhDKpF2nGmGaCFDLXoZjJTtUs=
-github.com/matttproud/golang_protobuf_extensions v1.0.4 h1:mmDVorXM7PCGKw94cs5zkfA9PSy5pEvNWRP0ET0TIVo=
-github.com/nats-io/nats.go v1.25.0 h1:t5/wCPGciR7X3Mu8QOi4jiJaXaWM8qtkLu4lzGZvYHE=
-github.com/nats-io/nkeys v0.4.4 h1:xvBJ8d69TznjcQl9t6//Q5xXuVhyYiSos6RPtvQNTwA=
-github.com/nats-io/nuid v1.0.1 h1:5iA8DT8V7q8WK2EScv2padNa/rTESc1KdnPw4TC2paw=
-github.com/pion/datachannel v1.5.5 h1:10ef4kwdjije+M9d7Xm9im2Y3O6A6ccQb0zcqZcJew8=
-github.com/pion/dtls/v2 v2.2.6 h1:yXMxKr0Skd+Ub6A8UqXTRLSywskx93ooMRHsQUtd+Z4=
-github.com/pion/ice/v2 v2.3.4 h1:tjYjTLpWyZzUjpDnzk6T1y3oQyhyY2DiM2t095iDhyQ=
-github.com/pion/interceptor v0.1.16 h1:0GDZrfNO+BmVNWymS31fMlVtPO2IJVBzy2Qq5XCYMIg=
-github.com/pion/logging v0.2.2 h1:M9+AIj/+pxNsDfAT64+MAVgJO0rsyLnoJKCqf//DoeY=
-github.com/pion/mdns v0.0.7 h1:P0UB4Sr6xDWEox0kTVxF0LmQihtCbSAdW0H2nEgkA3U=
-github.com/pion/randutil v0.1.0 h1:CFG1UdESneORglEsnimhUjf33Rwjubwj6xfiOXBa3mA=
-github.com/pion/rtcp v1.2.10 h1:nkr3uj+8Sp97zyItdN60tE/S6vk4al5CPRR6Gejsdjc=
-github.com/pion/rtp v1.7.13 h1:qcHwlmtiI50t1XivvoawdCGTP4Uiypzfrsap+bijcoA=
-github.com/pion/sctp v1.8.7 h1:JnABvFakZueGAn4KU/4PSKg+GWbF6QWbKTWZOSGJjXw=
-github.com/pion/sdp/v3 v3.0.6 h1:WuDLhtuFUUVpTfus9ILC4HRyHsW6TdugjEX/QY9OiUw=
-github.com/pion/srtp/v2 v2.0.14 h1:Glt0MqEvINrDxL+aanmK4DiFjvs+uN2iYc6XD/iKpoY=
-github.com/pion/stun v0.5.2 h1:J/8glQnDV91dfk2+ZnGN0o9bUJgABhTNljwfQWByoXE=
-github.com/pion/transport/v2 v2.2.0 h1:u5lFqFHkXLMXMzai8tixZDfVjb8eOjH35yCunhPeb1c=
-github.com/pion/turn/v2 v2.1.0 h1:5wGHSgGhJhP/RpabkUb/T9PdsAjkGLS6toYz5HNzoSI=
-github.com/pion/udp/v2 v2.0.1 h1:xP0z6WNux1zWEjhC7onRA3EwwSliXqu1ElUZAQhUP54=
-github.com/pion/webrtc/v3 v3.2.4 h1:gWSx4dqQb77051qBT9ipDrOyP6/sGYcAQP3UPjM8pU8=
-github.com/pkg/errors v0.9.1 h1:FEBLx1zS214owpjy7qsBeixbURkuhQAwrK5UwLGTwt4=
-github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
-github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
-github.com/prometheus/client_golang v1.15.1 h1:8tXpTmJbyH5lydzFPoxSIJ0J46jdh3tylbvM1xCv0LI=
-github.com/prometheus/client_model v0.3.0 h1:UBgGFHqYdG/TPFD1B1ogZywDqEkwp3fBMvqdiQ7Xew4=
-github.com/prometheus/common v0.42.0 h1:EKsfXEYo4JpWMHH5cg+KOUWeuJSov1Id8zGR8eeI1YM=
-github.com/prometheus/procfs v0.9.0 h1:wzCHvIvM5SxWqYvwgVL7yJY8Lz3PKn49KQtpgMYJfhI=
-github.com/redis/go-redis/v9 v9.0.4 h1:FC82T+CHJ/Q/PdyLW++GeCO+Ol59Y4T7R4jbgjvktgc=
-github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
-github.com/stretchr/testify v1.6.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
-github.com/stretchr/testify v1.8.3 h1:RP3t2pwF7cMEbC1dqtB6poj3niw/9gnV4Cjg5oW5gtY=
-github.com/twitchtv/twirp v8.1.3+incompatible h1:+F4TdErPgSUbMZMwp13Q/KgDVuI7HJXP61mNV3/7iuU=
-github.com/twitchtv/twirp v8.1.3+incompatible/go.mod h1:RRJoFSAmTEh2weEqWtpPE3vFK5YBhA6bqp2l1kfCC5A=
-go.uber.org/atomic v1.11.0 h1:ZvwS0R+56ePWxUNi+Atn9dWONBPp/AUETXlHW0DxSjE=
-go.uber.org/multierr v1.6.0 h1:y6IPFStTAIT5Ytl7/XYmHvzXQ7S3g/IeZW9hyZ5thw4=
-go.uber.org/zap v1.24.0 h1:FiJd5l1UOLj0wCgbSE0rwwXHzEdAZS6hiiSnxJN/D60=
-golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
-golang.org/x/crypto v0.0.0-20190911031432-227b76d455e7/go.mod h1:yigFU9vqHzYiE8UmvKecakEJjdnWj3jj499lnFckfCI=
-golang.org/x/crypto v0.9.0 h1:LF6fAI+IutBocDJ2OT0Q1g8plpYljMZ4+lty+dsqw3g=
-golang.org/x/crypto v0.9.0/go.mod h1:yrmDGqONDYtNj3tH8X9dzUun2m2lzPa9ngI6/RUPGR0=
-golang.org/x/exp v0.0.0-20230515195305-f3d0a9c9a5cc h1:mCRnTeVUjcrhlRmO0VK8a6k6Rrf6TF9htwo2pJVSjIU=
-golang.org/x/exp v0.0.0-20230515195305-f3d0a9c9a5cc/go.mod h1:V1LtkGg67GoY2N1AnLN78QLrzxkLyJw7RJb1gzOOz9w=
-golang.org/x/net v0.0.0-20190404232315-eb5bcb51f2a3/go.mod h1:t9HGtf8HONx5eT2rtn7q6eTqICYqUVnKs3thJo3Qplg=
-golang.org/x/net v0.10.0 h1:X2//UzNDwYmtCLn7To6G58Wr6f5ahEAQgKNzv9Y951M=
-golang.org/x/net v0.10.0/go.mod h1:0qNGK6F8kojg2nk9dLZ2mShWaEBan6FAoqfSigmmuDg=
-golang.org/x/sync v0.1.0 h1:wsuoTGHzEhffawBOhz5CYhcrV4IdKZbEyZjBMuTp12o=
-golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
-golang.org/x/sys v0.0.0-20190412213103-97732733099d/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
-golang.org/x/sys v0.8.0 h1:EBmGv8NaZBZTWvrbjNoL6HVt+IVy3QDQpJs7VRIw3tU=
-golang.org/x/sys v0.8.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
-golang.org/x/text v0.9.0 h1:2sjJmO8cDvYveuX97RDLsxlyUxLl+GHoLxBiRdHllBE=
-golang.org/x/text v0.9.0/go.mod h1:e1OnstbJyHTd6l/uOt8jFFHp6TRDWZR/bV3emEE/zU8=
-golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
-google.golang.org/genproto v0.0.0-20230403163135-c38d8f061ccd h1:sLpv7bNL1AsX3fdnWh9WVh7ejIzXdOc1RRHGeAmeStU=
-google.golang.org/genproto v0.0.0-20230403163135-c38d8f061ccd/go.mod h1:UUQDJDOlWu4KYeJZffbWgBkS1YFobzKbLVfK69pe0Ak=
-google.golang.org/grpc v1.55.0 h1:3Oj82/tFSCeUrRTg/5E/7d/W5A1tj6Ky1ABAuZuv5ag=
-google.golang.org/grpc v1.55.0/go.mod h1:iYEXKGkEBhg1PjZQvoYEVPTDkHo1/bjTnfwTeGONTY8=
-google.golang.org/protobuf v1.26.0-rc.1/go.mod h1:jlhhOSvTdKEhbULTjvd4ARK9grFBp09yW+WbY/TyQbw=
-google.golang.org/protobuf v1.26.0/go.mod h1:9q0QmTI4eRPtz6boOQmLYwt+qCgq0jsYwAQnmE0givc=
-google.golang.org/protobuf v1.30.0 h1:kPPoIgf3TsEvrm0PFe15JQ+570QVxYzEvvHqChK+cng=
-google.golang.org/protobuf v1.30.0/go.mod h1:HV8QOd/L58Z+nl8r43ehVNZIU/HEI6OcFqwMG9pJV4I=
-gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405 h1:yhCVgyC4o1eVCa2tZl7eS0r+SDo693bJlVdllGtEeKM=
-gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
-gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
-gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
-gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=

backend/auth/server.go

@@ -1,98 +0,0 @@
-package main
-
-import (
-	"encoding/json"
-	"log"
-	"net/http"
-	"os"
-
-	"time"
-
-	"github.com/livekit/protocol/auth"
-)
-
-type Handler struct {
-	key, secret string
-}
-
-func (h *Handler) handle(w http.ResponseWriter, r *http.Request) {
-	log.Printf("Request from %s", r.RemoteAddr)
-
-	// Set the CORS headers
-	w.Header().Set("Access-Control-Allow-Origin", "*")
-	w.Header().Set("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE")
-	w.Header().Set("Access-Control-Allow-Headers", "Accept, Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization")
-
-	// Handle preflight request (CORS)
-	if r.Method == "OPTIONS" {
-		w.WriteHeader(http.StatusOK)
-		return
-	}
-
-	roomName := r.URL.Query().Get("roomName")
-	name := r.URL.Query().Get("name")
-	identity := r.URL.Query().Get("identity")
-
-	log.Printf("roomName: %s, name: %s, identity: %s", roomName, name, identity)
-
-	if roomName == "" || name == "" || identity == "" {
-		w.WriteHeader(http.StatusBadRequest)
-		return
-	}
-
-	token, err := getJoinToken(h.key, h.secret, roomName, identity, name)
-	if err != nil {
-		w.WriteHeader(http.StatusInternalServerError)
-		return
-	}
-
-	res := Response{token}
-
-	w.Header().Set("Content-Type", "application/json")
-	json.NewEncoder(w).Encode(res)
-}
-
-func main() {
-	key := os.Getenv("LIVEKIT_KEY")
-	secret := os.Getenv("LIVEKIT_SECRET")
-
-	// Check if the key and secret are empty.
-	if key == "" || secret == "" {
-		log.Fatal("LIVEKIT_KEY and LIVEKIT_SECRET environment variables must be set")
-	}
-
-	log.Printf("LIVEKIT_KEY: %s and LIVEKIT_SECRET %s", key, secret)
-
-	handler := &Handler{
-		key:    key,
-		secret: secret,
-	}
-
-	http.HandleFunc("/token", handler.handle)
-	log.Fatal(http.ListenAndServe(":8080", nil))
-}
-
-type Response struct {
-	Token string `json:"accessToken"`
-}
-
-func getJoinToken(apiKey, apiSecret, room, identity, name string) (string, error) {
-	at := auth.NewAccessToken(apiKey, apiSecret)
-
-	canPublish := true
-	canSubscribe := true
-	grant := &auth.VideoGrant{
-		RoomJoin:     true,
-		RoomCreate:   true,
-		CanPublish:   &canPublish,
-		CanSubscribe: &canSubscribe,
-		Room:         room,
-	}
-
-	at.AddGrant(grant).
-		SetIdentity(identity).
-		SetValidFor(time.Hour).
-		SetName(name)
-
-	return at.ToJWT()
-}

config/element_io_preview.json

@@ -6,7 +6,7 @@
     }
   },
   "livekit": {
-    "livekit_service_url": "https://livekit.element.dev"
+    "livekit_service_url": "https://livekit-jwt.call.element.dev"
   },
   "posthog": {
     "api_key": "phc_rXGHx9vDmyEvyRxPziYtdVIv0ahEv8A9uLWFcCi1WcU",

package.json

@@ -9,8 +9,9 @@
     "build-storybook": "build-storybook",
     "prettier:check": "prettier -c .",
     "prettier:format": "prettier -w .",
-    "lint": "yarn lint:types && yarn lint:js",
+    "lint": "yarn lint:types && yarn lint:eslint",
-    "lint:js": "eslint --max-warnings 0 src",
+    "lint:eslint": "eslint --max-warnings 0 src",
+    "lint:eslint-fix": "eslint --max-warnings 0 src --fix",
     "lint:types": "tsc",
     "i18n": "node_modules/i18next-parser/bin/cli.js",
     "i18n:check": "node_modules/i18next-parser/bin/cli.js --fail-on-warnings --fail-on-update",
@@ -19,7 +20,7 @@
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.3.1",
-    "@livekit/components-react": "^1.0.7",
+    "@livekit/components-react": "1.1.0",
     "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.14.tgz",
     "@opentelemetry/api": "^1.4.0",
     "@opentelemetry/context-zone": "^1.9.1",
@@ -45,9 +46,8 @@
     "@react-stately/tree": "^3.2.0",
     "@sentry/react": "^6.13.3",
     "@sentry/tracing": "^6.13.3",
-    "@types/grecaptcha": "^3.0.4",
-    "@types/sdp-transform": "^2.4.5",
     "@use-gesture/react": "^10.2.11",
+    "@vitejs/plugin-basic-ssl": "^1.0.1",
     "@vitejs/plugin-react": "^4.0.1",
     "classnames": "^2.3.1",
     "color-hash": "^2.0.1",
@@ -55,9 +55,9 @@
     "i18next": "^21.10.0",
     "i18next-browser-languagedetector": "^6.1.8",
     "i18next-http-backend": "^1.4.4",
-    "livekit-client": "^1.11.4",
+    "livekit-client": "1.12.3",
     "lodash": "^4.17.21",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#4b3406daa95c8f969f386341b8b632ba4a60501a",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#b698217445318f453e0b1086364a33113eaa85d9",
     "matrix-widget-api": "^1.3.1",
     "mermaid": "^8.13.8",
     "normalize.css": "^8.0.1",
@@ -69,13 +69,13 @@
     "react-dom": "18",
     "react-i18next": "^11.18.6",
     "react-json-view": "^1.21.3",
-    "react-router": "6",
     "react-router-dom": "^5.2.0",
     "react-use-clipboard": "^1.0.7",
     "react-use-measure": "^2.1.1",
     "sdp-transform": "^2.14.1",
     "tinyqueue": "^2.0.3",
-    "unique-names-generator": "^4.6.0"
+    "unique-names-generator": "^4.6.0",
+    "uuid": "9"
   },
   "devDependencies": {
     "@babel/core": "^7.16.5",
@@ -83,10 +83,16 @@
     "@storybook/react": "^6.5.0-alpha.5",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
+    "@types/content-type": "^1.1.5",
+    "@types/dom-screen-wake-lock": "^1.0.1",
+    "@types/grecaptcha": "^3.0.4",
     "@types/node": "^18.13.0",
+    "@types/react-router-dom": "^5.3.3",
     "@types/request": "^2.48.8",
-    "@typescript-eslint/eslint-plugin": "^5.52.0",
+    "@types/sdp-transform": "^2.4.5",
-    "@typescript-eslint/parser": "^5.52.0",
+    "@types/uuid": "9",
+    "@typescript-eslint/eslint-plugin": "^6.1.0",
+    "@typescript-eslint/parser": "^6.1.0",
     "babel-loader": "^8.2.3",
     "babel-plugin-transform-vite-meta-env": "^1.0.3",
     "eslint": "^8.14.0",
@@ -101,11 +107,11 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.2.2",
     "jest-environment-jsdom": "^29.3.1",
+    "jest-mock": "^29.5.0",
     "prettier": "^2.6.2",
     "sass": "^1.42.1",
     "storybook-builder-vite": "^0.1.12",
-    "typescript": "^4.9.5",
+    "typescript": "^5.1.6",
-    "typescript-strict-plugin": "^2.0.1",
     "vite": "^4.2.0",
     "vite-plugin-html-template": "^1.1.0",
     "vite-plugin-svgr": "^3.2.0"

public/locales/bg/app.json

@@ -5,7 +5,6 @@
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Друг потребител в този разговор има проблем. За да диагностицираме този проблем по-добре ни се иска да съберем debug логове.",
   "Audio": "Звук",
   "Avatar": "Аватар",
-  "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>": "Натискайки \"Влез в разговора сега\", се съгласявате с нашите <2>Правила и условия</2>",
   "Call link copied": "Връзка към разговора бе копирана",
   "Call type menu": "Меню \"тип на разговора\"",
   "Camera": "Камера",
@@ -72,7 +71,6 @@
   "Stop sharing screen": "Спри споделянето на екрана",
   "Submit feedback": "Изпрати обратна връзка",
   "Take me Home": "Отиди в Начало",
-  "Thanks! We'll get right on it.": "Благодарим! Веднага ще се заемем.",
   "This call already exists, would you like to join?": "Този разговор вече съществува, искате ли да се присъедините?",
   "Turn off camera": "Изключи камерата",
   "Turn on camera": "Включи камерата",

public/locales/cs/app.json

@@ -23,7 +23,6 @@
   "Turn on camera": "Zapnout kameru",
   "Turn off camera": "Vypnout kameru",
   "This call already exists, would you like to join?": "Tento hovor již existuje, chcete se připojit?",
-  "Thanks! We'll get right on it.": "Děkujeme! Hned se na to vrhneme.",
   "Take me Home": "Domovská obrazovka",
   "Submit feedback": "Dát feedback",
   "Stop sharing screen": "Zastavit sdílení obrazovek",
@@ -89,7 +88,6 @@
   "Create account": "Vytvořit účet",
   "Copy": "Kopírovat",
   "Call type menu": "Menu typu hovoru",
-  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "Kliknutím na \"Pokračovat\", odsouhlasíte naše <2>Terms and conditions</2>",
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Jiný uživatel v tomto hovoru má problémy. Abychom mohli diagnostikovat problém, rádi bychom shromáždili protokoly ladění.",
   "<0>Why not finish by setting up a password to keep your account?</0><1>You'll be able to keep your name and set an avatar for use on future calls</1>": "<0>Proč neskončit nastavením hesla, abyste mohli účet použít znovu?</0><1>Budete si moci nechat své jméno a nastavit si avatar pro budoucí hovory </1>",
   "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Připojit se</0><1>Or</1><2>Zkopírovat odkaz a připojit se později</2>",

public/locales/de/app.json

@@ -5,7 +5,6 @@
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Ein anderer Benutzer dieses Anrufs hat ein Problem. Um es besser diagnostizieren zu können, würden wir gerne ein Debug-Protokoll erstellen.",
   "Audio": "Audio",
   "Avatar": "Avatar",
-  "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>": "Wenn du auf „Anruf beitreten“ klickst, akzeptierst du unsere <2>Geschäftsbedingungen</2>",
   "Call link copied": "Anruflink kopiert",
   "Call type menu": "Anruftyp Menü",
   "Camera": "Kamera",
@@ -71,7 +70,6 @@
   "Stop sharing screen": "Beenden der Bildschirmfreigabe",
   "Submit feedback": "Rückmeldung geben",
   "Take me Home": "Zurück zur Startseite",
-  "Thanks! We'll get right on it.": "Vielen Dank! Wir werden uns sofort darum kümmern.",
   "This call already exists, would you like to join?": "Dieser Aufruf existiert bereits, möchtest Du teilnehmen?",
   "Turn off camera": "Kamera ausschalten",
   "Turn on camera": "Kamera einschalten",
@@ -113,5 +111,17 @@
   "{{count}} stars|one": "{{count}} Stern",
   "<0>Thanks for your feedback!</0>": "<0>Danke für deine Rückmeldung!</0>",
   "{{displayName}} is presenting": "{{displayName}} präsentiert",
-  "Show connection stats": "Verbindungsstatistiken zeigen"
+  "Show connection stats": "Verbindungsstatistiken zeigen",
+  "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Mit einem Klick auf „Anruf beitreten“ akzeptierst du unseren <2>Endbenutzer-Lizenzvertrag (EULA)</2>",
+  "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Mit einem Klick auf „Los geht’s“ akzeptierst du unseren <2>Endbenutzer-Lizenzvertrag (EULA)</2>",
+  "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>": "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>",
+  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Element Call ist temporär nicht Ende-zu-Ende-verschlüsselt, während wir die Skalierbarkeit testen.",
+  "Connectivity to the server has been lost.": "Die Verbindung zum Server wurde getrennt.",
+  "Enable end-to-end encryption (password protected calls)": "Ende-zu-Ende-Verschlüsselung aktivieren (Passwort geschützte Anrufe)",
+  "Password (if none, E2EE is disabled)": "Passwort (falls leer, wird E2EE deaktiviert)",
+  "End-to-end encryption isn't supported on your browser.": "Ende-zu-Ende-Verschlüsselung wird in deinem Browser nicht unterstützt.",
+  "Thanks!": "Danke!",
+  "You were disconnected from the call": "Deine Verbindung wurde getrennt",
+  "Reconnect": "Erneut verbinden",
+  "Retry sending logs": "Protokolle erneut senden"
 }

public/locales/el/app.json

@@ -91,7 +91,6 @@
   "Grid layout menu": "Μενού διάταξης πλέγματος",
   "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.": "Εάν αντιμετωπίζετε προβλήματα ή απλά θέλετε να μας δώσετε κάποια σχόλια, παρακαλούμε στείλτε μας μια σύντομη περιγραφή παρακάτω.",
   "Other users are trying to join this call from incompatible versions. These users should ensure that they have refreshed their browsers:<1>{userLis}</1>": "Κάποιοι άλλοι χρήστες προσπαθούν να συμμετάσχουν σε αυτή την κλήση από ασύμβατες εκδόσεις. Αυτοί οι χρήστες θα πρέπει να βεβαιωθούν ότι έχουν κάνει ανανέωση (refresh) την καρτέλα του περιηγητή τους:<1>{userLis}</1>",
-  "Thanks! We'll get right on it.": "Ευχαριστούμε! Θα το ερευνήσουμε αμέσως.",
   "Expose developer settings in the settings window.": "Εμφάνιση ρυθμίσεων προγραμματιστή στο παράθυρο ρυθμίσεων.",
   "Feedback": "Ανατροφοδότηση",
   "Submitting…": "Υποβολή…",

public/locales/en-GB/app.json

@@ -25,6 +25,7 @@
   "Change layout": "Change layout",
   "Close": "Close",
   "Confirm password": "Confirm password",
+  "Connectivity to the server has been lost.": "Connectivity to the server has been lost.",
   "Copied!": "Copied!",
   "Copy": "Copy",
   "Copy and share this call link": "Copy and share this call link",
@@ -37,7 +38,9 @@
   "Display name": "Display name",
   "Download debug logs": "Download debug logs",
   "Element Call Home": "Element Call Home",
-  "Element Call is temporarily not encrypted while we test scalability.": "Element Call is temporarily not encrypted while we test scalability.",
+  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Element Call is temporarily not end-to-end encrypted while we test scalability.",
+  "Enable end-to-end encryption (password protected calls)": "Enable end-to-end encryption (password protected calls)",
+  "End-to-end encryption isn't supported on your browser.": "End-to-end encryption isn't supported on your browser.",
   "Exit full screen": "Exit full screen",
   "Expose developer settings in the settings window.": "Expose developer settings in the settings window.",
   "Feedback": "Feedback",
@@ -72,13 +75,16 @@
   "Not registered yet? <2>Create an account</2>": "Not registered yet? <2>Create an account</2>",
   "Other users are trying to join this call from incompatible versions. These users should ensure that they have refreshed their browsers:<1>{userLis}</1>": "Other users are trying to join this call from incompatible versions. These users should ensure that they have refreshed their browsers:<1>{userLis}</1>",
   "Password": "Password",
+  "Password (if none, E2EE is disabled)": "Password (if none, E2EE is disabled)",
   "Passwords must match": "Passwords must match",
   "Profile": "Profile",
   "Recaptcha dismissed": "Recaptcha dismissed",
   "Recaptcha not loaded": "Recaptcha not loaded",
+  "Reconnect": "Reconnect",
   "Register": "Register",
   "Registering…": "Registering…",
   "Remove": "Remove",
+  "Retry sending logs": "Retry sending logs",
   "Return to home screen": "Return to home screen",
   "Select an option": "Select an option",
   "Send debug logs": "Send debug logs",
@@ -98,7 +104,7 @@
   "Submitting…": "Submitting…",
   "Take me Home": "Take me Home",
   "Thanks, we received your feedback!": "Thanks, we received your feedback!",
-  "Thanks! We'll get right on it.": "Thanks! We'll get right on it.",
+  "Thanks!": "Thanks!",
   "This call already exists, would you like to join?": "This call already exists, would you like to join?",
   "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>": "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>",
   "Turn off camera": "Turn off camera",
@@ -115,6 +121,7 @@
   "Walkie-talkie call name": "Walkie-talkie call name",
   "WebRTC is not supported or is being blocked in this browser.": "WebRTC is not supported or is being blocked in this browser.",
   "Yes, join call": "Yes, join call",
+  "You were disconnected from the call": "You were disconnected from the call",
   "Your feedback": "Your feedback",
   "Your recent calls": "Your recent calls"
 }

public/locales/es/app.json

@@ -6,7 +6,6 @@
   "Register": "Registrarse",
   "Not registered yet? <2>Create an account</2>": "¿No estás registrado todavía? <2>Crear una cuenta</2>",
   "Login to your account": "Iniciar sesión en tu cuenta",
-  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "Al hacer clic en \"Comenzar\" aceptarás nuestros <2>Términos y condiciones</2>",
   "Yes, join call": "Si, unirse a la llamada",
   "Walkie-talkie call name": "Nombre de la llamada Walkie-talkie",
   "Walkie-talkie call": "Llamada Walkie-talkie",
@@ -20,7 +19,6 @@
   "Unmute microphone": "Desilenciar el micrófono",
   "Turn on camera": "Encender la cámara",
   "Turn off camera": "Apagar la cámara",
-  "Thanks! We'll get right on it.": "¡Gracias! Nos encargaremos de ello.",
   "Take me Home": "Volver al inicio",
   "Submit feedback": "Enviar comentarios",
   "Stop sharing screen": "Dejar de compartir pantalla",
@@ -99,5 +97,23 @@
   "Expose developer settings in the settings window.": "Muestra los ajustes de desarrollador en la ventana de ajustes.",
   "Developer Settings": "Ajustes de desarrollador",
   "By participating in this beta, you consent to the collection of anonymous data, which we use to improve the product. You can find more information about which data we track in our <2>Privacy Policy</2> and our <5>Cookie Policy</5>.": "Al participar en esta beta, consientes a la recogida de datos anónimos, los cuales usaremos para mejorar el producto. Puedes encontrar más información sobre que datos recogemos en nuestra <2>Política de privacidad</2> y en nuestra <5>Política sobre Cookies</5>.",
-  "<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.": "<0></0><1></1>Puedes retirar tu consentimiento desmarcando esta casilla. Si estás en una llamada, este ajuste se aplicará al final de esta."
+  "<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.": "<0></0><1></1>Puedes retirar tu consentimiento desmarcando esta casilla. Si estás en una llamada, este ajuste se aplicará al final de esta.",
+  "{{displayName}} is presenting": "{{displayName}} está presentando",
+  "<0>Thanks for your feedback!</0>": "<0>¡Gracias por tus comentarios!</0>",
+  "How did it go?": "¿Cómo ha ido?",
+  "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>": "Este sitio está protegido por ReCAPTCHA y se aplican la <2>Política de Privacidad</2> y los <6>Términos de Servicio de Google.<9></9>Al hacer clic en \"Registrar\", aceptas nuestro <12>Contrato de Licencia de Usuario Final (CLUF)</12>",
+  "Show connection stats": "Mostrar estadísticas de conexión",
+  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Element Call no está encriptado de extremo a extremo de manera temporal mientras probamos la escalabilidad del servicio.",
+  "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Al hacer clic en \"Comenzar\", aceptas nuestro <2>Contrato de Licencia de Usuario Final (CLUF)</2>",
+  "Thanks, we received your feedback!": "¡Gracias, hemos recibido tus comentarios!",
+  "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.": "Si tienes algún problema o simplemente quieres darnos tu opinión, por favor envíanos una breve descripción.",
+  "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Al hacer clic en \"Unirse a la llamada ahora\", aceptas nuestro <2>Contrato de Licencia de Usuario Final (CLUF)</2>",
+  "<0>We'd love to hear your feedback so we can improve your experience.</0>": "<0>Nos encantaría conocer tu opinión para que podamos mejorar tu experiencia</0>",
+  "Feedback": "Danos tu opinión",
+  "Submit": "Enviar",
+  "{{count}} stars|one": "{{count}} estrella",
+  "{{count}} stars|other": "{{count}} estrellas",
+  "{{displayName}}, your call has ended.": "{{displayName}}, tu llamada ha finalizado.",
+  "Submitting…": "Enviando…",
+  "Your feedback": "Tus comentarios"
 }

public/locales/et/app.json

@@ -32,13 +32,12 @@
   "Camera": "Kaamera",
   "Call type menu": "Kõnetüübi valik",
   "Call link copied": "Kõne link on kopeeritud",
-  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "Klõpsides „Jätka“nõustud sa meie <2>kasutustingimustega</2>",
   "Avatar": "Tunnuspilt",
   "Audio": "Heli",
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Ühel teisel selles kõnes osalejal on lahenduse kasutamisel tekkinud probleem ning selle põhjuse leidmiseks me sooviksime koguda silumislogisid.",
   "Passwords must match": "Salasõnad ei klapi",
   "Password": "Salasõna",
-  "Not registered yet? <2>Create an account</2>": "Pole veel registreerunud? <2>Loo kasutajakonto</2>",
+  "Not registered yet? <2>Create an account</2>": "Sa pole veel registreerunud? <2>Loo kasutajakonto</2>",
   "Not now, return to home screen": "Mitte praegu, mine tagasi avalehele",
   "No": "Ei",
   "Mute microphone": "Summuta mikrofon",
@@ -52,7 +51,7 @@
   "Loading…": "Laadimine …",
   "Leave": "Lahku",
   "Join existing call?": "Liitu juba käimasoleva kõnega?",
-  "Join call now": "Kõnega liitumine",
+  "Join call now": "Liitu kõnega kohe",
   "Join call": "Kõnega liitumine",
   "Turn on camera": "Lülita kaamera sisse",
   "Turn off camera": "Lülita kaamera välja",
@@ -85,7 +84,6 @@
   "Version: {{version}}": "Versioon: {{version}}",
   "Username": "Kasutajanimi",
   "This call already exists, would you like to join?": "See kõne on juba olemas, kas soovid liituda?",
-  "Thanks! We'll get right on it.": "Tänud! Tegeleme sellega esimesel võimalusel.",
   "Unmute microphone": "Aktiveeri mikrofon",
   "User menu": "Kasutajamenüü",
   "Yes, join call": "Jah, liitu kõnega",
@@ -113,5 +111,17 @@
   "<0>Thanks for your feedback!</0>": "<0>Täname Sind tagasiside eest!</0>",
   "<0>We'd love to hear your feedback so we can improve your experience.</0>": "<0>Meie rakenduse paremaks muutmiseks me hea meelega ootame Sinu arvamusi.</0>",
   "Show connection stats": "Näita ühenduse statistikat",
-  "{{displayName}} is presenting": "{{displayName}} on esitlemas"
+  "{{displayName}} is presenting": "{{displayName}} on esitlemas",
+  "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Klõpsides „Jätka“, nõustud sa meie <2>Lõppkasutaja litsentsilepinguga (EULA)</2>",
+  "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Klõpsides „Liitu kõnega kohe“, nõustud sa meie <2>Lõppkasutaja litsentsilepinguga (EULA)</2>",
+  "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>": "Selles saidis on kasutusel ReCAPTCHA ja kehtivad Google'i <2>Privaatsuspoliitika</2> ning <6>Teenusetingimused</6>.<9></9>Klõpsides „Registreeru“, sa nõustud meie <12>Lõppkasutaja litsentsilepingu (EULA) tingimustega</12>",
+  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Seni kuni me testime skaleeritavust, siis Element Call ajutiselt pole läbivalt krüptitud.",
+  "Connectivity to the server has been lost.": "Võrguühendus serveriga on katkenud.",
+  "Retry sending logs": "Proovi uuesti logisid saata",
+  "You were disconnected from the call": "Sinu ühendus kõnega katkes",
+  "Reconnect": "Ühenda uuesti",
+  "Thanks!": "Tänud!",
+  "End-to-end encryption isn't supported on your browser.": "Sinu brauser ei toeta läbivat krüptimist.",
+  "Enable end-to-end encryption (password protected calls)": "Võta kasutusele läbiv krüptimine (salasõnaga kaitstud kõned)",
+  "Password (if none, E2EE is disabled)": "Salasõna (tühja väärtuse puhul läbivat krüptimist ei kasutata)"
 }

public/locales/fa/app.json

@@ -45,7 +45,6 @@
   "Camera": "دوربین",
   "Call type menu": "منوی نوع تماس",
   "Call link copied": "لینک تماس کپی شد",
-  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "با کلیک بر روی برو، شما با <2>شرایط و قوانین استفاده</2> موافقت می‌کنید",
   "Avatar": "آواتار",
   "Audio": "صدا",
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "کاربر دیگری در این تماس مشکلی دارد. برای تشخیص بهتر مشکل، بهتر است ما لاگ عیب‌یابی را جمع‌آوری کنیم.",
@@ -88,7 +87,6 @@
   "User menu": "فهرست کاربر",
   "Unmute microphone": "ناخموشی میکروفون",
   "This call already exists, would you like to join?": "این تماس از قبل وجود دارد، می‌خواهید بپیوندید؟",
-  "Thanks! We'll get right on it.": "با تشکر! ما به درستی آن را انجام خواهیم داد.",
   "Submit feedback": "بازخورد ارائه دهید",
   "Stop sharing screen": "توقف اشتراک‌گذاری صفحه نمایش",
   "Element Call Home": "خانهٔ تماس المنت",

public/locales/fr/app.json

@@ -4,7 +4,6 @@
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Un autre utilisateur dans cet appel a un problème. Pour nous permettre de résoudre le problème, nous aimerions récupérer un journal de débogage.",
   "Audio": "Audio",
   "Avatar": "Avatar",
-  "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>": "En cliquant sur « Rejoindre l’appel » vous acceptez nos <2>conditions d’utilisation</2>",
   "Call link copied": "Lien de l’appel copié",
   "Call type menu": "Menu de type d’appel",
   "Camera": "Caméra",
@@ -68,7 +67,6 @@
   "Stop sharing screen": "Arrêter le partage d’écran",
   "Submit feedback": "Envoyer des retours",
   "Take me Home": "Retouner à l’accueil",
-  "Thanks! We'll get right on it.": "Merci ! Nous allons nous y attaquer.",
   "This call already exists, would you like to join?": "Cet appel existe déjà, voulez-vous le rejoindre ?",
   "Fetching group call timed out.": "Échec de connexion à l’appel de groupe dans le temps imparti.",
   "{{names}}, {{name}}": "{{names}}, {{name}}",
@@ -113,5 +111,17 @@
   "<0>Thanks for your feedback!</0>": "<0>Merci pour votre commentaire !</0>",
   "How did it go?": "Comment cela s’est-il passé ?",
   "{{displayName}} is presenting": "{{displayName}} est à l’écran",
-  "Show connection stats": "Afficher les statistiques de la connexion"
+  "Show connection stats": "Afficher les statistiques de la connexion",
+  "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "En cliquant sur « Rejoindre l’appel maintenant », vous acceptez notre <2>Contrat de Licence Utilisateur Final (CLUF)</2>",
+  "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "En cliquant sur « Commencer », vous acceptez notre <2>Contrat de Licence Utilisateur Final (CLUF)</2>",
+  "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>": "Ce site est protégé par ReCAPTCHA, la <2>politique de confidentialité</2> et les <6>conditions d’utilisation</6> de Google s’appliquent.<9></9>En cliquant sur « S’enregistrer » vous acceptez également notre <12>Contrat de Licence Utilisateur Final (CLUF)</12>",
+  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Element Call n’est temporairement plus chiffré de bout en bout le temps de tester l’extensibilité.",
+  "Reconnect": "Se reconnecter",
+  "Retry sending logs": "Réessayer d’envoyer les journaux",
+  "Thanks!": "Merci !",
+  "You were disconnected from the call": "Vous avez été déconnecté de l’appel",
+  "Connectivity to the server has been lost.": "La connexion avec le serveur a été perdue.",
+  "End-to-end encryption isn't supported on your browser.": "Le chiffrement de bout-en-bout n’est pas pris en charge par votre navigateur.",
+  "Password (if none, E2EE is disabled)": "Mot de passe (si aucun, le chiffrement E2EE est désactivé)",
+  "Enable end-to-end encryption (password protected calls)": "Activer le chiffrement de bout-en-bout (appels protégés par mot de passe)"
 }

public/locales/id/app.json

@@ -71,7 +71,6 @@
   "Stop sharing screen": "Berhenti membagikan layar",
   "Submit feedback": "Kirim masukan",
   "Take me Home": "Bawa saya ke Beranda",
-  "Thanks! We'll get right on it.": "Terima kasih! Kami akan melihatnya.",
   "This call already exists, would you like to join?": "Panggilan ini sudah ada, apakah Anda ingin bergabung?",
   "Turn off camera": "Matikan kamera",
   "Turn on camera": "Nyalakan kamera",
@@ -90,7 +89,7 @@
   "Your recent calls": "Panggilan Anda terkini",
   "{{names}}, {{name}}": "{{names}}, {{name}}",
   "Sending debug logs…": "Mengirimkan catatan pengawakutuan…",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Bergabung panggilan sekarang</0><1>Atau</1><2>Salin tautan dan bergabung nanti</2>",
+  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Bergabung ke panggilan sekarang</0><1>Atau</1><2>Salin tautan dan bergabung nanti</2>",
   "Element Call Home": "Beranda Element Call",
   "Copy": "Salin",
   "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Mengirim catatan pengawakutuan akan membantu kami melacak masalahnya.</0>",
@@ -102,7 +101,7 @@
   "Feedback": "Masukan",
   "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.": "Jika Anda mengalami masalah atau hanya ingin memberikan masukan, silakan kirimkan kami deskripsi pendek di bawah.",
   "Submit": "Kirim",
-  "Submitting…": "Mengirim",
+  "Submitting…": "Mengirim…",
   "Thanks, we received your feedback!": "Terima kasih, kami telah menerima masukan Anda!",
   "Your feedback": "Masukan Anda",
   "{{displayName}}, your call has ended.": "{{displayName}}, panggilan Anda telah berakhir.",
@@ -113,5 +112,16 @@
   "Show connection stats": "Tampilkan statistik koneksi",
   "{{displayName}} is presenting": "{{displayName}} sedang menampilkan",
   "{{count}} stars|other": "{{count}} bintang",
-  "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Dengan mengeklik \"Bergabung\", Anda menyetujui <2>"
+  "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Dengan mengeklik \"Bergabung\", Anda menyetujui <2>Perjanjian Lisensi Pengguna Akhir (EULA)</2>",
+  "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>": "Situs ini dilindungi oleh reCAPTCHA dan <2>Kebijakan Privasi</2> dan <6>Ketentuan Layanan</6> Google berlaku.<9></9>Dengan mengeklik \"Daftar\", Anda menyetujui <12>Perjanjian Lisensi Pengguna Akhir (EULA)</12> kami",
+  "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Dengan mengeklik \"Bergabung ke panggilan sekarang\", Anda menyetujui <2>Perjanjian Lisensi Pengguna Akhir (EULA)</2> kami",
+  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Element Call sementara tidak dienkripsi secara ujung ke ujung selagi kami menguji skalabilitas.",
+  "Connectivity to the server has been lost.": "Koneksi ke server telah hilang.",
+  "Enable end-to-end encryption (password protected calls)": "Aktifkan enkripsi ujung ke ujung (panggilan terlindungi oleh kata sandi)",
+  "End-to-end encryption isn't supported on your browser.": "Enkripsi ujung ke ujung tidak didukung di peramban Anda.",
+  "Password (if none, E2EE is disabled)": "Kata sandi (jika tidak ada, enkripsi akan dinonaktifkan)",
+  "Retry sending logs": "Kirim ulang catatan",
+  "You were disconnected from the call": "Anda terputus dari panggilan",
+  "Reconnect": "Hubungkan ulang",
+  "Thanks!": "Terima kasih!"
 }

public/locales/ja/app.json

@@ -5,7 +5,6 @@
   "<0>Oops, something's gone wrong.</0>": "<0>何かがうまく行きませんでした。</0>",
   "Camera": "カメラ",
   "Call link copied": "通話リンクをコピーしました",
-  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "「続行」をクリックすると、 <2>利用規約</2>に同意したとみなされます",
   "Avatar": "アバター",
   "Audio": "音声",
   "Confirm password": "パスワードを確認",

public/locales/lv/app.json

@@ -0,0 +1,127 @@
+{
+  "{{count}} stars|one": "{{count}} zvaigzne",
+  "{{count}} stars|other": "{{count}} zvaigznes",
+  "{{names}}, {{name}}": "{{names}}, {{name}}",
+  "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Jau ir konts?</0><1><0>Pieteikties</0> vai <2>Piekļūt kā viesim</2></1>",
+  "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Izveidot kontu</0> vai <2>Piekļūt kā viesim</2>",
+  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Pievienoties zvanam tagad</0><1>vai</1><2>ievietot zvana saiti starpliktuvē un pievienoties vēlāk</2>",
+  "<0>Oops, something's gone wrong.</0>": "<0>Ak vai, kaut kas nogāja greizi!</0>",
+  "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Atkļūdošanas žurnāla ierakstu iesūtīšana palīdzēs mums atklāt nepilnību.</0>",
+  "<0>We'd love to hear your feedback so we can improve your experience.</0>": "<0>Mums patiktu saņemt Tavu atsauksmi, lai mēs varētu uzlabot Tavu pieredzi.</0>",
+  "<0>Thanks for your feedback!</0>": "<0>Paldies par atsauksmi!</0>",
+  "Audio": "Skaņa",
+  "Avatar": "Attēls",
+  "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Klikšķināšana uz \"Aiziet\" apliecina piekrišanu mūsu <2>galalietotāja licencēšanas nolīgumam (GLLN)</2>",
+  "Call link copied": "Zvana saite ievietota starpliktuvē",
+  "Call type menu": "Zvana veida izvēlne",
+  "Camera": "Kamera",
+  "Change layout": "Mainīt izkārtojumu",
+  "Close": "Aizvērt",
+  "Confirm password": "Apstiprināt paroli",
+  "Connectivity to the server has been lost.": "Ir zaudēts savienojums ar serveri.",
+  "Copied!": "Ievietots starpliktuvē.",
+  "Copy": "Ievietot starpliktuvē",
+  "Copy and share this call link": "Ievietot starpliktuvē un kopīgot šo zvana saiti",
+  "Create account": "Izveidot kontu",
+  "Debug log": "Atkļūdošanas žurnāls",
+  "Debug log request": "Atkļūdošanas žurnāla pieprasījums",
+  "Details": "Izvērsums",
+  "Developer": "Izstrādātājs",
+  "Developer Settings": "Izstrādātāja iestatījumi",
+  "Display name": "Attēlojamais vārds",
+  "Download debug logs": "Lejupielādēt atkļūdošanas žurnāla ierakstus",
+  "Element Call Home": "Element Call sākums",
+  "Exit full screen": "Iziet no pilnekrāna",
+  "Expose developer settings in the settings window.": "Izstādīt izstrādātāja iestatījumus iestatījumu logā.",
+  "Feedback": "Atsauksmes",
+  "Fetching group call timed out.": "Grupas zvana iegūšanā iestājās noildze.",
+  "Freedom": "Brīvība",
+  "Full screen": "Pilnekrāns",
+  "Go": "Aiziet",
+  "Grid layout menu": "Režģa izkārtojuma izvēlne",
+  "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Klikšķināšana uz \"Pievienoties zvanam tagad\" apliecina piekrišanu mūsu <2>galalietotāja licencēšanas nolīgumam (GLLN)</2>",
+  "By participating in this beta, you consent to the collection of anonymous data, which we use to improve the product. You can find more information about which data we track in our <2>Privacy Policy</2> and our <5>Cookie Policy</5>.": "Piedalīšanās šajā beta apliecina piekrišanu anonīmu datu ievākšanai, ko mēs izmantojam, lai uzlabotu izstrādājumu. Vairāk informācijas par datiem, ko mēs ievācam, var atrast mūsu <2>privātuma nosacījumos</2> un <5>sīkdatņu nosacījumos</5>.",
+  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Element Call īslaicīgi nav pilnīgi šifrēts, kamēr mēs pārbaudām mērogojamību.",
+  "Enable end-to-end encryption (password protected calls)": "Iespējot pilnīgu šifrēšanu (ar paroli aizsargāti zvani)",
+  "End-to-end encryption isn't supported on your browser.": "Šajā pārlūkā nav nodrošināta pilnīga šifrēšana.",
+  "{{displayName}} is presenting": "{{displayName}} uzstājas",
+  "{{displayName}}, your call has ended.": "{{displayName}}, Tavs zvans ir beidzies.",
+  "<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.": "<0></0><1></1>Savu piekrišanu var atsaukt ar atzīmes noņemšanu no šīs rūtiņas. Ja pašreiz atrodies zvanā, šis iestatījums stāsies spēkā zvana beigās.",
+  "<0>Why not finish by setting up a password to keep your account?</0><1>You'll be able to keep your name and set an avatar for use on future calls</1>": "<0>Kādēļ nepabeigt ar paroles iestatīšanu, lai paturētu savu kontu?</0><1>Būs iespējams paturēt savu vārdu un iestatīt attēlu izmantošanai turpmākajos zvanos</1>",
+  "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Citam lietotājam šajā zvanā ir sarežģījumi. Lai labāk atklātu šīs nepilnības, mēs gribētu iegūt atkļūdošanas žurnālu.",
+  "Home": "Sākums",
+  "Waiting for other participants…": "Gaida citus dalībniekus…",
+  "Walkie-talkie call": "Rācijas zvans",
+  "Yes, join call": "Jā, pievienoties zvanam",
+  "Your feedback": "Tava atsauksme",
+  "Your recent calls": "Nesenie zvani",
+  "How did it go?": "Kā Tev veicās?",
+  "Include debug logs": "Iekļaut atkļūdošanas žurnāla ierakstus",
+  "Incompatible versions": "Nesaderīgas versijas",
+  "Incompatible versions!": "Nesaderīgas versijas.",
+  "Inspector": "Inspektors",
+  "Invite": "Uzaicināt",
+  "Invite people": "Uzaicināt cilvēkus",
+  "Join call": "Pievienoties zvanam",
+  "Join call now": "Pievienoties zvanam tagad",
+  "Join existing call?": "Pievienoties esošam zvanam?",
+  "Leave": "Pamest",
+  "Loading…": "Lādējas…",
+  "Local volume": "Vietējais skaļums",
+  "Logging in…": "Piesakās…",
+  "Login": "Pieteikties",
+  "Login to your account": "Pieteikties kontā",
+  "Microphone": "Mikrofons",
+  "More": "Vairāk",
+  "Mute microphone": "Apklusināt mikrofonu",
+  "No": "Nē",
+  "Not now, return to home screen": "Ne tagad, atgriezties sākuma ekrānā",
+  "Password": "Parole",
+  "Password (if none, E2EE is disabled)": "Parole (ja nav, pilnīga šifrēšana ir atspējota)",
+  "Passwords must match": "Parolēm ir jāsakrīt",
+  "Profile": "Profils",
+  "Recaptcha dismissed": "ReCaptcha atmesta",
+  "Recaptcha not loaded": "ReCaptcha nav ielādēta",
+  "Reconnect": "Atkārtoti savienoties",
+  "Register": "Reģistrēties",
+  "Registering…": "Reģistrē…",
+  "Remove": "Noņemt",
+  "Retry sending logs": "Atkārtoti mēģināt žurnāla ierakstu nosūtīšanu",
+  "Return to home screen": "Atgriezties sākuma ekrānā",
+  "Select an option": "Atlasīt iespēju",
+  "Send debug logs": "Nosūtīt atkļūdošanas žurnāla ierakstus",
+  "Sending debug logs…": "Nosūta atkļūdošanas žurnāla ierakstus…",
+  "Sending…": "Nosūta…",
+  "Settings": "Iestatījumi",
+  "Share screen": "Kopīgot ekrānu",
+  "Show call inspector": "Rādīt zvanu inspektoru",
+  "Show connection stats": "Rādīt savienojuma apkopojumu",
+  "Sign in": "Pieteikties",
+  "Sign out": "Atteikties",
+  "Speaker": "Runātājs",
+  "Spotlight": "Starmešu gaisma",
+  "Stop sharing screen": "Pārtraukt ekrāna kopīgošanu",
+  "Submit": "Iesniegt",
+  "Submit feedback": "Iesniegt atsauksmi",
+  "Submitting…": "Iesniedz…",
+  "Take me Home": "Aizvest uz sākumu",
+  "Thanks, we received your feedback!": "Paldies, mēs saņēmām atsauksmi!",
+  "Thanks!": "Paldies!",
+  "This call already exists, would you like to join?": "Šis zvans jau pastāv. Vai vēlies pievienoties?",
+  "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>": "Šo vietni aizsargā ReCAPTCHA, un ir attiecināmi Google <2>privātuma nosacījumi</2> un <6>pakalpojuma noteikumi</6>.<9></9>Klikšķināšana uz \"Reģistrēties\" sniedz piekrišanu mūsu <12>galalietotāja licencēšanas nolīgumam (GLLN)</12>",
+  "Turn off camera": "Izslēgt kameru",
+  "Turn on camera": "Ieslēgt kameru",
+  "Unmute microphone": "Atsaukt mikrofona apklusināšanu",
+  "User menu": "Lietotāja izvēlne",
+  "Username": "Lietotājvārds",
+  "Video": "Video",
+  "Video call": "Video zvans",
+  "Video call name": "Video zvana nosaukums",
+  "You were disconnected from the call": "Tu tiki atvienots no zvana",
+  "Version: {{version}}": "Versija: {{version}}",
+  "Walkie-talkie call name": "Rācijas zvana nosaukums",
+  "WebRTC is not supported or is being blocked in this browser.": "Šajā pārlūkā nav nodrošināts WebRTC vai tiek liegta tā izmantošana.",
+  "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.": "Ja tiek piedzīvoti sarežģījumi vai vienkārši ir vēlme sniegt kādu atsauksmi, lūgums zemāk nosūtīt mums īsu aprakstu.",
+  "Not registered yet? <2>Create an account</2>": "Vēl neesi reģistrējies? <2>Izveidot kontu</2>",
+  "Other users are trying to join this call from incompatible versions. These users should ensure that they have refreshed their browsers:<1>{userLis}</1>": "Citi lietotāji mēģina pievienoties šim zvanam no nesaderīgām versijām. Šiem lietotājiem vajadzētu nodrošināt, ka viņi ir atsvaidzinājuši savus pārlūkus: <1>{userLis}</1>"
+}

public/locales/pl/app.json

@@ -17,7 +17,6 @@
   "Turn on camera": "Włącz kamerę",
   "Turn off camera": "Wyłącz kamerę",
   "This call already exists, would you like to join?": "Te połączenie już istnieje, czy chcesz do niego dołączyć?",
-  "Thanks! We'll get right on it.": "Dziękujemy! Zaraz się tym zajmiemy.",
   "Take me Home": "Zabierz mnie do strony głównej",
   "Submit feedback": "Prześlij opinię",
   "Stop sharing screen": "Zatrzymaj udostępnianie ekranu",
@@ -112,5 +111,17 @@
   "<0>We'd love to hear your feedback so we can improve your experience.</0>": "<0>Z przyjemnością wysłuchamy Twojej opinii, aby poprawić Twoje doświadczenia.</0>",
   "How did it go?": "Jak poszło?",
   "{{displayName}} is presenting": "{{displayName}} prezentuje",
-  "Show connection stats": "Pokaż statystyki połączenia"
+  "Show connection stats": "Pokaż statystyki połączenia",
+  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Usługa Element Call tymczasowo nie jest szyfrowana end-to-end w trakcie, gdy testujemy możliwość jej rozszerzenia.",
+  "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Klikając \"Przejdź\", zgadzasz się na naszą <2>Umowę licencyjną (EULA)</2>",
+  "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>": "Ta witryna jest chroniona przez ReCAPTCHA, więc obowiązują <2>Polityka prywatności</2> i <6>Warunki usług</6> Google. Klikając \"Zarejestruj\", zgadzasz się na naszą <12>Umowę licencyjną (EULA)</12>",
+  "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Klikając \"Dołącz teraz do rozmowy\", zgadzasz się na naszą <2>Umowę licencyjną (EULA)</2>",
+  "End-to-end encryption isn't supported on your browser.": "Szyfrowanie end-to-end nie jest wspierane przez Twoją przeglądarkę.",
+  "Password (if none, E2EE is disabled)": "Hasło (brak oznacza, że E2EE jest włączone)",
+  "Retry sending logs": "Wyślij logi ponownie",
+  "Thanks!": "Dziękujemy!",
+  "You were disconnected from the call": "Rozłączono Cię z połączenia",
+  "Connectivity to the server has been lost.": "Utracono połączenie z serwerem.",
+  "Reconnect": "Połącz ponownie",
+  "Enable end-to-end encryption (password protected calls)": "Włącz szyfrowanie end-to-end (połączenia chronione hasłem)"
 }

public/locales/ru/app.json

@@ -5,13 +5,11 @@
   "{{names}}, {{name}}": "{{names}}, {{name}}",
   "Waiting for other participants…": "Ожидание других участников…",
   "This call already exists, would you like to join?": "Этот звонок уже существует, хотите присоединиться?",
-  "Thanks! We'll get right on it.": "Спасибо! Мы учтём ваш отзыв.",
   "Submit feedback": "Отправить отзыв",
   "Sending debug logs…": "Отправка журнала отладки…",
   "Select an option": "Выберите вариант",
   "Other users are trying to join this call from incompatible versions. These users should ensure that they have refreshed their browsers:<1>{userLis}</1>": "Другие пользователи пытаются присоединиться с неподдерживаемых версий программы. Этим участникам надо перезагрузить браузер: <1>{userLis}</1>",
   "Grid layout menu": "Меню \"Расположение сеткой\"",
-  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "Нажимая \"Далее\", вы соглашаетесь с нашими <2>положениями и условиями</2>",
   "<0>Why not finish by setting up a password to keep your account?</0><1>You'll be able to keep your name and set an avatar for use on future calls</1>": "<0>Почему бы не задать пароль, тем самым сохранив аккаунт?</0><1>Так вы можете оставить своё имя и задать аватар для будущих звонков.</1>",
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Создать аккаунт</0> или <2>Зайти как гость</2>",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Уже есть аккаунт?</0><1><0>Войти с ним</0> или <2>Зайти как гость</2></1>",

public/locales/sk/app.json

@@ -5,7 +5,6 @@
   "Fetching group call timed out.": "Vypršal čas načítania skupinového volania.",
   "Element Call Home": "Domov Element Call",
   "Waiting for other participants…": "Čaká sa na ďalších účastníkov…",
-  "Thanks! We'll get right on it.": "Vďaka! Hneď sa do toho pustíme.",
   "Take me Home": "Zober ma domov",
   "Submit feedback": "Odoslať spätnú väzbu",
   "Stop sharing screen": "Zastaviť zdieľanie obrazovky",
@@ -85,7 +84,6 @@
   "Camera": "Kamera",
   "Call type menu": "Ponuka typu hovoru",
   "Call link copied": "Odkaz na hovor skopírovaný",
-  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "Kliknutím na tlačidlo \"Prejsť\" súhlasíte s našimi <2>Podmienkami</2>",
   "Avatar": "Obrázok",
   "Audio": "Audio",
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Ďalší používateľ v tomto hovore má problém. Aby sme mohli lepšie diagnostikovať tieto problémy, chceli by sme získať záznam o ladení.",
@@ -113,5 +111,17 @@
   "<0>Thanks for your feedback!</0>": "<0> Ďakujeme za vašu spätnú väzbu!</0>",
   "<0>We'd love to hear your feedback so we can improve your experience.</0>": "<0> Radi si vypočujeme vašu spätnú väzbu, aby sme mohli zlepšiť vaše skúsenosti.</0>",
   "{{displayName}} is presenting": "{{displayName}} prezentuje",
-  "Show connection stats": "Zobraziť štatistiky pripojenia"
+  "Show connection stats": "Zobraziť štatistiky pripojenia",
+  "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Kliknutím na \"Pripojiť sa k hovoru teraz\" súhlasíte s našou <2>Licenčnou zmluvou s koncovým používateľom (EULA)</2>",
+  "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Kliknutím na tlačidlo \"Prejsť\" vyjadrujete súhlas s našou <2>Licenčnou zmluvou s koncovým používateľom (EULA)</2>",
+  "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>": "Táto stránka je chránená systémom ReCAPTCHA a platia na ňu <2>Pravidlá ochrany osobných údajov spoločnosti Google</2> a <6>Podmienky poskytovania služieb</6>.<9></9>Kliknutím na tlačidlo \"Registrovať sa\" súhlasíte s našou <12>Licenčnou zmluvou s koncovým používateľom (EULA)</12>",
+  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Element Call nie je dočasne šifrovaný, kým testujeme škálovateľnosť.",
+  "Connectivity to the server has been lost.": "Spojenie so serverom sa stratilo.",
+  "Retry sending logs": "Opakovať odoslanie záznamov",
+  "Reconnect": "Znovu pripojiť",
+  "Thanks!": "Ďakujeme!",
+  "You were disconnected from the call": "Boli ste odpojení z hovoru",
+  "Enable end-to-end encryption (password protected calls)": "Povoliť end-to-end šifrovanie (hovory chránené heslom)",
+  "End-to-end encryption isn't supported on your browser.": "End-to-end šifrovanie nie je vo vašom prehliadači podporované.",
+  "Password (if none, E2EE is disabled)": "Heslo (ak nie je, šifrovanie je vypnuté)"
 }

public/locales/tr/app.json

@@ -3,7 +3,6 @@
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Bu aramadaki başka bir kullanıcı sorun yaşıyor. Sorunu daha iyi çözebilmemiz için hata ayıklama kütüğünü almak isteriz.",
   "Audio": "Ses",
   "Avatar": "Avatar",
-  "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>": "\"Şimdi katıl\"a tıklayarak, <2>hükümler ve koşullar</2>ı kabul etmiş sayılırsınız",
   "Call link copied": "Arama bağlantısı kopyalandı",
   "Call type menu": "Arama tipi menüsü",
   "Camera": "Kamera",
@@ -66,7 +65,6 @@
   "Stop sharing screen": "Ekran paylaşmayı terk et",
   "Submit feedback": "Geri bildirim ver",
   "Take me Home": "Ev ekranına gir",
-  "Thanks! We'll get right on it.": "Sağol! Bununla ilgileneceğiz.",
   "This call already exists, would you like to join?": "Bu arama zaten var, katılmak ister misiniz?",
   "{{names}}, {{name}}": "{{names}}, {{name}}",
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Hesap oluştur</0> yahut <2>Konuk olarak gir</2>",

public/locales/uk/app.json

@@ -16,7 +16,6 @@
   "Turn on camera": "Увімкнути камеру",
   "Turn off camera": "Вимкнути камеру",
   "This call already exists, would you like to join?": "Цей виклик уже існує, бажаєте приєднатися?",
-  "Thanks! We'll get right on it.": "Дякуємо! Ми зараз же візьмемося за це.",
   "Take me Home": "Перейти до Домівки",
   "Submit feedback": "Надіслати відгук",
   "Stop sharing screen": "Припинити показ екрана",
@@ -69,7 +68,7 @@
   "Fetching group call timed out.": "Вичерпано час очікування групового виклику.",
   "Exit full screen": "Вийти з повноекранного режиму",
   "Download debug logs": "Завантажити журнали налагодження",
-  "Display name": "Показуване ім'я",
+  "Display name": "Псевдонім",
   "Developer": "Розробнику",
   "Details": "Подробиці",
   "Debug log request": "Запит журналу налагодження",
@@ -83,7 +82,6 @@
   "Camera": "Камера",
   "Call type menu": "Меню типу виклику",
   "Call link copied": "Посилання на виклик скопійовано",
-  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "Натиснувши «Далі», ви погодитеся з нашими <2>Умовами та положеннями</2>",
   "Avatar": "Аватар",
   "Audio": "Звук",
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Інший користувач у цьому виклику має проблему. Щоб краще визначити ці проблеми, ми хотіли б зібрати журнал налагодження.",
@@ -113,5 +111,17 @@
   "<0>We'd love to hear your feedback so we can improve your experience.</0>": "<0>Ми будемо раді почути ваші відгуки, щоб поліпшити роботу застосунку.</0>",
   "How did it go?": "Вам усе сподобалось?",
   "{{displayName}} is presenting": "{{displayName}} представляє",
-  "Show connection stats": "Показати стан з'єднання"
+  "Show connection stats": "Показати стан з'єднання",
+  "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Натискаючи \"Далі\", ви погоджуєтеся з нашою <2>Ліцензійною угодою з кінцевим користувачем (EULA)</2>",
+  "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Натискаючи \"Приєднатися до виклику зараз\", ви погоджуєтеся з нашою <2>Ліцензійною угодою з кінцевим користувачем (EULA)</2>",
+  "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 і до нього застосовується <2>Політика приватності</2> і <6>Умови надання послуг</6> Google.<9></9>Натискаючи \"Зареєструватися\", ви погоджуєтеся з нашою <12>Ліцензійною угодою з кінцевим користувачем (EULA)</12>",
+  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Виклики Element тимчасово не захищаються наскрізним шифруванням, поки ми тестуємо масштабованість.",
+  "Connectivity to the server has been lost.": "Втрачено зв'язок з сервером.",
+  "Reconnect": "Під'єднати повторно",
+  "Retry sending logs": "Повторити надсилання журналів",
+  "You were disconnected from the call": "Вас від'єднано від виклику",
+  "Thanks!": "Дякуємо!",
+  "Enable end-to-end encryption (password protected calls)": "Увімкнути наскрізне шифрування (захищені паролем виклики)",
+  "End-to-end encryption isn't supported on your browser.": "Наскрізне шифрування не підтримується вашим переглядачем.",
+  "Password (if none, E2EE is disabled)": "Пароль (якщо немає, наскрізне шифрування вимкнено)"
 }

public/locales/zh-Hans/app.json

@@ -15,7 +15,6 @@
   "Turn on camera": "开启摄像头",
   "Turn off camera": "关闭摄像头",
   "This call already exists, would you like to join?": "该通话已存在，你想加入吗？",
-  "Thanks! We'll get right on it.": "谢谢！我们会马上去做的。",
   "Take me Home": "返回主页",
   "Submit feedback": "提交反馈",
   "Stop sharing screen": "停止屏幕共享",

public/locales/zh-Hant/app.json

@@ -23,7 +23,6 @@
   "Turn on camera": "開啟相機",
   "Turn off camera": "關閉相機",
   "This call already exists, would you like to join?": "通話已經開始，請問您要加入嗎？",
-  "Thanks! We'll get right on it.": "謝謝您！我們會盡快處理。",
   "Take me Home": "帶我回主畫面",
   "Submit feedback": "遞交回覆",
   "Stop sharing screen": "停止分享螢幕畫面",
@@ -93,7 +92,6 @@
   "Camera": "相機",
   "Call type menu": "通話類型選單",
   "Call link copied": "已複製通話連結",
-  "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "當您按下「前往」，你也同意了我們的條款與細則",
   "Avatar": "大頭照",
   "Audio": "語音",
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "這通對話中的另一位使用者遇到了某些問題。為了診斷問題，我們將會建立除錯紀錄。",
@@ -113,5 +111,17 @@
   "{{displayName}}, your call has ended.": "{{displayName}}，您的通話已結束。",
   "How did it go?": "進展如何？",
   "{{displayName}} is presenting": "{{displayName}} 正在展示",
-  "Show connection stats": "顯示連線統計資料"
+  "Show connection stats": "顯示連線統計資料",
+  "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "點擊「前往」即表示您同意我們的<2>終端使用者授權協議 (EULA)</2>",
+  "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "點擊「立刻加入通話」即表示您同意我們的<2>終端使用者授權協議 (EULA)</2>",
+  "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 保護，並適用 Google 的<2>隱私權政策</2>與<6>服務條款</6>。<9></9>點擊「註冊」即表示您同意我們的<12>終端使用者授權協議 (EULA)</12>",
+  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "在我們測試可擴展性時，Element Call 暫時未進行端到端加密。",
+  "Connectivity to the server has been lost.": "到伺服器的連線已遺失。",
+  "Reconnect": "重新連線",
+  "Retry sending logs": "重試傳送紀錄檔",
+  "Thanks!": "感謝！",
+  "You were disconnected from the call": "您已從通話斷線",
+  "Enable end-to-end encryption (password protected calls)": "啟用端到端加密（密碼保護通話）",
+  "End-to-end encryption isn't supported on your browser.": "您的瀏覽器不支援端到端加密。",
+  "Password (if none, E2EE is disabled)": "密碼（若無，就會停用端到端加密）"
 }

src/App.tsx

@@ -18,18 +18,20 @@ import { Suspense, useEffect, useState } from "react";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import * as Sentry from "@sentry/react";
 import { OverlayProvider } from "@react-aria/overlays";
+import { History } from "history";
 
 import { HomePage } from "./home/HomePage";
 import { LoginPage } from "./auth/LoginPage";
 import { RegisterPage } from "./auth/RegisterPage";
 import { RoomPage } from "./room/RoomPage";
-import { RoomRedirect } from "./room/RoomRedirect";
 import { ClientProvider } from "./ClientContext";
 import { usePageFocusStyle } from "./usePageFocusStyle";
 import { SequenceDiagramViewerPage } from "./SequenceDiagramViewerPage";
 import { InspectorContextProvider } from "./room/GroupCallInspector";
 import { CrashView, LoadingView } from "./FullScreenView";
+import { DisconnectedBanner } from "./DisconnectedBanner";
 import { Initializer } from "./initializer";
+import { MediaDevicesProvider } from "./livekit/MediaDevicesContext";
 
 const SentryRoute = Sentry.withSentryRouting(Route);
 
@@ -51,13 +53,17 @@ export default function App({ history }: AppProps) {
   const errorPage = <CrashView />;
 
   return (
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     <Router history={history}>
       {loaded ? (
         <Suspense fallback={null}>
           <ClientProvider>
+            <MediaDevicesProvider>
               <InspectorContextProvider>
                 <Sentry.ErrorBoundary fallback={errorPage}>
                   <OverlayProvider>
+                    <DisconnectedBanner />
                     <Switch>
                       <SentryRoute exact path="/">
                         <HomePage />
@@ -68,19 +74,17 @@ export default function App({ history }: AppProps) {
                       <SentryRoute exact path="/register">
                         <RegisterPage />
                       </SentryRoute>
-                    <SentryRoute path="/room/:roomId?">
-                      <RoomPage />
-                    </SentryRoute>
                       <SentryRoute path="/inspector">
                         <SequenceDiagramViewerPage />
                       </SentryRoute>
                       <SentryRoute path="*">
-                      <RoomRedirect />
+                        <RoomPage />
                       </SentryRoute>
                     </Switch>
                   </OverlayProvider>
                 </Sentry.ErrorBoundary>
               </InspectorContextProvider>
+            </MediaDevicesProvider>
           </ClientProvider>
         </Suspense>
       ) : (

src/Avatar.tsx

@@ -16,7 +16,6 @@ limitations under the License.
 
 import { useMemo, CSSProperties, HTMLAttributes, FC } from "react";
 import classNames from "classnames";
-import { MatrixClient } from "matrix-js-sdk/src/client";
 
 import { getAvatarUrl } from "./matrix-utils";
 import { useClient } from "./ClientContext";
@@ -59,9 +58,6 @@ function hashStringToArrIndex(str: string, arrLength: number) {
   return sum % arrLength;
 }
 
-const resolveAvatarSrc = (client: MatrixClient, src: string, size: number) =>
-  src?.startsWith("mxc://") ? client && getAvatarUrl(client, src, size) : src;
-
 interface Props extends HTMLAttributes<HTMLDivElement> {
   bgKey?: string;
   src?: string;
@@ -99,10 +95,10 @@ export const Avatar: FC<Props> = ({
     [size]
   );
 
-  const resolvedSrc = useMemo(
+  const resolvedSrc = useMemo(() => {
-    () => resolveAvatarSrc(client, src, sizePx),
+    if (!client || !src || !sizePx) return undefined;
-    [client, src, sizePx]
+    return src.startsWith("mxc://") ? getAvatarUrl(client, src, sizePx) : src;
-  );
+  }, [client, src, sizePx]);
 
   const backgroundColor = useMemo(() => {
     const index = hashStringToArrIndex(

src/ClientContext.tsx

@@ -20,20 +20,21 @@ import {
   useEffect,
   useState,
   createContext,
-  useMemo,
   useContext,
   useRef,
+  useMemo,
 } from "react";
 import { useHistory } from "react-router-dom";
-import { MatrixClient } from "matrix-js-sdk/src/client";
+import { ClientEvent, MatrixClient } from "matrix-js-sdk/src/client";
 import { logger } from "matrix-js-sdk/src/logger";
 import { useTranslation } from "react-i18next";
+import { ISyncStateData, SyncState } from "matrix-js-sdk/src/sync";
 
 import { ErrorView } from "./FullScreenView";
 import {
-  initClient,
   CryptoStoreIntegrityError,
   fallbackICEServerAllowed,
+  initClient,
 } from "./matrix-utils";
 import { widget } from "./widget";
 import {
@@ -47,140 +48,344 @@ import { Config } from "./config/Config";
 declare global {
   interface Window {
     matrixclient: MatrixClient;
-    isPasswordlessUser: boolean;
+    passwordlessUser: boolean;
   }
 }
 
-export interface Session {
+export type ClientState = ValidClientState | ErrorState;
-  user_id: string;
+
-  device_id: string;
+export type ValidClientState = {
-  access_token: string;
+  state: "valid";
+  authenticated?: AuthenticatedClient;
+  // 'Disconnected' rather than 'connected' because it tracks specifically
+  // whether the client is supposed to be connected but is not
+  disconnected: boolean;
+  setClient: (params?: SetClientParams) => void;
+};
+
+export type AuthenticatedClient = {
+  client: MatrixClient;
+  isPasswordlessUser: boolean;
+  changePassword: (password: string) => Promise<void>;
+  logout: () => void;
+};
+
+export type ErrorState = {
+  state: "error";
+  error: Error;
+};
+
+export type SetClientParams = {
+  client: MatrixClient;
+  session: Session;
+};
+
+const ClientContext = createContext<ClientState | undefined>(undefined);
+
+export const useClientState = () => useContext(ClientContext);
+
+export function useClient(): {
+  client?: MatrixClient;
+  setClient?: (params?: SetClientParams) => void;
+} {
+  let client;
+  let setClient;
+
+  const clientState = useClientState();
+  if (clientState?.state === "valid") {
+    client = clientState.authenticated?.client;
+    setClient = clientState.setClient;
+  }
+
+  return { client, setClient };
+}
+
+// Plain representation of the `ClientContext` as a helper for old components that expected an object with multiple fields.
+export function useClientLegacy(): {
+  client?: MatrixClient;
+  setClient?: (params?: SetClientParams) => void;
   passwordlessUser: boolean;
-  tempPassword?: string;
+  loading: boolean;
+  authenticated: boolean;
+  logout?: () => void;
+  error?: Error;
+} {
+  const clientState = useClientState();
+
+  let client;
+  let setClient;
+  let passwordlessUser = false;
+  let loading = true;
+  let error;
+  let authenticated = false;
+  let logout;
+
+  if (clientState?.state === "valid") {
+    client = clientState.authenticated?.client;
+    setClient = clientState.setClient;
+    passwordlessUser = clientState.authenticated?.isPasswordlessUser ?? false;
+    loading = false;
+    authenticated = client !== undefined;
+    logout = clientState.authenticated?.logout;
+  } else if (clientState?.state === "error") {
+    error = clientState.error;
+    loading = false;
+  }
+
+  return {
+    client,
+    setClient,
+    passwordlessUser,
+    loading,
+    authenticated,
+    logout,
+    error,
+  };
 }
 
 const loadChannel =
   "BroadcastChannel" in window ? new BroadcastChannel("load") : null;
 
-const loadSession = (): Session => {
-  const data = localStorage.getItem("matrix-auth-store");
-  if (data) return JSON.parse(data);
-  return null;
-};
-const saveSession = (session: Session) =>
-  localStorage.setItem("matrix-auth-store", JSON.stringify(session));
-const clearSession = () => localStorage.removeItem("matrix-auth-store");
-
-interface ClientState {
-  loading: boolean;
-  isAuthenticated: boolean;
-  isPasswordlessUser: boolean;
-  client: MatrixClient;
-  userName: string;
-  changePassword: (password: string) => Promise<void>;
-  logout: () => void;
-  setClient: (client: MatrixClient, session: Session) => void;
-  error?: Error;
-}
-
-const ClientContext = createContext<ClientState>(null);
-
-type ClientProviderState = Omit<
-  ClientState,
-  "changePassword" | "logout" | "setClient"
-> & { error?: Error };
-
 interface Props {
   children: JSX.Element;
 }
 
 export const ClientProvider: FC<Props> = ({ children }) => {
   const history = useHistory();
-  const initializing = useRef(false);
-  const [
-    { loading, isAuthenticated, isPasswordlessUser, client, userName, error },
-    setState,
-  ] = useState<ClientProviderState>({
-    loading: true,
-    isAuthenticated: false,
-    isPasswordlessUser: false,
-    client: undefined,
-    userName: null,
-    error: undefined,
-  });
 
+  // null = signed out, undefined = loading
+  const [initClientState, setInitClientState] = useState<
+    InitResult | null | undefined
+  >(undefined);
+
+  const initializing = useRef(false);
   useEffect(() => {
     // In case the component is mounted, unmounted, and remounted quickly (as
     // React does in strict mode), we need to make sure not to doubly initialize
-    // the client
+    // the client.
     if (initializing.current) return;
     initializing.current = true;
 
-    const init = async (): Promise<
+    loadClient()
-      Pick<ClientProviderState, "client" | "isPasswordlessUser">
+      .then(setInitClientState)
-    > => {
+      .catch((err) => logger.error(err))
+      .finally(() => (initializing.current = false));
+  }, []);
+
+  const changePassword = useCallback(
+    async (password: string) => {
+      const session = loadSession();
+      if (!initClientState?.client || !session) {
+        return;
+      }
+
+      await initClientState.client.setPassword(
+        {
+          type: "m.login.password",
+          identifier: {
+            type: "m.id.user",
+            user: session.user_id,
+          },
+          user: session.user_id,
+          password: session.tempPassword,
+        },
+        password
+      );
+
+      saveSession({ ...session, passwordlessUser: false });
+
+      setInitClientState({
+        client: initClientState.client,
+        passwordlessUser: false,
+      });
+    },
+    [initClientState?.client]
+  );
+
+  const setClient = useCallback(
+    (clientParams?: SetClientParams) => {
+      const oldClient = initClientState?.client;
+      const newClient = clientParams?.client;
+      if (oldClient && oldClient !== newClient) {
+        oldClient.stopClient();
+      }
+
+      if (clientParams) {
+        saveSession(clientParams.session);
+        setInitClientState({
+          client: clientParams.client,
+          passwordlessUser: clientParams.session.passwordlessUser,
+        });
+      } else {
+        clearSession();
+        setInitClientState(null);
+      }
+    },
+    [initClientState?.client]
+  );
+
+  const logout = useCallback(async () => {
+    const client = initClientState?.client;
+    if (!client) {
+      return;
+    }
+
+    await client.logout(true);
+    await client.clearStores();
+    clearSession();
+    setInitClientState(null);
+    history.push("/");
+    PosthogAnalytics.instance.setRegistrationType(RegistrationType.Guest);
+  }, [history, initClientState?.client]);
+
+  const { t } = useTranslation();
+
+  // To protect against multiple sessions writing to the same storage
+  // simultaneously, we send a broadcast message that shuts down all other
+  // running instances of the app. This isn't necessary if the app is running in
+  // a widget though, since then it'll be mostly stateless.
+  useEffect(() => {
+    if (!widget) loadChannel?.postMessage({});
+  }, []);
+
+  const [alreadyOpenedErr, setAlreadyOpenedErr] = useState<Error | undefined>(
+    undefined
+  );
+  useEventTarget(
+    loadChannel,
+    "message",
+    useCallback(() => {
+      initClientState?.client.stopClient();
+      setAlreadyOpenedErr(
+        translatedError("This application has been opened in another tab.", t)
+      );
+    }, [initClientState?.client, setAlreadyOpenedErr, t])
+  );
+
+  const [isDisconnected, setIsDisconnected] = useState(false);
+
+  const state: ClientState | undefined = useMemo(() => {
+    if (alreadyOpenedErr) {
+      return { state: "error", error: alreadyOpenedErr };
+    }
+
+    if (initClientState === undefined) return undefined;
+
+    const authenticated =
+      initClientState === null
+        ? undefined
+        : {
+            client: initClientState.client,
+            isPasswordlessUser: initClientState.passwordlessUser,
+            changePassword,
+            logout,
+          };
+
+    return {
+      state: "valid",
+      authenticated,
+      setClient,
+      disconnected: isDisconnected,
+    };
+  }, [
+    alreadyOpenedErr,
+    changePassword,
+    initClientState,
+    logout,
+    setClient,
+    isDisconnected,
+  ]);
+
+  const onSync = useCallback(
+    (state: SyncState, _old: SyncState | null, data?: ISyncStateData) => {
+      setIsDisconnected(clientIsDisconnected(state, data));
+    },
+    []
+  );
+
+  useEffect(() => {
+    if (!initClientState) {
+      return;
+    }
+
+    window.matrixclient = initClientState.client;
+    window.passwordlessUser = initClientState.passwordlessUser;
+
+    if (PosthogAnalytics.hasInstance())
+      PosthogAnalytics.instance.onLoginStatusChanged();
+
+    if (initClientState.client) {
+      initClientState.client.on(ClientEvent.Sync, onSync);
+    }
+
+    return () => {
+      if (initClientState.client) {
+        initClientState.client.removeListener(ClientEvent.Sync, onSync);
+      }
+    };
+  }, [initClientState, onSync]);
+
+  if (alreadyOpenedErr) {
+    return <ErrorView error={alreadyOpenedErr} />;
+  }
+
+  return (
+    <ClientContext.Provider value={state}>{children}</ClientContext.Provider>
+  );
+};
+
+type InitResult = {
+  client: MatrixClient;
+  passwordlessUser: boolean;
+};
+
+async function loadClient(): Promise<InitResult | null> {
   if (widget) {
     // We're inside a widget, so let's engage *matryoshka mode*
     logger.log("Using a matryoshka client");
+    const client = await widget.client;
     return {
-          client: await widget.client,
+      client,
-          isPasswordlessUser: false,
+      passwordlessUser: false,
     };
   } else {
     // We're running as a standalone application
     try {
       const session = loadSession();
-          if (!session) return { client: undefined, isPasswordlessUser: false };
+      if (!session) {
+        logger.log("No session stored; continuing without a client");
+        return null;
+      }
 
       logger.log("Using a standalone client");
 
       /* eslint-disable camelcase */
-          const { user_id, device_id, access_token, passwordlessUser } =
+      const { user_id, device_id, access_token, passwordlessUser } = session;
-            session;
+      const initClientParams = {
-
+        baseUrl: Config.defaultHomeserverUrl()!,
-          const livekit = Config.get().livekit;
-          const foci = livekit
-            ? [
-                {
-                  livekitServiceUrl: livekit.livekit_service_url,
-                },
-              ]
-            : undefined;
-
-          try {
-            return {
-              client: await initClient(
-                {
-                  baseUrl: Config.defaultHomeserverUrl(),
         accessToken: access_token,
         userId: user_id,
         deviceId: device_id,
         fallbackICEServerAllowed: fallbackICEServerAllowed,
-                  foci,
+        livekitServiceURL: Config.get().livekit!.livekit_service_url,
-                },
+      };
-                true
+
-              ),
+      try {
-              isPasswordlessUser: passwordlessUser,
+        const client = await initClient(initClientParams, true);
+        return {
+          client,
+          passwordlessUser,
         };
       } catch (err) {
         if (err instanceof CryptoStoreIntegrityError) {
           // We can't use this session anymore, so let's log it out
           try {
-                const client = await initClient(
+            const client = await initClient(initClientParams, false); // Don't need the crypto store just to log out)
-                  {
-                    baseUrl: Config.defaultHomeserverUrl(),
-                    accessToken: access_token,
-                    userId: user_id,
-                    deviceId: device_id,
-                    fallbackICEServerAllowed: fallbackICEServerAllowed,
-                    foci,
-                  },
-                  false // Don't need the crypto store just to log out
-                );
             await client.logout(true);
-              } catch (err_) {
+          } catch (err) {
             logger.warn(
               "The previous session was lost, and we couldn't log it out, " +
+                err +
                 "either"
             );
           }
@@ -193,178 +398,29 @@ export const ClientProvider: FC<Props> = ({ children }) => {
       throw err;
     }
   }
-    };
+}
 
-    init()
+export interface Session {
-      .then(({ client, isPasswordlessUser }) => {
+  user_id: string;
-        setState({
+  device_id: string;
-          client,
+  access_token: string;
-          loading: false,
+  passwordlessUser: boolean;
-          isAuthenticated: Boolean(client),
+  tempPassword?: string;
-          isPasswordlessUser,
+}
-          userName: client?.getUserIdLocalpart(),
-          error: undefined,
-        });
-      })
-      .catch((err) => {
-        logger.error(err);
-        setState({
-          client: undefined,
-          loading: false,
-          isAuthenticated: false,
-          isPasswordlessUser: false,
-          userName: null,
-          error: undefined,
-        });
-      })
-      .finally(() => (initializing.current = false));
-  }, []);
 
-  const changePassword = useCallback(
+const clearSession = () => localStorage.removeItem("matrix-auth-store");
-    async (password: string) => {
+const saveSession = (s: Session) =>
-      const { tempPassword, ...session } = loadSession();
+  localStorage.setItem("matrix-auth-store", JSON.stringify(s));
-
+const loadSession = (): Session | undefined => {
-      await client.setPassword(
+  const data = localStorage.getItem("matrix-auth-store");
-        {
+  if (!data) {
-          type: "m.login.password",
+    return undefined;
-          identifier: {
-            type: "m.id.user",
-            user: session.user_id,
-          },
-          user: session.user_id,
-          password: tempPassword,
-        },
-        password
-      );
-
-      saveSession({ ...session, passwordlessUser: false });
-
-      setState({
-        client,
-        loading: false,
-        isAuthenticated: true,
-        isPasswordlessUser: false,
-        userName: client.getUserIdLocalpart(),
-        error: undefined,
-      });
-    },
-    [client]
-  );
-
-  const setClient = useCallback(
-    (newClient: MatrixClient, session: Session) => {
-      if (client && client !== newClient) {
-        client.stopClient();
   }
 
-      if (newClient) {
+  return JSON.parse(data);
-        saveSession(session);
-
-        setState({
-          client: newClient,
-          loading: false,
-          isAuthenticated: true,
-          isPasswordlessUser: session.passwordlessUser,
-          userName: newClient.getUserIdLocalpart(),
-          error: undefined,
-        });
-      } else {
-        clearSession();
-
-        setState({
-          client: undefined,
-          loading: false,
-          isAuthenticated: false,
-          isPasswordlessUser: false,
-          userName: null,
-          error: undefined,
-        });
-      }
-    },
-    [client]
-  );
-
-  const logout = useCallback(async () => {
-    await client.logout(true);
-    await client.clearStores();
-    clearSession();
-    setState({
-      client: undefined,
-      loading: false,
-      isAuthenticated: false,
-      isPasswordlessUser: true,
-      userName: "",
-      error: undefined,
-    });
-    history.push("/");
-    PosthogAnalytics.instance.setRegistrationType(RegistrationType.Guest);
-  }, [history, client]);
-
-  const { t } = useTranslation();
-
-  // To protect against multiple sessions writing to the same storage
-  // simultaneously, we send a broadcast message that shuts down all other
-  // running instances of the app. This isn't necessary if the app is running in
-  // a widget though, since then it'll be mostly stateless.
-  useEffect(() => {
-    if (!widget) loadChannel?.postMessage({});
-  }, []);
-
-  useEventTarget(
-    loadChannel,
-    "message",
-    useCallback(() => {
-      client?.stopClient();
-
-      setState((prev) => ({
-        ...prev,
-        error: translatedError(
-          "This application has been opened in another tab.",
-          t
-        ),
-      }));
-    }, [client, setState, t])
-  );
-
-  const context = useMemo<ClientState>(
-    () => ({
-      loading,
-      isAuthenticated,
-      isPasswordlessUser,
-      client,
-      changePassword,
-      logout,
-      userName,
-      setClient,
-      error: undefined,
-    }),
-    [
-      loading,
-      isAuthenticated,
-      isPasswordlessUser,
-      client,
-      changePassword,
-      logout,
-      userName,
-      setClient,
-    ]
-  );
-
-  useEffect(() => {
-    window.matrixclient = client;
-    window.isPasswordlessUser = isPasswordlessUser;
-
-    if (PosthogAnalytics.hasInstance())
-      PosthogAnalytics.instance.onLoginStatusChanged();
-  }, [client, isPasswordlessUser]);
-
-  if (error) {
-    return <ErrorView error={error} />;
-  }
-
-  return (
-    <ClientContext.Provider value={context}>{children}</ClientContext.Provider>
-  );
 };
 
-export const useClient = () => useContext(ClientContext);
+const clientIsDisconnected = (
+  syncState: SyncState,
+  syncData?: ISyncStateData
+) => syncState === "ERROR" && syncData?.error?.name === "ConnectionError";

src/DisconnectedBanner.module.css

@@ -0,0 +1,27 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.banner {
+  position: absolute;
+  padding: 29px;
+  background-color: var(--quaternary-content);
+  vertical-align: middle;
+  font-size: var(--font-size-body);
+  text-align: center;
+  z-index: 1;
+  top: 76px;
+  width: calc(100% - 58px);
+}

src/DisconnectedBanner.tsx

@@ -0,0 +1,53 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import classNames from "classnames";
+import { HTMLAttributes, ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+
+import styles from "./DisconnectedBanner.module.css";
+import { ValidClientState, useClientState } from "./ClientContext";
+
+interface DisconnectedBannerProps extends HTMLAttributes<HTMLElement> {
+  children?: ReactNode;
+  className?: string;
+}
+
+export function DisconnectedBanner({
+  children,
+  className,
+  ...rest
+}: DisconnectedBannerProps) {
+  const { t } = useTranslation();
+  const clientState = useClientState();
+  let shouldShowBanner = false;
+
+  if (clientState?.state === "valid") {
+    const validClientState = clientState as ValidClientState;
+    shouldShowBanner = validClientState.disconnected;
+  }
+
+  return (
+    <>
+      {shouldShowBanner && (
+        <div className={classNames(styles.banner, className)} {...rest}>
+          {children}
+          {t("Connectivity to the server has been lost.")}
+        </div>
+      )}
+    </>
+  );
+}

src/E2EEBanner.tsx

@@ -26,7 +26,8 @@ export const E2EEBanner = () => {
       <div className={styles.e2eeBanner}>
         <LockOffIcon width={24} height={24} />
         <Trans>
-          Element Call is temporarily not encrypted while we test scalability.
+          Element Call is temporarily not end-to-end encrypted while we test
+          scalability.
         </Trans>
       </div>
     </Banner>

src/E2EELock.tsx

@@ -27,7 +27,9 @@ export const E2EELock = () => {
   const { t } = useTranslation();
   const tooltip = useCallback(
     () =>
-      t("Element Call is temporarily not encrypted while we test scalability."),
+      t(
+        "Element Call is temporarily not end-to-end encrypted while we test scalability."
+      ),
     [t]
   );
 

src/Facepile.tsx

@@ -47,8 +47,8 @@ export function Facepile({
 }: Props) {
   const { t } = useTranslation();
 
-  const _size = sizes.get(size);
+  const _size = sizes.get(size)!;
-  const _overlap = overlapMap[size];
+  const _overlap = overlapMap[size]!;
 
   const title = useMemo(() => {
     return members.reduce<string | null>(

src/FullScreenView.tsx

@@ -18,14 +18,14 @@ import { ReactNode, useCallback, useEffect } from "react";
 import { useLocation } from "react-router-dom";
 import classNames from "classnames";
 import { Trans, useTranslation } from "react-i18next";
+import * as Sentry from "@sentry/react";
 
 import { Header, HeaderLogo, LeftNav, RightNav } from "./Header";
 import { LinkButton, Button } from "./button";
-import { useSubmitRageshake } from "./settings/submit-rageshake";
-import { ErrorMessage } from "./input/Input";
 import styles from "./FullScreenView.module.css";
-import { translatedError, TranslatedError } from "./TranslatedError";
+import { TranslatedError } from "./TranslatedError";
 import { Config } from "./config/Config";
+import { RageshakeButton } from "./settings/RageshakeButton";
 
 interface FullScreenViewProps {
   className?: string;
@@ -58,6 +58,7 @@ export function ErrorView({ error }: ErrorViewProps) {
 
   useEffect(() => {
     console.error(error);
+    Sentry.captureException(error);
   }, [error]);
 
   const onReload = useCallback(() => {
@@ -72,6 +73,7 @@ export function ErrorView({ error }: ErrorViewProps) {
           ? error.translatedMessage
           : error.message}
       </p>
+      <RageshakeButton description={`***Error View***: ${error.message}`} />
       {location.pathname === "/" ? (
         <Button
           size="lg"
@@ -97,37 +99,11 @@ export function ErrorView({ error }: ErrorViewProps) {
 
 export function CrashView() {
   const { t } = useTranslation();
-  const { submitRageshake, sending, sent, error } = useSubmitRageshake();
-
-  const sendDebugLogs = useCallback(() => {
-    submitRageshake({
-      description: "**Soft Crash**",
-      sendLogs: true,
-    });
-  }, [submitRageshake]);
 
   const onReload = useCallback(() => {
     window.location.href = "/";
   }, []);
 
-  let logsComponent: JSX.Element | null = null;
-  if (sent) {
-    logsComponent = <div>{t("Thanks! We'll get right on it.")}</div>;
-  } else if (sending) {
-    logsComponent = <div>{t("Sending…")}</div>;
-  } else if (Config.get().rageshake?.submit_url) {
-    logsComponent = (
-      <Button
-        size="lg"
-        variant="default"
-        onPress={sendDebugLogs}
-        className={styles.wideButton}
-      >
-        {t("Send debug logs")}
-      </Button>
-    );
-  }
-
   return (
     <FullScreenView>
       <Trans>
@@ -139,10 +115,7 @@ export function CrashView() {
         </Trans>
       )}
 
-      <div className={styles.sendLogsSection}>{logsComponent}</div>
+      <RageshakeButton description="***Soft Crash***" />
-      {error && (
-        <ErrorMessage error={translatedError("Couldn't send debug logs!", t)} />
-      )}
       <Button
         size="lg"
         variant="default"

src/ListBox.tsx

@@ -36,15 +36,16 @@ export function ListBox<T>({
   listBoxRef,
   ...rest
 }: ListBoxProps<T>) {
-  const ref = useRef<HTMLUListElement>();
+  const ref = useRef<HTMLUListElement>(null);
-  if (!listBoxRef) listBoxRef = ref;
 
-  const { listBoxProps } = useListBox(rest, state, listBoxRef);
+  const listRef = listBoxRef ?? ref;
+
+  const { listBoxProps } = useListBox(rest, state, listRef);
 
   return (
     <ul
       {...listBoxProps}
-      ref={listBoxRef}
+      ref={listRef}
       className={classNames(styles.listBox, className)}
     >
       {[...state.collection].map((item) => (
@@ -66,7 +67,7 @@ interface OptionProps<T> {
 }
 
 function Option<T>({ item, state, className }: OptionProps<T>) {
-  const ref = useRef();
+  const ref = useRef(null);
   const { optionProps, isSelected, isFocused, isDisabled } = useOption(
     { key: item.key },
     state,
@@ -83,7 +84,11 @@ function Option<T>({ item, state, className }: OptionProps<T>) {
   const origPointerUp = optionProps.onPointerUp;
   delete optionProps.onPointerUp;
   optionProps.onClick = useCallback(
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     (e) => {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
       origPointerUp(e as unknown as PointerEvent<HTMLElement>);
     },
     [origPointerUp]

src/Menu.tsx

@@ -26,7 +26,7 @@ import styles from "./Menu.module.css";
 
 interface MenuProps<T> extends AriaMenuOptions<T> {
   className?: String;
-  onClose?: () => void;
+  onClose: () => void;
   onAction: (value: Key) => void;
   label?: string;
 }
@@ -39,7 +39,7 @@ export function Menu<T extends object>({
   ...rest
 }: MenuProps<T>) {
   const state = useTreeState<T>({ ...rest, selectionMode: "none" });
-  const menuRef = useRef();
+  const menuRef = useRef(null);
   const { menuProps } = useMenu<T>(rest, state, menuRef);
 
   return (
@@ -69,7 +69,7 @@ interface MenuItemProps<T> {
 }
 
 function MenuItem<T>({ item, state, onAction, onClose }: MenuItemProps<T>) {
-  const ref = useRef();
+  const ref = useRef(null);
   const { menuItemProps } = useMenuItem(
     {
       key: item.key,

src/Modal.tsx

@@ -55,7 +55,7 @@ export function Modal({
   ...rest
 }: ModalProps) {
   const { t } = useTranslation();
-  const modalRef = useRef();
+  const modalRef = useRef(null);
   const { overlayProps, underlayProps } = useOverlay(
     { ...rest, onClose },
     modalRef
@@ -63,7 +63,7 @@ export function Modal({
   usePreventScroll();
   const { modalProps } = useModal();
   const { dialogProps, titleProps } = useDialog(rest, modalRef);
-  const closeButtonRef = useRef();
+  const closeButtonRef = useRef(null);
   const { buttonProps: closeButtonProps } = useButton(
     {
       onPress: () => onClose(),

src/SequenceDiagramViewerPage.tsx

@@ -36,6 +36,9 @@ export function SequenceDiagramViewerPage() {
 
   const [debugLog, setDebugLog] = useState<DebugLog>();
   const [selectedUserId, setSelectedUserId] = useState<string>();
+
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
   const onChangeDebugLog = useCallback((e) => {
     if (e.target.files && e.target.files.length > 0) {
       e.target.files[0].text().then((text: string) => {
@@ -55,7 +58,7 @@ export function SequenceDiagramViewerPage() {
           onChange={onChangeDebugLog}
         />
       </FieldRow>
-      {debugLog && (
+      {debugLog && selectedUserId && (
         <SequenceDiagramViewer
           localUserId={debugLog.localUserId}
           selectedUserId={selectedUserId}

src/Tooltip.tsx

@@ -74,7 +74,7 @@ export const TooltipTrigger = forwardRef<HTMLElement, TooltipTriggerProps>(
     const tooltipTriggerProps = { delay: 250, ...rest };
     const tooltipState = useTooltipTriggerState(tooltipTriggerProps);
     const triggerRef = useObjectRef<HTMLElement>(ref);
-    const overlayRef = useRef();
+    const overlayRef = useRef<HTMLDivElement>(null);
     const { triggerProps, tooltipProps } = useTooltipTrigger(
       tooltipTriggerProps,
       tooltipState,

src/UrlParams.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2022 - 2023 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -17,6 +17,8 @@ limitations under the License.
 import { useMemo } from "react";
 import { useLocation } from "react-router-dom";
 
+import { Config } from "./config/Config";
+
 interface UrlParams {
   roomAlias: string | null;
   roomId: string | null;
@@ -88,19 +90,54 @@ interface UrlParams {
 
 /**
  * Gets the app parameters for the current URL.
- * @param query The URL query string
+ * @param ignoreRoomAlias If true, does not try to parse a room alias from the URL
- * @param fragment The URL fragment string
+ * @param search The URL search string
+ * @param pathname The URL path name
+ * @param hash The URL hash
  * @returns The app parameters encoded in the URL
  */
 export const getUrlParams = (
-  query: string = window.location.search,
+  ignoreRoomAlias?: boolean,
-  fragment: string = window.location.hash
+  search = window.location.search,
+  pathname = window.location.pathname,
+  hash = window.location.hash
 ): UrlParams => {
-  const fragmentQueryStart = fragment.indexOf("?");
+  let roomAlias: string | null = null;
+  if (!ignoreRoomAlias) {
+    if (hash === "") {
+      roomAlias = pathname.substring(1); // Strip the "/"
+
+      // Delete "/room/", if present
+      if (roomAlias.startsWith("room/")) {
+        roomAlias = roomAlias.substring("room/".length);
+      }
+      // Add "#", if not present
+      if (!roomAlias.startsWith("#")) {
+        roomAlias = `#${roomAlias}`;
+      }
+    } else {
+      roomAlias = hash;
+    }
+
+    // Add server part, if not present
+    if (!roomAlias.includes(":")) {
+      roomAlias = `${roomAlias}:${Config.defaultServerName()}`;
+    }
+
+    // Delete "?" and what comes afterwards
+    roomAlias = roomAlias.split("?")[0];
+
+    // Make roomAlias undefined, if empty
+    if (roomAlias.length <= 1) {
+      roomAlias = null;
+    }
+  }
+
+  const fragmentQueryStart = hash.indexOf("?");
   const fragmentParams = new URLSearchParams(
-    fragmentQueryStart === -1 ? "" : fragment.substring(fragmentQueryStart)
+    fragmentQueryStart === -1 ? "" : hash.substring(fragmentQueryStart)
   );
-  const queryParams = new URLSearchParams(query);
+  const queryParams = new URLSearchParams(search);
 
   // Normally, URL params should be encoded in the fragment so as to avoid
   // leaking them to the server. However, we also check the normal query
@@ -114,17 +151,19 @@ export const getUrlParams = (
     ...queryParams.getAll(name),
   ];
 
-  // The part of the fragment before the ?
-  const fragmentRoute =
-    fragmentQueryStart === -1
-      ? fragment
-      : fragment.substring(0, fragmentQueryStart);
-
   const fontScale = parseFloat(getParam("fontScale") ?? "");
 
+  // Make sure roomId is valid
+  let roomId: string | null = getParam("roomId");
+  if (!roomId?.startsWith("!")) {
+    roomId = null;
+  } else if (!roomId.includes("")) {
+    roomId = null;
+  }
+
   return {
-    roomAlias: fragmentRoute.length > 1 ? fragmentRoute : null,
+    roomAlias,
-    roomId: getParam("roomId"),
+    roomId,
     viaServers: getAllParams("via"),
     isEmbedded: hasParam("embed"),
     preload: hasParam("preload"),
@@ -149,6 +188,9 @@ export const getUrlParams = (
  * @returns The app parameters for the current URL
  */
 export const useUrlParams = (): UrlParams => {
-  const { hash, search } = useLocation();
+  const { search, pathname, hash } = useLocation();
-  return useMemo(() => getUrlParams(search, hash), [search, hash]);
+  return useMemo(
+    () => getUrlParams(false, search, pathname, hash),
+    [search, pathname, hash]
+  );
 };

src/UserMenu.module.css

@@ -17,6 +17,8 @@ limitations under the License.
 .menuIcon {
   width: 24px;
   height: 24px;
+
+  flex-shrink: 0;
 }
 
 .userButton svg * {

src/UserMenu.tsx

@@ -36,7 +36,7 @@ interface UserMenuProps {
   isAuthenticated: boolean;
   isPasswordlessUser: boolean;
   displayName: string;
-  avatarUrl: string;
+  avatarUrl?: string;
   onAction: (value: string) => void;
 }
 
@@ -119,7 +119,9 @@ export function UserMenu({
           )}
         </Button>
       </TooltipTrigger>
-      {(props) => (
+      {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (props: any) => (
           <Menu {...props} label={t("User menu")} onAction={onAction}>
             {items.map(({ key, icon: Icon, label, dataTestid }) => (
               <Item key={key} textValue={label}>
@@ -133,7 +135,8 @@ export function UserMenu({
               </Item>
             ))}
           </Menu>
-      )}
+        )
+      }
     </PopoverMenuTrigger>
   );
 }

src/UserMenuContainer.tsx

@@ -17,7 +17,7 @@ limitations under the License.
 import { useCallback, useState } from "react";
 import { useHistory, useLocation } from "react-router-dom";
 
-import { useClient } from "./ClientContext";
+import { useClientLegacy } from "./ClientContext";
 import { useProfile } from "./profile/useProfile";
 import { useModalTriggerState } from "./Modal";
 import { SettingsModal } from "./settings/SettingsModal";
@@ -30,8 +30,7 @@ interface Props {
 export function UserMenuContainer({ preventNavigation = false }: Props) {
   const location = useLocation();
   const history = useHistory();
-  const { isAuthenticated, isPasswordlessUser, logout, userName, client } =
+  const { client, logout, authenticated, passwordlessUser } = useClientLegacy();
-    useClient();
   const { displayName, avatarUrl } = useProfile(client);
   const { modalState, modalProps } = useModalTriggerState();
 
@@ -49,7 +48,7 @@ export function UserMenuContainer({ preventNavigation = false }: Props) {
           modalState.open();
           break;
         case "logout":
-          logout();
+          logout?.();
           break;
         case "login":
           history.push("/login", { state: { from: location } });
@@ -59,19 +58,18 @@ export function UserMenuContainer({ preventNavigation = false }: Props) {
     [history, location, logout, modalState]
   );
 
+  const userName = client?.getUserIdLocalpart() ?? "";
   return (
     <>
       <UserMenu
         preventNavigation={preventNavigation}
-        isAuthenticated={isAuthenticated}
+        isAuthenticated={authenticated}
-        isPasswordlessUser={isPasswordlessUser}
+        isPasswordlessUser={passwordlessUser}
         avatarUrl={avatarUrl}
         onAction={onAction}
-        displayName={
+        displayName={displayName || (userName ? userName.replace("@", "") : "")}
-          displayName || (userName ? userName.replace("@", "") : undefined)
-        }
       />
-      {modalState.isOpen && (
+      {modalState.isOpen && client && (
         <SettingsModal
           client={client}
           defaultTab={defaultSettingsTab}

src/analytics/PosthogAnalytics.ts

@@ -30,6 +30,7 @@ import {
   MuteMicrophoneTracker,
   UndecryptableToDeviceEventTracker,
   QualitySurveyEventTracker,
+  CallDisconnectedEventTracker,
 } from "./PosthogEvents";
 import { Config } from "../config/Config";
 import { getUrlParams } from "../UrlParams";
@@ -98,7 +99,7 @@ export class PosthogAnalytics {
   // set true during the constructor if posthog config is present, otherwise false
   private static internalInstance: PosthogAnalytics | null = null;
 
-  private identificationPromise: Promise<void>;
+  private identificationPromise?: Promise<void>;
   private readonly enabled: boolean = false;
   private anonymity = Anonymity.Disabled;
   private platformSuperProperties = {};
@@ -255,7 +256,9 @@ export class PosthogAnalytics {
       } catch (e) {
         // The above could fail due to network requests, but not essential to starting the application,
         // so swallow it.
-        logger.log("Unable to identify user for tracking" + e.toString());
+        logger.log(
+          "Unable to identify user for tracking" + (e as Error)?.toString()
+        );
       }
       if (analyticsID) {
         this.posthog.identify(analyticsID);
@@ -366,7 +369,7 @@ export class PosthogAnalytics {
 
     if (anonymity === Anonymity.Pseudonymous) {
       this.setRegistrationType(
-        window.matrixclient.isGuest() || window.isPasswordlessUser
+        window.matrixclient.isGuest() || window.passwordlessUser
           ? RegistrationType.Guest
           : RegistrationType.Registered
       );
@@ -435,4 +438,5 @@ export class PosthogAnalytics {
   public eventMuteCamera = new MuteCameraTracker();
   public eventUndecryptableToDevice = new UndecryptableToDeviceEventTracker();
   public eventQualitySurvey = new QualitySurveyEventTracker();
+  public eventCallDisconnected = new CallDisconnectedEventTracker();
 }

src/analytics/PosthogEvents.ts

@@ -14,6 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { DisconnectReason } from "livekit-client";
+
 import {
   IPosthogEvent,
   PosthogAnalytics,
@@ -181,3 +183,17 @@ export class QualitySurveyEventTracker {
     });
   }
 }
+
+interface CallDisconnectedEvent {
+  eventName: "CallDisconnected";
+  reason?: DisconnectReason;
+}
+
+export class CallDisconnectedEventTracker {
+  track(reason?: DisconnectReason) {
+    PosthogAnalytics.instance.trackEvent<CallDisconnectedEvent>({
+      eventName: "CallDisconnected",
+      reason,
+    });
+  }
+}

src/auth/LoginPage.tsx

@@ -35,8 +35,8 @@ export const LoginPage: FC = () => {
   const { setClient } = useClient();
   const login = useInteractiveLogin();
   const homeserver = Config.defaultHomeserverUrl(); // TODO: Make this configurable
-  const usernameRef = useRef<HTMLInputElement>();
+  const usernameRef = useRef<HTMLInputElement>(null);
-  const passwordRef = useRef<HTMLInputElement>();
+  const passwordRef = useRef<HTMLInputElement>(null);
   const history = useHistory();
   const location = useLocation();
   const [loading, setLoading] = useState(false);
@@ -49,12 +49,27 @@ export const LoginPage: FC = () => {
       e.preventDefault();
       setLoading(true);
 
+      if (!homeserver || !usernameRef.current || !passwordRef.current) {
+        setError(Error("Login parameters are undefined"));
+        setLoading(false);
+        return;
+      }
+
       login(homeserver, usernameRef.current.value, passwordRef.current.value)
         .then(([client, session]) => {
-          setClient(client, session);
+          if (!setClient) {
+            return;
+          }
 
-          if (location.state && location.state.from) {
+          setClient({ client, session });
-            history.push(location.state.from);
+
+          const locationState = location.state;
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          if (locationState && locationState.from) {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            history.push(locationState.from);
           } else {
             history.push("/");
           }

src/auth/RegisterPage.tsx

@@ -30,7 +30,7 @@ import { Trans, useTranslation } from "react-i18next";
 
 import { FieldRow, InputField, ErrorMessage } from "../input/Input";
 import { Button } from "../button";
-import { useClient } from "../ClientContext";
+import { useClientLegacy } from "../ClientContext";
 import { useInteractiveRegistration } from "./useInteractiveRegistration";
 import styles from "./LoginPage.module.css";
 import { ReactComponent as Logo } from "../icons/LogoLarge.svg";
@@ -45,9 +45,10 @@ export const RegisterPage: FC = () => {
   const { t } = useTranslation();
   usePageTitle(t("Register"));
 
-  const { loading, isAuthenticated, isPasswordlessUser, client, setClient } =
+  const { loading, authenticated, passwordlessUser, client, setClient } =
-    useClient();
+    useClientLegacy();
-  const confirmPasswordRef = useRef<HTMLInputElement>();
+
+  const confirmPasswordRef = useRef<HTMLInputElement>(null);
   const history = useHistory();
   const location = useLocation();
   const [registering, setRegistering] = useState(false);
@@ -75,10 +76,11 @@ export const RegisterPage: FC = () => {
           userName,
           password,
           userName,
-          recaptchaResponse
+          recaptchaResponse,
+          passwordlessUser
         );
 
-        if (client && isPasswordlessUser) {
+        if (client && client?.groupCallEventHandler && passwordlessUser) {
           // Migrate the user's rooms
           for (const groupCall of client.groupCallEventHandler.groupCalls.values()) {
             const roomId = groupCall.room.roomId;
@@ -86,7 +88,11 @@ export const RegisterPage: FC = () => {
             try {
               await newClient.joinRoom(roomId);
             } catch (error) {
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore
               if (error.errcode === "M_LIMIT_EXCEEDED") {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
                 await sleep(error.data.retry_after_ms);
                 await newClient.joinRoom(roomId);
               } else {
@@ -97,13 +103,17 @@ export const RegisterPage: FC = () => {
           }
         }
 
-        setClient(newClient, session);
+        setClient?.({ client: newClient, session });
         PosthogAnalytics.instance.eventSignup.cacheSignupEnd(new Date());
       };
 
       submit()
         .then(() => {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
           if (location.state?.from) {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
             history.push(location.state?.from);
           } else {
             history.push("/");
@@ -119,7 +129,7 @@ export const RegisterPage: FC = () => {
       register,
       location,
       history,
-      isPasswordlessUser,
+      passwordlessUser,
       reset,
       execute,
       client,
@@ -136,10 +146,10 @@ export const RegisterPage: FC = () => {
   }, [password, passwordConfirmation, t]);
 
   useEffect(() => {
-    if (!loading && isAuthenticated && !isPasswordlessUser && !registering) {
+    if (!loading && authenticated && !passwordlessUser && !registering) {
       history.push("/");
     }
-  }, [loading, history, isAuthenticated, isPasswordlessUser, registering]);
+  }, [loading, history, authenticated, passwordlessUser, registering]);
 
   if (loading) {
     return <LoadingView />;

src/auth/useInteractiveLogin.ts

@@ -41,8 +41,10 @@ export const useInteractiveLogin = () =>
           },
           password,
         }),
-      stateUpdated: null,
+      stateUpdated: (...args) => {},
-      requestEmailToken: null,
+      requestEmailToken: (...args): Promise<{ sid: string }> => {
+        return Promise.resolve({ sid: "" });
+      },
     });
 
     // XXX: This claims to return an IAuthData which contains none of these

src/auth/useInteractiveRegistration.ts

@@ -23,28 +23,32 @@ import { Session } from "../ClientContext";
 import { Config } from "../config/Config";
 
 export const useInteractiveRegistration = (): {
-  privacyPolicyUrl: string;
+  privacyPolicyUrl?: string;
-  recaptchaKey: string;
+  recaptchaKey?: string;
   register: (
     username: string,
     password: string,
     displayName: string,
     recaptchaResponse: string,
-    passwordlessUser?: boolean
+    passwordlessUser: boolean
   ) => Promise<[MatrixClient, Session]>;
 } => {
-  const [privacyPolicyUrl, setPrivacyPolicyUrl] = useState<string>();
+  const [privacyPolicyUrl, setPrivacyPolicyUrl] = useState<string | undefined>(
-  const [recaptchaKey, setRecaptchaKey] = useState<string>();
+    undefined
+  );
+  const [recaptchaKey, setRecaptchaKey] = useState<string | undefined>(
+    undefined
+  );
 
   const authClient = useRef<MatrixClient>();
   if (!authClient.current) {
     authClient.current = createClient({
-      baseUrl: Config.defaultHomeserverUrl(),
+      baseUrl: Config.defaultHomeserverUrl()!,
     });
   }
 
   useEffect(() => {
-    authClient.current.registerRequest({}).catch((error) => {
+    authClient.current!.registerRequest({}).catch((error) => {
       setPrivacyPolicyUrl(
         error.data?.params["m.login.terms"]?.policies?.privacy_policy?.en?.url
       );
@@ -58,12 +62,12 @@ export const useInteractiveRegistration = (): {
       password: string,
       displayName: string,
       recaptchaResponse: string,
-      passwordlessUser?: boolean
+      passwordlessUser: boolean
     ): Promise<[MatrixClient, Session]> => {
       const interactiveAuth = new InteractiveAuth({
-        matrixClient: authClient.current,
+        matrixClient: authClient.current!,
         doRequest: (auth) =>
-          authClient.current.registerRequest({
+          authClient.current!.registerRequest({
             username,
             password,
             auth: auth || undefined,
@@ -84,7 +88,9 @@ export const useInteractiveRegistration = (): {
             });
           }
         },
-        requestEmailToken: null,
+        requestEmailToken: (...args) => {
+          return Promise.resolve({ sid: "dummy" });
+        },
       });
 
       // XXX: This claims to return an IAuthData which contains none of these
@@ -95,7 +101,7 @@ export const useInteractiveRegistration = (): {
 
       const client = await initClient(
         {
-          baseUrl: Config.defaultHomeserverUrl(),
+          baseUrl: Config.defaultHomeserverUrl()!,
           accessToken: access_token,
           userId: user_id,
           deviceId: device_id,
@@ -117,7 +123,7 @@ export const useInteractiveRegistration = (): {
         session.tempPassword = password;
       }
 
-      const user = client.getUser(client.getUserId());
+      const user = client.getUser(client.getUserId()!)!;
       user.setRawDisplayName(displayName);
       user.setDisplayName(displayName);
 

src/auth/useRecaptcha.ts

@@ -34,7 +34,7 @@ interface RecaptchaPromiseRef {
   reject: (error: Error) => void;
 }
 
-export const useRecaptcha = (sitekey: string) => {
+export const useRecaptcha = (sitekey?: string) => {
   const { t } = useTranslation();
   const [recaptchaId] = useState(() => randomString(16));
   const promiseRef = useRef<RecaptchaPromiseRef>();
@@ -68,9 +68,9 @@ export const useRecaptcha = (sitekey: string) => {
     }
   }, [recaptchaId, sitekey]);
 
-  const execute = useCallback(() => {
+  const execute = useCallback((): Promise<string> => {
     if (!sitekey) {
-      return Promise.resolve(null);
+      return Promise.resolve("");
     }
 
     if (!window.grecaptcha) {

src/auth/useRegisterPasswordlessUser.ts

@@ -23,9 +23,9 @@ import { generateRandomName } from "../auth/generateRandomName";
 import { useRecaptcha } from "../auth/useRecaptcha";
 
 interface UseRegisterPasswordlessUserType {
-  privacyPolicyUrl: string;
+  privacyPolicyUrl?: string;
   registerPasswordlessUser: (displayName: string) => Promise<void>;
-  recaptchaId: string;
+  recaptchaId?: string;
 }
 
 export function useRegisterPasswordlessUser(): UseRegisterPasswordlessUserType {
@@ -36,6 +36,10 @@ export function useRegisterPasswordlessUser(): UseRegisterPasswordlessUserType {
 
   const registerPasswordlessUser = useCallback(
     async (displayName: string) => {
+      if (!setClient) {
+        throw new Error("No client context");
+      }
+
       try {
         const recaptchaResponse = await execute();
         const userName = generateRandomName();
@@ -46,7 +50,7 @@ export function useRegisterPasswordlessUser(): UseRegisterPasswordlessUserType {
           recaptchaResponse,
           true
         );
-        setClient(client, session);
+        setClient({ client, session });
       } catch (e) {
         reset();
         throw e;

src/button/Button.module.css

@@ -61,6 +61,10 @@ limitations under the License.
   outline: auto;
 }
 
+.toolbarButton:disabled {
+  opacity: 0.55;
+}
+
 .toolbarButton,
 .toolbarButtonSecondary {
   width: 50px;

src/button/Button.tsx

@@ -77,6 +77,7 @@ interface Props {
   children: Element[];
   onPress: (e: PressEvent) => void;
   onPressStart: (e: PressEvent) => void;
+  disabled: boolean;
   // TODO: add all props for <Button>
   [index: string]: unknown;
 }

src/button/LinkButton.tsx

@@ -46,7 +46,7 @@ export function LinkButton({
     <Link
       className={classNames(
         variantToClassName[variant || "secondary"],
-        sizeToClassName[size],
+        size ? sizeToClassName[size] : [],
         className
       )}
       to={to}

src/config/Config.ts

@@ -45,11 +45,11 @@ export class Config {
 
   // Convenience accessors
   public static defaultHomeserverUrl(): string | undefined {
-    return Config.get().default_server_config["m.homeserver"].base_url;
+    return Config.get().default_server_config?.["m.homeserver"].base_url;
   }
 
   public static defaultServerName(): string | undefined {
-    return Config.get().default_server_config["m.homeserver"].server_name;
+    return Config.get().default_server_config?.["m.homeserver"].server_name;
   }
 
   public config?: ResolvedConfigOptions;

src/home/CallList.tsx

@@ -35,13 +35,13 @@ export function CallList({ rooms, client, disableFacepile }: CallListProps) {
   return (
     <>
       <div className={styles.callList}>
-        {rooms.map(({ roomId, roomName, avatarUrl, participants }) => (
+        {rooms.map(({ roomAlias, roomName, avatarUrl, participants }) => (
           <CallTile
-            key={roomId}
+            key={roomAlias}
             client={client}
             name={roomName}
             avatarUrl={avatarUrl}
-            roomId={roomId}
+            roomAlias={roomAlias}
             participants={participants}
             disableFacepile={disableFacepile}
           />
@@ -59,7 +59,7 @@ export function CallList({ rooms, client, disableFacepile }: CallListProps) {
 interface CallTileProps {
   name: string;
   avatarUrl: string;
-  roomId: string;
+  roomAlias: string;
   participants: RoomMember[];
   client: MatrixClient;
   disableFacepile?: boolean;
@@ -67,14 +67,17 @@ interface CallTileProps {
 function CallTile({
   name,
   avatarUrl,
-  roomId,
+  roomAlias,
   participants,
   client,
   disableFacepile,
 }: CallTileProps) {
   return (
     <div className={styles.callTile}>
-      <Link to={`/room/${roomId}`} className={styles.callTileLink}>
+      <Link
+        to={`/${roomAlias.substring(1).split(":")[0]}`}
+        className={styles.callTileLink}
+      >
         <Avatar
           size={Size.LG}
           bgKey={name}
@@ -86,7 +89,7 @@ function CallTile({
           <Body overflowEllipsis fontWeight="semiBold">
             {name}
           </Body>
-          <Caption overflowEllipsis>{getRoomUrl(roomId)}</Caption>
+          <Caption overflowEllipsis>{getRoomUrl(roomAlias)}</Caption>
           {participants && !disableFacepile && (
             <Facepile
               className={styles.facePile}
@@ -100,7 +103,7 @@ function CallTile({
       <CopyButton
         className={styles.copyButton}
         variant="icon"
-        value={getRoomUrl(roomId)}
+        value={getRoomUrl(roomAlias)}
       />
     </div>
   );

src/home/CallTypeDropdown.tsx

@@ -42,6 +42,12 @@ interface Props {
 export const CallTypeDropdown: FC<Props> = ({ callType, setCallType }) => {
   const { t } = useTranslation();
 
+  const onAction = (key: React.Key) => {
+    setCallType(key.toString() as CallType);
+  };
+
+  const onClose = () => {};
+
   return (
     <PopoverMenuTrigger placement="bottom">
       <Button variant="dropdown" className={commonStyles.headline}>
@@ -52,7 +58,12 @@ export const CallTypeDropdown: FC<Props> = ({ callType, setCallType }) => {
         </Headline>
       </Button>
       {(props: JSX.IntrinsicAttributes) => (
-        <Menu {...props} label={t("Call type menu")} onAction={setCallType}>
+        <Menu
+          {...props}
+          label={t("Call type menu")}
+          onAction={onAction}
+          onClose={onClose}
+        >
           <Item key={CallType.Video} textValue={t("Video call")}>
             <VideoIcon />
             <span>{t("Video call")}</span>

src/home/HomePage.tsx

@@ -16,7 +16,7 @@ limitations under the License.
 
 import { useTranslation } from "react-i18next";
 
-import { useClient } from "../ClientContext";
+import { useClientState } from "../ClientContext";
 import { ErrorView, LoadingView } from "../FullScreenView";
 import { UnauthenticatedView } from "./UnauthenticatedView";
 import { RegisteredView } from "./RegisteredView";
@@ -26,16 +26,18 @@ export function HomePage() {
   const { t } = useTranslation();
   usePageTitle(t("Home"));
 
-  const { isAuthenticated, isPasswordlessUser, loading, error, client } =
+  const clientState = useClientState();
-    useClient();
 
-  if (loading) {
+  if (!clientState) {
     return <LoadingView />;
-  } else if (error) {
+  } else if (clientState.state === "error") {
-    return <ErrorView error={error} />;
+    return <ErrorView error={clientState.error} />;
   } else {
-    return isAuthenticated ? (
+    return clientState.authenticated ? (
-      <RegisteredView isPasswordlessUser={isPasswordlessUser} client={client} />
+      <RegisteredView
+        isPasswordlessUser={clientState.authenticated.isPasswordlessUser}
+        client={clientState.authenticated.client}
+      />
     ) : (
       <UnauthenticatedView />
     );

src/home/RegisteredView.tsx

@@ -70,10 +70,10 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
         setError(undefined);
         setLoading(true);
 
-        const [roomIdOrAlias] = await createRoom(client, roomName, ptt);
+        const [roomAlias] = await createRoom(client, roomName, ptt);
 
-        if (roomIdOrAlias) {
+        if (roomAlias) {
-          history.push(`/room/${roomIdOrAlias}`);
+          history.push(`/${roomAlias.substring(1).split(":")[0]}`);
         }
       }
 

src/home/UnauthenticatedView.tsx

@@ -79,16 +79,21 @@ export const UnauthenticatedView: FC = () => {
           true
         );
 
-        let roomIdOrAlias: string;
+        let roomAlias: string;
         try {
-          [roomIdOrAlias] = await createRoom(client, roomName, ptt);
+          [roomAlias] = await createRoom(client, roomName, ptt);
         } catch (error) {
+          if (!setClient) {
+            throw error;
+          }
+
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
           if (error.errcode === "M_ROOM_IN_USE") {
             setOnFinished(() => {
-              setClient(client, session);
+              setClient({ client, session });
               const aliasLocalpart = roomAliasLocalpartFromRoomName(roomName);
-              const [, serverName] = client.getUserId().split(":");
+              history.push(`/${aliasLocalpart}`);
-              history.push(`/room/#${aliasLocalpart}:${serverName}`);
             });
 
             setLoading(false);
@@ -100,8 +105,12 @@ export const UnauthenticatedView: FC = () => {
         }
 
         // Only consider the registration successful if we managed to create the room, too
-        setClient(client, session);
+        if (!setClient) {
-        history.push(`/room/${roomIdOrAlias}`);
+          throw new Error("setClient is undefined");
+        }
+
+        setClient({ client, session });
+        history.push(`/${roomAlias.substring(1).split(":")[0]}`);
       }
 
       submit().catch((error) => {
@@ -204,7 +213,7 @@ export const UnauthenticatedView: FC = () => {
           </Body>
         </footer>
       </div>
-      {modalState.isOpen && (
+      {modalState.isOpen && onFinished && (
         <JoinExistingCallModal onJoin={onFinished} {...modalProps} />
       )}
     </>

src/home/useGroupCallRooms.ts

@@ -22,7 +22,7 @@ import { GroupCallEventHandlerEvent } from "matrix-js-sdk/src/webrtc/groupCallEv
 import { useState, useEffect } from "react";
 
 export interface GroupCallRoom {
-  roomId: string;
+  roomAlias: string;
   roomName: string;
   avatarUrl: string;
   room: Room;
@@ -42,7 +42,7 @@ function getLastTs(client: MatrixClient, r: Room) {
     return ts;
   }
 
-  const myUserId = client.getUserId();
+  const myUserId = client.getUserId()!;
 
   if (r.getMyMembership() !== "join") {
     const membershipEvent = r.currentState.getStateEvents(
@@ -79,26 +79,32 @@ function sortRooms(client: MatrixClient, rooms: Room[]): Room[] {
 }
 
 export function useGroupCallRooms(client: MatrixClient): GroupCallRoom[] {
-  const [rooms, setRooms] = useState([]);
+  const [rooms, setRooms] = useState<GroupCallRoom[]>([]);
 
   useEffect(() => {
     function updateRooms() {
+      if (!client.groupCallEventHandler) {
+        return;
+      }
+
       const groupCalls = client.groupCallEventHandler.groupCalls.values();
       const rooms = Array.from(groupCalls).map((groupCall) => groupCall.room);
-      const sortedRooms = sortRooms(client, rooms);
+      const filteredRooms = rooms.filter((r) => r.getCanonicalAlias()); // We don't display rooms without an alias
+      const sortedRooms = sortRooms(client, filteredRooms);
       const items = sortedRooms.map((room) => {
-        const groupCall = client.getGroupCallForRoom(room.roomId);
+        const groupCall = client.getGroupCallForRoom(room.roomId)!;
 
         return {
-          roomId: room.getCanonicalAlias() || room.roomId,
+          roomAlias: room.getCanonicalAlias(),
           roomName: room.name,
-          avatarUrl: room.getMxcAvatarUrl(),
+          avatarUrl: room.getMxcAvatarUrl()!,
           room,
           groupCall,
-          participants: [...groupCall.participants],
+          participants: [...groupCall!.participants.keys()],
         };
       });
-      setRooms(items);
+
+      setRooms(items as GroupCallRoom[]);
     }
 
     updateRooms();

src/initializer.tsx

@@ -45,6 +45,12 @@ class DependencyLoadStates {
 
 export class Initializer {
   private static internalInstance: Initializer;
+  private isInitialized = false;
+
+  public static isInitialized(): boolean {
+    return Initializer.internalInstance?.isInitialized;
+  }
+
   public static initBeforeReact() {
     // this maybe also needs to return a promise in the future,
     // if we have to do async inits before showing the loading screen
@@ -55,7 +61,7 @@ export class Initializer {
     languageDetector.addDetector({
       name: "urlFragment",
       // Look for a language code in the URL's fragment
-      lookup: () => getUrlParams().lang ?? undefined,
+      lookup: () => getUrlParams(true).lang ?? undefined,
     });
 
     i18n
@@ -140,7 +146,7 @@ export class Initializer {
     }
 
     // Custom fonts
-    const { fonts, fontScale } = getUrlParams();
+    const { fonts, fontScale } = getUrlParams(true);
     if (fontScale !== null) {
       document.documentElement.style.setProperty(
         "--font-scale",
@@ -227,7 +233,9 @@ export class Initializer {
     if (this.loadStates.allDepsAreLoaded()) {
       // resolve if there is no dependency that is not loaded
       resolve();
+      this.isInitialized = true;
     }
   }
-  private initPromise: Promise<void> | null;
+
+  private initPromise?: Promise<void>;
 }

src/input/AvatarInputField.tsx

@@ -15,10 +15,14 @@ limitations under the License.
 */
 
 import { useObjectRef } from "@react-aria/utils";
-import { AllHTMLAttributes, ChangeEvent, useEffect } from "react";
+import {
-import { useCallback } from "react";
+  AllHTMLAttributes,
-import { useState } from "react";
+  useEffect,
-import { forwardRef } from "react";
+  useCallback,
+  useState,
+  forwardRef,
+  ChangeEvent,
+} from "react";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
 
@@ -30,7 +34,7 @@ import styles from "./AvatarInputField.module.css";
 interface Props extends AllHTMLAttributes<HTMLInputElement> {
   id: string;
   label: string;
-  avatarUrl: string;
+  avatarUrl: string | undefined;
   displayName: string;
   onRemoveAvatar: () => void;
 }
@@ -43,7 +47,7 @@ export const AvatarInputField = forwardRef<HTMLInputElement, Props>(
     const { t } = useTranslation();
 
     const [removed, setRemoved] = useState(false);
-    const [objUrl, setObjUrl] = useState<string>(null);
+    const [objUrl, setObjUrl] = useState<string | undefined>(undefined);
 
     const fileInputRef = useObjectRef(ref);
 
@@ -52,11 +56,11 @@ export const AvatarInputField = forwardRef<HTMLInputElement, Props>(
 
       const onChange = (e: Event) => {
         const inputEvent = e as unknown as ChangeEvent<HTMLInputElement>;
-        if (inputEvent.target.files.length > 0) {
+        if (inputEvent.target.files && inputEvent.target.files.length > 0) {
           setObjUrl(URL.createObjectURL(inputEvent.target.files[0]));
           setRemoved(false);
         } else {
-          setObjUrl(null);
+          setObjUrl(undefined);
         }
       };
 
@@ -77,7 +81,7 @@ export const AvatarInputField = forwardRef<HTMLInputElement, Props>(
         <div className={styles.avatarContainer}>
           <Avatar
             size={Size.XL}
-            src={removed ? null : objUrl || avatarUrl}
+            src={removed ? undefined : objUrl || avatarUrl}
             fallback={displayName.slice(0, 1).toUpperCase()}
           />
           <input

src/input/Input.tsx

@@ -82,7 +82,7 @@ interface InputFieldProps {
   defaultValue?: string;
   placeholder?: string;
   defaultChecked?: boolean;
-  onChange?: (event: ChangeEvent) => void;
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 }
 
 export const InputField = forwardRef<
@@ -119,6 +119,8 @@ export const InputField = forwardRef<
       >
         {prefix && <span>{prefix}</span>}
         {type === "textarea" ? (
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
           <textarea
             id={id}
             ref={ref as ForwardedRef<HTMLTextAreaElement>}

src/input/SelectInput.tsx

@@ -34,7 +34,7 @@ export function SelectInput(props: Props): JSX.Element {
   const { t } = useTranslation();
   const state = useSelectState(props);
 
-  const ref = useRef();
+  const ref = useRef(null);
   const { labelProps, triggerProps, valueProps, menuProps } = useSelect(
     props,
     state,

src/livekit/MediaDevicesContext.tsx

@@ -0,0 +1,207 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import {
+  FC,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { createMediaDeviceObserver } from "@livekit/components-core";
+import { Observable } from "rxjs";
+
+import {
+  useAudioInput,
+  useAudioOutput,
+  useVideoInput,
+} from "../settings/useSetting";
+
+export interface MediaDevice {
+  available: MediaDeviceInfo[];
+  selectedId: string | undefined;
+  select: (deviceId: string) => void;
+}
+
+export interface MediaDevices {
+  audioInput: MediaDevice;
+  audioOutput: MediaDevice;
+  videoInput: MediaDevice;
+  startUsingDeviceNames: () => void;
+  stopUsingDeviceNames: () => void;
+}
+
+// Cargo-culted from @livekit/components-react
+function useObservableState<T>(
+  observable: Observable<T> | undefined,
+  startWith: T
+) {
+  const [state, setState] = useState<T>(startWith);
+  useEffect(() => {
+    // observable state doesn't run in SSR
+    if (typeof window === "undefined" || !observable) return;
+    const subscription = observable.subscribe(setState);
+    return () => subscription.unsubscribe();
+  }, [observable]);
+  return state;
+}
+
+function useMediaDevice(
+  kind: MediaDeviceKind,
+  fallbackDevice: string | undefined,
+  usingNames: boolean
+): MediaDevice {
+  // Make sure we don't needlessly reset to a device observer without names,
+  // once permissions are already given
+  const hasRequestedPermissions = useRef(false);
+  const requestPermissions = usingNames || hasRequestedPermissions.current;
+  hasRequestedPermissions.current ||= usingNames;
+
+  // We use a bare device observer here rather than one of the fancy device
+  // selection hooks from @livekit/components-react, because
+  // useMediaDeviceSelect expects a room or track, which we don't have here, and
+  // useMediaDevices provides no way to request device names.
+  // Tragically, the only way to get device names out of LiveKit is to specify a
+  // kind, which then results in multiple permissions requests.
+  const deviceObserver = useMemo(
+    () => createMediaDeviceObserver(kind, requestPermissions),
+    [kind, requestPermissions]
+  );
+  const available = useObservableState(deviceObserver, []);
+  const [selectedId, select] = useState(fallbackDevice);
+
+  return useMemo(
+    () => ({
+      available,
+      selectedId: available.some((d) => d.deviceId === selectedId)
+        ? selectedId
+        : available.some((d) => d.deviceId === fallbackDevice)
+        ? fallbackDevice
+        : available.at(0)?.deviceId,
+      select,
+    }),
+    [available, selectedId, fallbackDevice, select]
+  );
+}
+
+const deviceStub: MediaDevice = {
+  available: [],
+  selectedId: undefined,
+  select: () => {},
+};
+const devicesStub: MediaDevices = {
+  audioInput: deviceStub,
+  audioOutput: deviceStub,
+  videoInput: deviceStub,
+  startUsingDeviceNames: () => {},
+  stopUsingDeviceNames: () => {},
+};
+
+const MediaDevicesContext = createContext<MediaDevices>(devicesStub);
+
+interface Props {
+  children: JSX.Element;
+}
+
+export const MediaDevicesProvider: FC<Props> = ({ children }) => {
+  // Counts the number of callers currently using device names
+  const [numCallersUsingNames, setNumCallersUsingNames] = useState(0);
+  const usingNames = numCallersUsingNames > 0;
+
+  const [audioInputSetting, setAudioInputSetting] = useAudioInput();
+  const [audioOutputSetting, setAudioOutputSetting] = useAudioOutput();
+  const [videoInputSetting, setVideoInputSetting] = useVideoInput();
+
+  const audioInput = useMediaDevice(
+    "audioinput",
+    audioInputSetting,
+    usingNames
+  );
+  const audioOutput = useMediaDevice(
+    "audiooutput",
+    audioOutputSetting,
+    usingNames
+  );
+  const videoInput = useMediaDevice(
+    "videoinput",
+    videoInputSetting,
+    usingNames
+  );
+
+  useEffect(() => {
+    if (audioInput.selectedId !== undefined)
+      setAudioInputSetting(audioInput.selectedId);
+  }, [setAudioInputSetting, audioInput.selectedId]);
+
+  useEffect(() => {
+    if (audioOutput.selectedId !== undefined)
+      setAudioOutputSetting(audioOutput.selectedId);
+  }, [setAudioOutputSetting, audioOutput.selectedId]);
+
+  useEffect(() => {
+    if (videoInput.selectedId !== undefined)
+      setVideoInputSetting(videoInput.selectedId);
+  }, [setVideoInputSetting, videoInput.selectedId]);
+
+  const startUsingDeviceNames = useCallback(
+    () => setNumCallersUsingNames((n) => n + 1),
+    [setNumCallersUsingNames]
+  );
+  const stopUsingDeviceNames = useCallback(
+    () => setNumCallersUsingNames((n) => n - 1),
+    [setNumCallersUsingNames]
+  );
+
+  const context: MediaDevices = useMemo(
+    () => ({
+      audioInput,
+      audioOutput,
+      videoInput,
+      startUsingDeviceNames,
+      stopUsingDeviceNames,
+    }),
+    [
+      audioInput,
+      audioOutput,
+      videoInput,
+      startUsingDeviceNames,
+      stopUsingDeviceNames,
+    ]
+  );
+
+  return (
+    <MediaDevicesContext.Provider value={context}>
+      {children}
+    </MediaDevicesContext.Provider>
+  );
+};
+
+export const useMediaDevices = () => useContext(MediaDevicesContext);
+
+/**
+ * React hook that requests for the media devices context to be populated with
+ * real device names while this component is mounted. This is not done by
+ * default because it may involve requesting additional permissions from the
+ * user.
+ */
+export const useMediaDeviceNames = (context: MediaDevices) =>
+  useEffect(() => {
+    context.startUsingDeviceNames();
+    return context.stopUsingDeviceNames;
+  }, [context]);

src/livekit/OpenIDLoader.tsx

@@ -22,6 +22,7 @@ import {
   useState,
 } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
+import { GroupCall } from "matrix-js-sdk";
 
 import {
   OpenIDClientParts,
@@ -32,21 +33,16 @@ import { ErrorView, LoadingView } from "../FullScreenView";
 
 interface Props {
   client: OpenIDClientParts;
-  livekitServiceURL: string;
+  groupCall: GroupCall;
   roomName: string;
   children: ReactNode;
 }
 
-const SFUConfigContext = createContext<SFUConfig>(undefined);
+const SFUConfigContext = createContext<SFUConfig | undefined>(undefined);
 
 export const useSFUConfig = () => useContext(SFUConfigContext);
 
-export function OpenIDLoader({
+export function OpenIDLoader({ client, groupCall, roomName, children }: Props) {
-  client,
-  livekitServiceURL,
-  roomName,
-  children,
-}: Props) {
   const [state, setState] = useState<
     SFUConfigLoading | SFUConfigLoaded | SFUConfigFailed
   >({ kind: "loading" });
@@ -56,16 +52,16 @@ export function OpenIDLoader({
       try {
         const result = await getSFUConfigWithOpenID(
           client,
-          livekitServiceURL,
+          groupCall,
           roomName
         );
         setState({ kind: "loaded", sfuConfig: result });
       } catch (e) {
         logger.error("Failed to fetch SFU config: ", e);
-        setState({ kind: "failed", error: e });
+        setState({ kind: "failed", error: e as Error });
       }
     })();
-  }, [client, livekitServiceURL, roomName]);
+  }, [client, groupCall, roomName]);
 
   switch (state.kind) {
     case "loading":

src/livekit/openIDSFU.ts

@@ -14,9 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { MatrixClient } from "matrix-js-sdk";
+import { GroupCall, IOpenIDToken, MatrixClient } from "matrix-js-sdk";
 import { logger } from "matrix-js-sdk/src/logger";
 
+import { Config } from "../config/Config";
+
 export interface SFUConfig {
   url: string;
   jwt: string;
@@ -30,12 +32,74 @@ export type OpenIDClientParts = Pick<
 
 export async function getSFUConfigWithOpenID(
   client: OpenIDClientParts,
-  livekitServiceURL: string,
+  groupCall: GroupCall,
   roomName: string
 ): Promise<SFUConfig> {
   const openIdToken = await client.getOpenIdToken();
   logger.debug("Got openID token", openIdToken);
 
+  // if the call has a livekit service URL, try it.
+  if (groupCall.livekitServiceURL) {
+    try {
+      logger.info(
+        `Trying to get JWT from call's configured URL of ${groupCall.livekitServiceURL}...`
+      );
+      const sfuConfig = await getLiveKitJWT(
+        client,
+        groupCall.livekitServiceURL,
+        roomName,
+        openIdToken
+      );
+      logger.info(`Got JWT from call state event URL.`);
+
+      return sfuConfig;
+    } catch (e) {
+      logger.warn(
+        `Failed to get JWT from group call's configured URL of ${groupCall.livekitServiceURL}.`,
+        e
+      );
+    }
+  }
+
+  // otherwise, try our configured one and, if it works, update the call's service URL in the state event
+  // NB. This wuill update it for everyone so we may end up with multiple clients updating this when they
+  // join at similar times, but we don't have a huge number of options here.
+  const urlFromConf = Config.get().livekit!.livekit_service_url;
+  logger.info(`Trying livekit service URL from our config: ${urlFromConf}...`);
+  try {
+    const sfuConfig = await getLiveKitJWT(
+      client,
+      urlFromConf,
+      roomName,
+      openIdToken
+    );
+
+    logger.info(
+      `Got JWT, updating call livekit service URL with: ${urlFromConf}...`
+    );
+    try {
+      await groupCall.updateLivekitServiceURL(urlFromConf);
+      logger.info(`Call livekit service URL updated.`);
+    } catch (e) {
+      logger.warn(
+        `Failed to update call livekit service URL: continuing anyway.`
+      );
+    }
+
+    return sfuConfig;
+  } catch (e) {
+    logger.error("Failed to get JWT from URL defined in Config.", e);
+    throw e;
+  }
+}
+
+async function getLiveKitJWT(
+  client: OpenIDClientParts,
+  livekitServiceURL: string,
+  roomName: string,
+  openIDToken: IOpenIDToken
+): Promise<SFUConfig> {
+  try {
     const res = await fetch(livekitServiceURL + "/sfu/get", {
       method: "POST",
       headers: {
@@ -43,12 +107,15 @@ export async function getSFUConfigWithOpenID(
       },
       body: JSON.stringify({
         room: roomName,
-      openid_token: openIdToken,
+        openid_token: openIDToken,
         device_id: client.getDeviceId(),
       }),
     });
     if (!res.ok) {
-    throw new Error("SFO Config fetch failed with status code " + res.status);
+      throw new Error("SFU Config fetch failed with status code " + res.status);
     }
     return await res.json();
+  } catch (e) {
+    throw new Error("SFU Config fetch failed with exception " + e);
+  }
 }

src/livekit/options.ts

@@ -14,12 +14,12 @@ const defaultLiveKitPublishOptions: TrackPublishDefaults = {
   red: true,
   forceStereo: false,
   simulcast: true,
-  videoSimulcastLayers: [VideoPresets.h180, VideoPresets.h216] as VideoPreset[],
+  videoSimulcastLayers: [VideoPresets.h180, VideoPresets.h360] as VideoPreset[],
   screenShareEncoding: ScreenSharePresets.h1080fps30.encoding,
   stopMicTrackOnMute: false,
   videoCodec: "vp8",
-  videoEncoding: VideoPresets.h360.encoding,
+  videoEncoding: VideoPresets.h720.encoding,
-  backupCodec: { codec: "vp8", encoding: VideoPresets.h360.encoding },
+  backupCodec: { codec: "vp8", encoding: VideoPresets.h720.encoding },
 } as const;
 
 export const defaultLiveKitOptions: RoomOptions = {
@@ -31,7 +31,7 @@ export const defaultLiveKitOptions: RoomOptions = {
 
   // capture settings
   videoCaptureDefaults: {
-    resolution: VideoPresets.h360.resolution,
+    resolution: VideoPresets.h720.resolution,
   },
 
   // publish settings

src/livekit/useLiveKit.ts

@@ -1,44 +1,153 @@
-import { Room, RoomOptions } from "livekit-client";
+/*
-import { useLiveKitRoom } from "@livekit/components-react";
+Copyright 2023 New Vector Ltd
-import { useMemo } from "react";
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import {
+  ConnectionState,
+  E2EEOptions,
+  ExternalE2EEKeyProvider,
+  Room,
+  RoomOptions,
+  setLogLevel,
+} from "livekit-client";
+import { useConnectionState, useLiveKitRoom } from "@livekit/components-react";
+import { useEffect, useMemo, useRef } from "react";
+import E2EEWorker from "livekit-client/e2ee-worker?worker";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import { defaultLiveKitOptions } from "./options";
 import { SFUConfig } from "./openIDSFU";
+import { MuteStates } from "../room/MuteStates";
+import {
+  MediaDevice,
+  MediaDevices,
+  useMediaDevices,
+} from "./MediaDevicesContext";
 
-export type UserChoices = {
+export type E2EEConfig = {
-  audio?: DeviceChoices;
+  sharedKey: string;
-  video?: DeviceChoices;
 };
 
-export type DeviceChoices = {
+setLogLevel("debug");
-  selectedId: string;
-  enabled: boolean;
-};
 
 export function useLiveKit(
-  userChoices: UserChoices,
+  muteStates: MuteStates,
-  sfuConfig: SFUConfig
+  sfuConfig?: SFUConfig,
+  e2eeConfig?: E2EEConfig
 ): Room | undefined {
-  const roomOptions = useMemo((): RoomOptions => {
+  const e2eeOptions = useMemo(() => {
-    const options = defaultLiveKitOptions;
+    if (!e2eeConfig?.sharedKey) return undefined;
-    options.videoCaptureDefaults = {
-      ...options.videoCaptureDefaults,
-      deviceId: userChoices.video?.selectedId,
-    };
-    options.audioCaptureDefaults = {
-      ...options.audioCaptureDefaults,
-      deviceId: userChoices.audio?.selectedId,
-    };
-    return options;
-  }, [userChoices.video, userChoices.audio]);
 
+    return {
+      keyProvider: new ExternalE2EEKeyProvider(),
+      worker: new E2EEWorker(),
+    } as E2EEOptions;
+  }, [e2eeConfig]);
+
+  useEffect(() => {
+    if (!e2eeConfig?.sharedKey || !e2eeOptions) return;
+
+    (e2eeOptions.keyProvider as ExternalE2EEKeyProvider).setKey(
+      e2eeConfig?.sharedKey
+    );
+  }, [e2eeOptions, e2eeConfig?.sharedKey]);
+
+  const initialMuteStates = useRef<MuteStates>(muteStates);
+  const devices = useMediaDevices();
+  const initialDevices = useRef<MediaDevices>(devices);
+
+  const roomOptions = useMemo(
+    (): RoomOptions => ({
+      ...defaultLiveKitOptions,
+      videoCaptureDefaults: {
+        ...defaultLiveKitOptions.videoCaptureDefaults,
+        deviceId: initialDevices.current.videoInput.selectedId,
+      },
+      audioCaptureDefaults: {
+        ...defaultLiveKitOptions.audioCaptureDefaults,
+        deviceId: initialDevices.current.audioInput.selectedId,
+      },
+      // XXX Setting the audio output here doesn't seem to do anything… a bug in
+      // LiveKit?
+      audioOutput: {
+        deviceId: initialDevices.current.audioOutput.selectedId,
+      },
+      e2ee: e2eeOptions,
+    }),
+    [e2eeOptions]
+  );
+
+  // We have to create the room manually here due to a bug inside
+  // @livekit/components-react. JSON.stringify() is used in deps of a
+  // useEffect() with an argument that references itself, if E2EE is enabled
+  const roomWithoutProps = useMemo(() => new Room(roomOptions), [roomOptions]);
   const { room } = useLiveKitRoom({
-    token: sfuConfig.jwt,
+    token: sfuConfig?.jwt,
-    serverUrl: sfuConfig.url,
+    serverUrl: sfuConfig?.url,
-    audio: userChoices.audio?.enabled ?? false,
+    audio: initialMuteStates.current.audio.enabled,
-    video: userChoices.video?.enabled ?? false,
+    video: initialMuteStates.current.video.enabled,
-    options: roomOptions,
+    room: roomWithoutProps,
   });
 
+  const connectionState = useConnectionState(roomWithoutProps);
+
+  useEffect(() => {
+    // Sync the requested mute states with LiveKit's mute states. We do it this
+    // way around rather than using LiveKit as the source of truth, so that the
+    // states can be consistent throughout the lobby and loading screens.
+    // It's important that we only do this in the connected state, because
+    // LiveKit's internal mute states aren't consistent during connection setup,
+    // and setting tracks to be enabled during this time causes errors.
+    if (room !== undefined && connectionState === ConnectionState.Connected) {
+      const participant = room.localParticipant;
+      if (participant.isMicrophoneEnabled !== muteStates.audio.enabled) {
+        participant
+          .setMicrophoneEnabled(muteStates.audio.enabled)
+          .catch((e) =>
+            logger.error("Failed to sync audio mute state with LiveKit", e)
+          );
+      }
+      if (participant.isCameraEnabled !== muteStates.video.enabled) {
+        participant
+          .setCameraEnabled(muteStates.video.enabled)
+          .catch((e) =>
+            logger.error("Failed to sync video mute state with LiveKit", e)
+          );
+      }
+    }
+  }, [room, muteStates, connectionState]);
+
+  useEffect(() => {
+    // Sync the requested devices with LiveKit's devices
+    if (room !== undefined && connectionState === ConnectionState.Connected) {
+      const syncDevice = (kind: MediaDeviceKind, device: MediaDevice) => {
+        const id = device.selectedId;
+        if (id !== undefined && room.getActiveDevice(kind) !== id) {
+          room
+            .switchActiveDevice(kind, id)
+            .catch((e) =>
+              logger.error(`Failed to sync ${kind} device with LiveKit`, e)
+            );
+        }
+      };
+
+      syncDevice("audioinput", devices.audioInput);
+      syncDevice("audiooutput", devices.audioOutput);
+      syncDevice("videoinput", devices.videoInput);
+    }
+  }, [room, devices, connectionState]);
+
   return room;
 }

src/livekit/useMediaDevicesSwitcher.ts

@@ -1,101 +0,0 @@
-import { useMediaDeviceSelect } from "@livekit/components-react";
-import { LocalAudioTrack, LocalVideoTrack, Room } from "livekit-client";
-import { useEffect } from "react";
-
-import { useDefaultDevices } from "../settings/useSetting";
-
-export type MediaDevices = {
-  available: MediaDeviceInfo[];
-  selectedId: string;
-  setSelected: (deviceId: string) => Promise<void>;
-};
-
-export type MediaDevicesState = {
-  audioIn: MediaDevices;
-  audioOut: MediaDevices;
-  videoIn: MediaDevices;
-};
-
-// if a room is passed this only affects the device selection inside a call. Without room it changes what we see in the lobby
-export function useMediaDevicesSwitcher(
-  room?: Room,
-  tracks?: { videoTrack?: LocalVideoTrack; audioTrack?: LocalAudioTrack },
-  requestPermissions = true
-): MediaDevicesState {
-  const {
-    devices: videoDevices,
-    activeDeviceId: activeVideoDevice,
-    setActiveMediaDevice: setActiveVideoDevice,
-  } = useMediaDeviceSelect({
-    kind: "videoinput",
-    room,
-    track: tracks?.videoTrack,
-    requestPermissions,
-  });
-
-  const {
-    devices: audioDevices,
-    activeDeviceId: activeAudioDevice,
-    setActiveMediaDevice: setActiveAudioDevice,
-  } = useMediaDeviceSelect({
-    kind: "audioinput",
-    room,
-    track: tracks?.audioTrack,
-    requestPermissions,
-  });
-
-  const {
-    devices: audioOutputDevices,
-    activeDeviceId: activeAudioOutputDevice,
-    setActiveMediaDevice: setActiveAudioOutputDevice,
-  } = useMediaDeviceSelect({
-    kind: "audiooutput",
-    room,
-  });
-
-  const [settingsDefaultDevices, setSettingsDefaultDevices] =
-    useDefaultDevices();
-
-  useEffect(() => {
-    setSettingsDefaultDevices({
-      audioinput:
-        activeAudioDevice != ""
-          ? activeAudioDevice
-          : settingsDefaultDevices.audioinput,
-      videoinput:
-        activeVideoDevice != ""
-          ? activeVideoDevice
-          : settingsDefaultDevices.videoinput,
-      audiooutput:
-        activeAudioOutputDevice != ""
-          ? activeAudioOutputDevice
-          : settingsDefaultDevices.audiooutput,
-    });
-  }, [
-    activeAudioDevice,
-    activeAudioOutputDevice,
-    activeVideoDevice,
-    setSettingsDefaultDevices,
-    settingsDefaultDevices.audioinput,
-    settingsDefaultDevices.audiooutput,
-    settingsDefaultDevices.videoinput,
-  ]);
-
-  return {
-    audioIn: {
-      available: audioDevices,
-      selectedId: activeAudioDevice,
-      setSelected: setActiveAudioDevice,
-    },
-    audioOut: {
-      available: audioOutputDevices,
-      selectedId: activeAudioOutputDevice,
-      setSelected: setActiveAudioOutputDevice,
-    },
-    videoIn: {
-      available: videoDevices,
-      selectedId: activeVideoDevice,
-      setSelected: setActiveVideoDevice,
-    },
-  };
-}

src/matrix-utils.ts

@@ -19,8 +19,7 @@ import { MemoryStore } from "matrix-js-sdk/src/store/memory";
 import { IndexedDBCryptoStore } from "matrix-js-sdk/src/crypto/store/indexeddb-crypto-store";
 import { LocalStorageCryptoStore } from "matrix-js-sdk/src/crypto/store/localStorage-crypto-store";
 import { MemoryCryptoStore } from "matrix-js-sdk/src/crypto/store/memory-crypto-store";
-import { createClient } from "matrix-js-sdk/src/matrix";
+import { createClient, ICreateClientOpts } from "matrix-js-sdk/src/matrix";
-import { ICreateClientOpts } from "matrix-js-sdk/src/matrix";
 import { ClientEvent } from "matrix-js-sdk/src/client";
 import { Visibility, Preset } from "matrix-js-sdk/src/@types/partials";
 import { ISyncStateData, SyncState } from "matrix-js-sdk/src/sync";
@@ -57,15 +56,15 @@ function waitForSync(client: MatrixClient) {
   return new Promise<void>((resolve, reject) => {
     const onSync = (
       state: SyncState,
-      _old: SyncState,
+      _old: SyncState | null,
-      data: ISyncStateData
+      data?: ISyncStateData
     ) => {
       if (state === "PREPARED") {
+        client.removeListener(ClientEvent.Sync, onSync);
         resolve();
-        client.removeListener(ClientEvent.Sync, onSync);
       } else if (state === "ERROR") {
-        reject(data?.error);
         client.removeListener(ClientEvent.Sync, onSync);
+        reject(data?.error);
       }
     };
     client.on(ClientEvent.Sync, onSync);
@@ -87,7 +86,7 @@ export async function initClient(
 ): Promise<MatrixClient> {
   await loadOlm();
 
-  let indexedDB: IDBFactory;
+  let indexedDB: IDBFactory | undefined;
   try {
     indexedDB = window.indexedDB;
   } catch (e) {}
@@ -247,7 +246,7 @@ export function sanitiseRoomNameInput(input: string): string {
  */
 export function roomNameFromRoomId(roomId: string): string {
   return roomId
-    .match(/([^:]+):.*$/)[1]
+    .match(/([^:]+):.*$/)![1]
     .substring(1)
     .split("-")
     .map((part) =>
@@ -262,7 +261,7 @@ export function isLocalRoomId(roomId: string, client: MatrixClient): boolean {
     return false;
   }
 
-  const parts = roomId.match(/[^:]+:(.*)$/);
+  const parts = roomId.match(/[^:]+:(.*)$/)!;
 
   if (parts.length < 2) {
     return false;
@@ -302,7 +301,7 @@ export async function createRoom(
         "org.matrix.msc3401.call.member": 0,
       },
       users: {
-        [client.getUserId()]: 100,
+        [client.getUserId()!]: 100,
       },
     },
   });
@@ -346,15 +345,11 @@ export async function createRoom(
 // Returns a URL to that will load Element Call with the given room
 export function getRoomUrl(roomIdOrAlias: string): string {
   if (roomIdOrAlias.startsWith("#")) {
-    const [localPart, host] = roomIdOrAlias.replace("#", "").split(":");
+    return `${window.location.protocol}//${window.location.host}/${
-
+      roomIdOrAlias.substring(1).split(":")[0]
-    if (host !== Config.defaultServerName()) {
+    }`;
-      return `${window.location.protocol}//${window.location.host}/room/${roomIdOrAlias}`;
   } else {
-      return `${window.location.protocol}//${window.location.host}/${localPart}`;
+    return `${window.location.protocol}//${window.location.host}/room?roomId=${roomIdOrAlias}`;
-    }
-  } else {
-    return `${window.location.protocol}//${window.location.host}/room/#?roomId=${roomIdOrAlias}`;
   }
 }
 

src/otel/OTelCall.ts

@@ -61,46 +61,46 @@ export class OTelCall {
   }
 
   public dispose() {
-    this.call.peerConn.removeEventListener(
+    this.call.peerConn?.removeEventListener(
       "connectionstatechange",
       this.onCallConnectionStateChanged
     );
-    this.call.peerConn.removeEventListener(
+    this.call.peerConn?.removeEventListener(
       "signalingstatechange",
       this.onCallSignalingStateChanged
     );
-    this.call.peerConn.removeEventListener(
+    this.call.peerConn?.removeEventListener(
       "iceconnectionstatechange",
       this.onIceConnectionStateChanged
     );
-    this.call.peerConn.removeEventListener(
+    this.call.peerConn?.removeEventListener(
       "icegatheringstatechange",
       this.onIceGatheringStateChanged
     );
-    this.call.peerConn.removeEventListener(
+    this.call.peerConn?.removeEventListener(
       "icecandidateerror",
       this.onIceCandidateError
     );
   }
 
   private addCallPeerConnListeners = (): void => {
-    this.call.peerConn.addEventListener(
+    this.call.peerConn?.addEventListener(
       "connectionstatechange",
       this.onCallConnectionStateChanged
     );
-    this.call.peerConn.addEventListener(
+    this.call.peerConn?.addEventListener(
       "signalingstatechange",
       this.onCallSignalingStateChanged
     );
-    this.call.peerConn.addEventListener(
+    this.call.peerConn?.addEventListener(
       "iceconnectionstatechange",
       this.onIceConnectionStateChanged
     );
-    this.call.peerConn.addEventListener(
+    this.call.peerConn?.addEventListener(
       "icegatheringstatechange",
       this.onIceGatheringStateChanged
     );
-    this.call.peerConn.addEventListener(
+    this.call.peerConn?.addEventListener(
       "icecandidateerror",
       this.onIceCandidateError
     );
@@ -108,25 +108,25 @@ export class OTelCall {
 
   public onCallConnectionStateChanged = (): void => {
     this.span.addEvent("matrix.call.callConnectionStateChange", {
-      callConnectionState: this.call.peerConn.connectionState,
+      callConnectionState: this.call.peerConn?.connectionState,
     });
   };
 
   public onCallSignalingStateChanged = (): void => {
     this.span.addEvent("matrix.call.callSignalingStateChange", {
-      callSignalingState: this.call.peerConn.signalingState,
+      callSignalingState: this.call.peerConn?.signalingState,
     });
   };
 
   public onIceConnectionStateChanged = (): void => {
     this.span.addEvent("matrix.call.iceConnectionStateChange", {
-      iceConnectionState: this.call.peerConn.iceConnectionState,
+      iceConnectionState: this.call.peerConn?.iceConnectionState,
     });
   };
 
   public onIceGatheringStateChanged = (): void => {
     this.span.addEvent("matrix.call.iceGatheringStateChange", {
-      iceGatheringState: this.call.peerConn.iceGatheringState,
+      iceGatheringState: this.call.peerConn?.iceGatheringState,
     });
   };
 

src/otel/OTelGroupCallMembership.ts

@@ -172,7 +172,7 @@ export class OTelGroupCallMembership {
       if (
         !userCalls ||
         !userCalls.has(callTrackingInfo.deviceId) ||
-        userCalls.get(callTrackingInfo.deviceId).callId !==
+        userCalls.get(callTrackingInfo.deviceId)?.callId !==
           callTrackingInfo.call.callId
       ) {
         callTrackingInfo.end();
@@ -420,7 +420,7 @@ export class OTelGroupCallMembership {
       ctx
     );
 
-    span.setAttribute("matrix.callId", callId);
+    span.setAttribute("matrix.callId", callId ?? "unknown");
     span.setAttribute(
       "matrix.opponentMemberId",
       report.opponentMemberId ? report.opponentMemberId : "unknown"

src/otel/otel.ts

@@ -23,7 +23,6 @@ import { SemanticResourceAttributes } from "@opentelemetry/semantic-conventions"
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { PosthogSpanProcessor } from "../analytics/PosthogSpanProcessor";
-import { Anonymity } from "../analytics/PosthogAnalytics";
 import { Config } from "../config/Config";
 import { RageshakeSpanProcessor } from "../analytics/RageshakeSpanProcessor";
 
@@ -34,8 +33,7 @@ let sharedInstance: ElementCallOpenTelemetry;
 export class ElementCallOpenTelemetry {
   private _provider: WebTracerProvider;
   private _tracer: Tracer;
-  private _anonymity: Anonymity;
+  private otlpExporter?: OTLPTraceExporter;
-  private otlpExporter: OTLPTraceExporter;
   public readonly rageshakeProcessor?: RageshakeSpanProcessor;
 
   static globalInit(): void {
@@ -100,7 +98,7 @@ export class ElementCallOpenTelemetry {
   }
 
   public dispose(): void {
-    opentelemetry.trace.setGlobalTracerProvider(null);
+    opentelemetry.trace.disable();
     this._provider?.shutdown();
   }
 
@@ -115,8 +113,4 @@ export class ElementCallOpenTelemetry {
   public get provider(): WebTracerProvider {
     return this._provider;
   }
-
-  public get anonymity(): Anonymity {
-    return this._anonymity;
-  }
 }

src/popover/PopoverMenu.tsx

@@ -46,7 +46,7 @@ export const PopoverMenuTrigger = forwardRef<
     buttonRef
   );
 
-  const popoverRef = useRef();
+  const popoverRef = useRef(null);
 
   const { overlayProps } = useOverlayPosition({
     targetRef: buttonRef,

src/profile/useProfile.ts

@@ -21,10 +21,10 @@ import { FileType } from "matrix-js-sdk/src/http-api";
 import { useState, useCallback, useEffect } from "react";
 
 interface ProfileLoadState {
-  success?: boolean;
+  success: boolean;
-  loading?: boolean;
+  loading: boolean;
-  displayName: string;
+  displayName?: string;
-  avatarUrl: string;
+  avatarUrl?: string;
   error?: Error;
 }
 
@@ -38,23 +38,26 @@ type ProfileSaveCallback = ({
   removeAvatar: boolean;
 }) => Promise<void>;
 
-export function useProfile(client: MatrixClient) {
+export function useProfile(client: MatrixClient | undefined) {
-  const [{ loading, displayName, avatarUrl, error, success }, setState] =
+  const [{ success, loading, displayName, avatarUrl, error }, setState] =
     useState<ProfileLoadState>(() => {
-      const user = client?.getUser(client.getUserId());
+      let user: User | undefined = undefined;
+      if (client) {
+        user = client.getUser(client.getUserId()!) ?? undefined;
+      }
 
       return {
         success: false,
         loading: false,
         displayName: user?.rawDisplayName,
         avatarUrl: user?.avatarUrl,
-        error: null,
+        error: undefined,
       };
     });
 
   useEffect(() => {
     const onChangeUser = (
-      _event: MatrixEvent,
+      _event: MatrixEvent | undefined,
       { displayName, avatarUrl }: User
     ) => {
       setState({
@@ -62,17 +65,16 @@ export function useProfile(client: MatrixClient) {
         loading: false,
         displayName,
         avatarUrl,
-        error: null,
+        error: undefined,
       });
     };
 
-    let user: User;
+    let user: User | null;
-
     if (client) {
-      const userId = client.getUserId();
+      const userId = client.getUserId()!;
       user = client.getUser(userId);
-      user.on(UserEvent.DisplayName, onChangeUser);
+      user?.on(UserEvent.DisplayName, onChangeUser);
-      user.on(UserEvent.AvatarUrl, onChangeUser);
+      user?.on(UserEvent.AvatarUrl, onChangeUser);
     }
 
     return () => {
@@ -89,7 +91,7 @@ export function useProfile(client: MatrixClient) {
         setState((prev) => ({
           ...prev,
           loading: true,
-          error: null,
+          error: undefined,
           success: false,
         }));
 
@@ -110,7 +112,9 @@ export function useProfile(client: MatrixClient) {
           setState((prev) => ({
             ...prev,
             displayName,
-            avatarUrl: removeAvatar ? null : mxcAvatarUrl ?? prev.avatarUrl,
+            avatarUrl: removeAvatar
+              ? undefined
+              : mxcAvatarUrl ?? prev.avatarUrl,
             loading: false,
             success: true,
           }));

src/room/CallEndedView.module.css

@@ -31,6 +31,15 @@ limitations under the License.
   margin-bottom: 32px;
 }
 
+.disconnectedButtons {
+  display: grid;
+  gap: 50px;
+}
+
+.rageshakeButton {
+  grid-column: 2;
+}
+
 .callEndedButton {
   margin-top: 54px;
   margin-left: 30px;

src/room/CallEndedView.tsx

@@ -28,15 +28,20 @@ import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
 import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { FieldRow, InputField } from "../input/Input";
 import { StarRatingInput } from "../input/StarRatingInput";
+import { RageshakeButton } from "../settings/RageshakeButton";
 
 export function CallEndedView({
   client,
   isPasswordlessUser,
   endedCallId,
+  leaveError,
+  reconnect,
 }: {
   client: MatrixClient;
   isPasswordlessUser: boolean;
   endedCallId: string;
+  leaveError?: Error;
+  reconnect: () => void;
 }) {
   const { t } = useTranslation();
   const history = useHistory();
@@ -76,6 +81,7 @@ export function CallEndedView({
     },
     [endedCallId, history, isPasswordlessUser, starRating]
   );
+
   const createAccountDialog = isPasswordlessUser && (
     <div className={styles.callEndedContent}>
       <Trans>
@@ -138,15 +144,33 @@ export function CallEndedView({
     </div>
   );
 
+  const renderBody = () => {
+    if (leaveError) {
+      return (
+        <>
+          <main className={styles.main}>
+            <Headline className={styles.headline}>
+              <Trans>You were disconnected from the call</Trans>
+            </Headline>
+            <div className={styles.disconnectedButtons}>
+              <Button size="lg" variant="default" onClick={reconnect}>
+                {t("Reconnect")}
+              </Button>
+              <div className={styles.rageshakeButton}>
+                <RageshakeButton description="***Call disconnected***" />
+              </div>
+            </div>
+          </main>
+          <Body className={styles.footer}>
+            <Link color="primary" to="/">
+              {t("Return to home screen")}
+            </Link>
+          </Body>
+        </>
+      );
+    } else {
       return (
         <>
-      <Header>
-        <LeftNav>
-          <HeaderLogo />
-        </LeftNav>
-        <RightNav />
-      </Header>
-      <div className={styles.container}>
           <main className={styles.main}>
             <Headline className={styles.headline}>
               {surveySubmitted
@@ -168,7 +192,20 @@ export function CallEndedView({
               {t("Not now, return to home screen")}
             </Link>
           </Body>
-      </div>
+        </>
+      );
+    }
+  };
+
+  return (
+    <>
+      <Header>
+        <LeftNav>
+          <HeaderLogo />
+        </LeftNav>
+        <RightNav />
+      </Header>
+      <div className={styles.container}>{renderBody()}</div>
     </>
   );
 }

src/room/GridLayoutMenu.tsx

@@ -38,6 +38,15 @@ export function GridLayoutMenu({ layout, setLayout }: Props) {
   const { t } = useTranslation();
   const tooltip = useCallback(() => t("Change layout"), [t]);
 
+  const onAction = useCallback(
+    (key: React.Key) => {
+      setLayout(key.toString() as Layout);
+    },
+    [setLayout]
+  );
+
+  const onClose = useCallback(() => {}, []);
+
   return (
     <PopoverMenuTrigger placement="bottom right">
       <TooltipTrigger tooltip={tooltip}>
@@ -46,7 +55,12 @@ export function GridLayoutMenu({ layout, setLayout }: Props) {
         </Button>
       </TooltipTrigger>
       {(props: JSX.IntrinsicAttributes) => (
-        <Menu {...props} label={t("Grid layout menu")} onAction={setLayout}>
+        <Menu
+          {...props}
+          label={t("Grid layout menu")}
+          onAction={onAction}
+          onClose={onClose}
+        >
           <Item key="freedom" textValue={t("Freedom")}>
             <FreedomIcon />
             <span>Freedom</span>

src/room/GroupCallInspector.tsx

@@ -1,3 +1,6 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
 /*
 Copyright 2022 New Vector Ltd
 
@@ -70,7 +73,7 @@ const defaultCollapsedFields = [
 ];
 
 function shouldCollapse({ name }: CollapsedFieldProps) {
-  return defaultCollapsedFields.includes(name);
+  return name ? defaultCollapsedFields.includes(name) : false;
 }
 
 function getUserName(userId: string) {
@@ -196,7 +199,7 @@ export function SequenceDiagramViewer({
   onSelectUserId,
   events,
 }: SequenceDiagramViewerProps) {
-  const mermaidElRef = useRef<HTMLDivElement>();
+  const mermaidElRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     mermaid.initialize({
@@ -217,6 +220,7 @@ export function SequenceDiagramViewer({
     `;
 
     mermaid.mermaidAPI.render("mermaid", graphDefinition, (svgCode: string) => {
+      if (!mermaidElRef.current) return;
       mermaidElRef.current.innerHTML = svgCode;
     });
   }, [events, localUserId, selectedUserId]);
@@ -228,7 +232,7 @@ export function SequenceDiagramViewer({
           className={styles.selectInput}
           label="Remote User"
           selectedKey={selectedUserId}
-          onSelectionChange={onSelectUserId}
+          onSelectionChange={(key) => onSelectUserId(key.toString())}
         >
           {remoteUserIds.map((userId) => (
             <Item key={userId}>{userId}</Item>
@@ -498,7 +502,7 @@ export function GroupCallInspector({
   return (
     <Resizable
       enable={{ top: true }}
-      defaultSize={{ height: 200, width: undefined }}
+      defaultSize={{ height: 200, width: 0 }}
       className={styles.inspector}
     >
       <div className={styles.toolbar}>
@@ -507,7 +511,11 @@ export function GroupCallInspector({
         </button>
         <button onClick={() => setCurrentTab("inspector")}>Inspector</button>
       </div>
-      {currentTab === "sequence-diagrams" && (
+      {currentTab === "sequence-diagrams" &&
+        state.localUserId &&
+        selectedUserId &&
+        state.eventsByUserId &&
+        state.remoteUserIds && (
           <SequenceDiagramViewer
             localUserId={state.localUserId}
             selectedUserId={selectedUserId}

src/room/GroupCallLoader.tsx

@@ -21,7 +21,6 @@ import { useTranslation } from "react-i18next";
 
 import { useLoadGroupCall } from "./useLoadGroupCall";
 import { ErrorView, FullScreenView } from "../FullScreenView";
-import { usePageTitle } from "../usePageTitle";
 
 interface Props {
   client: MatrixClient;
@@ -39,26 +38,23 @@ export function GroupCallLoader({
   createPtt,
 }: Props): JSX.Element {
   const { t } = useTranslation();
-  const { loading, error, groupCall } = useLoadGroupCall(
+  const groupCallState = useLoadGroupCall(
     client,
     roomIdOrAlias,
     viaServers,
     createPtt
   );
 
-  usePageTitle(groupCall ? groupCall.room.name : t("Loading…"));
+  switch (groupCallState.kind) {
-
+    case "loading":
-  if (loading) {
       return (
         <FullScreenView>
           <h1>{t("Loading…")}</h1>
         </FullScreenView>
       );
+    case "loaded":
+      return <>{children(groupCallState.groupCall)}</>;
+    case "failed":
+      return <ErrorView error={groupCallState.error} />;
   }
-
-  if (error) {
-    return <ErrorView error={error} />;
-  }
-
-  return <>{children(groupCall)}</>;
 }

src/room/GroupCallView.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useHistory } from "react-router-dom";
 import { GroupCall, GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
 import { MatrixClient } from "matrix-js-sdk/src/client";
@@ -32,11 +32,13 @@ import { CallEndedView } from "./CallEndedView";
 import { useSentryGroupCallHandler } from "./useSentryGroupCallHandler";
 import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { useProfile } from "../profile/useProfile";
-import { UserChoices } from "../livekit/useLiveKit";
+import { E2EEConfig } from "../livekit/useLiveKit";
 import { findDeviceByName } from "../media-utils";
 import { OpenIDLoader } from "../livekit/OpenIDLoader";
 import { ActiveCall } from "./InCallView";
 import { Config } from "../config/Config";
+import { MuteStates, useMuteStates } from "./MuteStates";
+import { useMediaDevices, MediaDevices } from "../livekit/MediaDevicesContext";
 
 declare global {
   interface Window {
@@ -50,7 +52,6 @@ interface Props {
   isEmbedded: boolean;
   preload: boolean;
   hideHeader: boolean;
-  roomIdOrAlias: string;
   groupCall: GroupCall;
 }
 
@@ -60,7 +61,6 @@ export function GroupCallView({
   isEmbedded,
   preload,
   hideHeader,
-  roomIdOrAlias,
   groupCall,
 }: Props) {
   const {
@@ -83,25 +83,40 @@ export function GroupCallView({
   }, [groupCall]);
 
   const { displayName, avatarUrl } = useProfile(client);
-
+  const matrixInfo = useMemo((): MatrixInfo => {
-  const matrixInfo: MatrixInfo = {
+    return {
-    displayName,
+      displayName: displayName!,
-    avatarUrl,
+      avatarUrl: avatarUrl!,
+      roomId: groupCall.room.roomId,
       roomName: groupCall.room.name,
-    roomIdOrAlias,
+      roomAlias: groupCall.room.getCanonicalAlias(),
     };
+  }, [displayName, avatarUrl, groupCall]);
+
+  const deviceContext = useMediaDevices();
+  const latestDevices = useRef<MediaDevices>();
+  latestDevices.current = deviceContext;
+
+  const muteStates = useMuteStates(participants.size);
+  const latestMuteStates = useRef<MuteStates>();
+  latestMuteStates.current = muteStates;
 
   useEffect(() => {
     if (widget && preload) {
       // In preload mode, wait for a join action before entering
       const onJoin = async (ev: CustomEvent<IWidgetApiRequest>) => {
-        const devices = await Room.getLocalDevices();
+        // XXX: I think this is broken currently - LiveKit *won't* request
+        // permissions and give you device names unless you specify a kind, but
+        // here we want all kinds of devices. This needs a fix in livekit-client
+        // for the following name-matching logic to do anything useful.
+        const devices = await Room.getLocalDevices(undefined, true);
 
         const { audioInput, videoInput } = ev.detail
           .data as unknown as JoinCallData;
-        const newChoices = {} as UserChoices;
 
-        if (audioInput !== null) {
+        if (audioInput === null) {
+          latestMuteStates.current!.audio.setEnabled?.(false);
+        } else {
           const deviceId = await findDeviceByName(
             audioInput,
             "audioinput",
@@ -109,15 +124,19 @@ export function GroupCallView({
           );
           if (!deviceId) {
             logger.warn("Unknown audio input: " + audioInput);
+            latestMuteStates.current!.audio.setEnabled?.(false);
           } else {
             logger.debug(
               `Found audio input ID ${deviceId} for name ${audioInput}`
             );
-            newChoices.audio = { selectedId: deviceId, enabled: true };
+            latestDevices.current!.audioInput.select(deviceId);
+            latestMuteStates.current!.audio.setEnabled?.(true);
           }
         }
 
-        if (videoInput !== null) {
+        if (videoInput === null) {
+          latestMuteStates.current!.video.setEnabled?.(false);
+        } else {
           const deviceId = await findDeviceByName(
             videoInput,
             "videoinput",
@@ -125,29 +144,30 @@ export function GroupCallView({
           );
           if (!deviceId) {
             logger.warn("Unknown video input: " + videoInput);
+            latestMuteStates.current!.video.setEnabled?.(false);
           } else {
             logger.debug(
               `Found video input ID ${deviceId} for name ${videoInput}`
             );
-            newChoices.video = { selectedId: deviceId, enabled: true };
+            latestDevices.current!.videoInput.select(deviceId);
+            latestMuteStates.current!.video.setEnabled?.(true);
           }
         }
 
-        setUserChoices(newChoices);
         await enter();
 
         PosthogAnalytics.instance.eventCallEnded.cacheStartCall(new Date());
         PosthogAnalytics.instance.eventCallStarted.track(groupCall.groupCallId);
 
         await Promise.all([
-          widget.api.setAlwaysOnScreen(true),
+          widget!.api.setAlwaysOnScreen(true),
-          widget.api.transport.reply(ev.detail, {}),
+          widget!.api.transport.reply(ev.detail, {}),
         ]);
       };
 
       widget.lazyActions.on(ElementWidgetActions.JoinCall, onJoin);
       return () => {
-        widget.lazyActions.off(ElementWidgetActions.JoinCall, onJoin);
+        widget!.lazyActions.off(ElementWidgetActions.JoinCall, onJoin);
       };
     }
   }, [groupCall, preload, enter]);
@@ -165,9 +185,12 @@ export function GroupCallView({
   useSentryGroupCallHandler(groupCall);
 
   const [left, setLeft] = useState(false);
+  const [leaveError, setLeaveError] = useState<Error | undefined>(undefined);
   const history = useHistory();
 
-  const onLeave = useCallback(async () => {
+  const onLeave = useCallback(
+    async (leaveError?: Error) => {
+      setLeaveError(leaveError);
       setLeft(true);
 
       let participantCount = 0;
@@ -200,40 +223,47 @@ export function GroupCallView({
       ) {
         history.push("/");
       }
-  }, [groupCall, leave, isPasswordlessUser, isEmbedded, history]);
+    },
+    [groupCall, leave, isPasswordlessUser, isEmbedded, history]
+  );
 
   useEffect(() => {
     if (widget && state === GroupCallState.Entered) {
       const onHangup = async (ev: CustomEvent<IWidgetApiRequest>) => {
         leave();
-        await widget.api.transport.reply(ev.detail, {});
+        await widget!.api.transport.reply(ev.detail, {});
-        widget.api.setAlwaysOnScreen(false);
+        widget!.api.setAlwaysOnScreen(false);
       };
       widget.lazyActions.once(ElementWidgetActions.HangupCall, onHangup);
       return () => {
-        widget.lazyActions.off(ElementWidgetActions.HangupCall, onHangup);
+        widget!.lazyActions.off(ElementWidgetActions.HangupCall, onHangup);
       };
     }
   }, [groupCall, state, leave]);
 
-  const [userChoices, setUserChoices] = useState<UserChoices | undefined>(
+  const [e2eeConfig, setE2EEConfig] = useState<E2EEConfig | undefined>(
     undefined
   );
 
+  const onReconnect = useCallback(() => {
+    setLeft(false);
+    setLeaveError(undefined);
+    groupCall.enter();
+  }, [groupCall]);
+
   const livekitServiceURL =
-    groupCall.foci[0]?.livekitServiceUrl ??
+    groupCall.livekitServiceURL ?? Config.get().livekit?.livekit_service_url;
-    Config.get().livekit.livekit_service_url;
   if (!livekitServiceURL) {
     return <ErrorView error={new Error("No livekit_service_url defined")} />;
   }
 
   if (error) {
     return <ErrorView error={error} />;
-  } else if (state === GroupCallState.Entered && userChoices) {
+  } else if (state === GroupCallState.Entered) {
     return (
       <OpenIDLoader
         client={client}
-        livekitServiceURL={livekitServiceURL}
+        groupCall={groupCall}
         roomName={`${groupCall.room.roomId}-${groupCall.groupCallId}`}
       >
         <ActiveCall
@@ -243,8 +273,8 @@ export function GroupCallView({
           onLeave={onLeave}
           unencryptedEventsFromUsers={unencryptedEventsFromUsers}
           hideHeader={hideHeader}
-          matrixInfo={matrixInfo}
+          muteStates={muteStates}
-          userChoices={userChoices}
+          e2eeConfig={e2eeConfig}
           otelGroupCallMembership={otelGroupCallMembership}
         />
       </OpenIDLoader>
@@ -258,13 +288,16 @@ export function GroupCallView({
     // submitting anything.
     if (
       isPasswordlessUser ||
-      (PosthogAnalytics.instance.isEnabled() && !isEmbedded)
+      (PosthogAnalytics.instance.isEnabled() && !isEmbedded) ||
+      leaveError
     ) {
       return (
         <CallEndedView
           endedCallId={groupCall.groupCallId}
           client={client}
           isPasswordlessUser={isPasswordlessUser}
+          leaveError={leaveError}
+          reconnect={onReconnect}
         />
       );
     } else {
@@ -285,8 +318,9 @@ export function GroupCallView({
     return (
       <LobbyView
         matrixInfo={matrixInfo}
-        onEnter={(choices: UserChoices) => {
+        muteStates={muteStates}
-          setUserChoices(choices);
+        onEnter={(e2eeConfig?: E2EEConfig) => {
+          setE2EEConfig(e2eeConfig);
           enter();
         }}
         isEmbedded={isEmbedded}

src/room/InCallView.tsx

@@ -24,7 +24,7 @@ import {
 } from "@livekit/components-react";
 import { usePreventScroll } from "@react-aria/overlays";
 import classNames from "classnames";
-import { Room, Track } from "livekit-client";
+import { DisconnectReason, Room, RoomEvent, Track } from "livekit-client";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
@@ -33,6 +33,8 @@ import { useTranslation } from "react-i18next";
 import useMeasure from "react-use-measure";
 import { OverlayTriggerState } from "@react-stately/overlays";
 import { JoinRule } from "matrix-js-sdk/src/@types/partials";
+import { logger } from "matrix-js-sdk/src/logger";
+import { RoomEventCallbacks } from "livekit-client/dist/src/room/Room";
 
 import type { IWidgetApiRequest } from "matrix-widget-api";
 import {
@@ -68,23 +70,24 @@ import { ElementWidgetActions, widget } from "../widget";
 import { GridLayoutMenu } from "./GridLayoutMenu";
 import { GroupCallInspector } from "./GroupCallInspector";
 import styles from "./InCallView.module.css";
-import { MatrixInfo } from "./VideoPreview";
 import { useJoinRule } from "./useJoinRule";
 import { ParticipantInfo } from "./useGroupCall";
-import { ItemData, TileContent } from "../video-grid/VideoTile";
+import { ItemData, TileContent, VideoTile } from "../video-grid/VideoTile";
 import { NewVideoGrid } from "../video-grid/NewVideoGrid";
 import { OTelGroupCallMembership } from "../otel/OTelGroupCallMembership";
 import { SettingsModal } from "../settings/SettingsModal";
 import { InviteModal } from "./InviteModal";
 import { useRageshakeRequestModal } from "../settings/submit-rageshake";
 import { RageshakeRequestModal } from "./RageshakeRequestModal";
-import { VideoTile } from "../video-grid/VideoTile";
+import { E2EEConfig, useLiveKit } from "../livekit/useLiveKit";
-import { UserChoices, useLiveKit } from "../livekit/useLiveKit";
-import { useMediaDevicesSwitcher } from "../livekit/useMediaDevicesSwitcher";
 import { useFullscreen } from "./useFullscreen";
 import { useLayoutStates } from "../video-grid/Layout";
 import { useSFUConfig } from "../livekit/OpenIDLoader";
 import { E2EELock } from "../E2EELock";
+import { useEventEmitterThree } from "../useEvents";
+import { useWakeLock } from "../useWakeLock";
+import { useMergedRefs } from "../useMergedRefs";
+import { MuteStates } from "./MuteStates";
 
 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 // There is currently a bug in Safari our our code with cloning and sending MediaStreams
@@ -93,19 +96,25 @@ const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 
 export interface ActiveCallProps extends Omit<InCallViewProps, "livekitRoom"> {
-  userChoices: UserChoices;
+  e2eeConfig?: E2EEConfig;
 }
 
 export function ActiveCall(props: ActiveCallProps) {
   const sfuConfig = useSFUConfig();
-  const livekitRoom = useLiveKit(props.userChoices, sfuConfig);
+  const livekitRoom = useLiveKit(props.muteStates, sfuConfig, props.e2eeConfig);
+
+  if (!livekitRoom) {
+    return null;
+  }
+
+  if (props.e2eeConfig && !livekitRoom.isE2EEEnabled) {
+    livekitRoom.setE2EEEnabled(!!props.e2eeConfig);
+  }
 
   return (
-    livekitRoom && (
     <RoomContext.Provider value={livekitRoom}>
       <InCallView {...props} livekitRoom={livekitRoom} />
     </RoomContext.Provider>
-    )
   );
 }
 
@@ -113,42 +122,34 @@ export interface InCallViewProps {
   client: MatrixClient;
   groupCall: GroupCall;
   livekitRoom: Room;
+  muteStates: MuteStates;
   participants: Map<RoomMember, Map<string, ParticipantInfo>>;
-  onLeave: () => void;
+  onLeave: (error?: Error) => void;
   unencryptedEventsFromUsers: Set<string>;
   hideHeader: boolean;
-  matrixInfo: MatrixInfo;
+  otelGroupCallMembership?: OTelGroupCallMembership;
-  otelGroupCallMembership: OTelGroupCallMembership;
 }
 
 export function InCallView({
   client,
   groupCall,
   livekitRoom,
+  muteStates,
   participants,
   onLeave,
   unencryptedEventsFromUsers,
   hideHeader,
-  matrixInfo,
   otelGroupCallMembership,
 }: InCallViewProps) {
   const { t } = useTranslation();
   usePreventScroll();
+  useWakeLock();
 
   const containerRef1 = useRef<HTMLDivElement | null>(null);
   const [containerRef2, bounds] = useMeasure({ polyfill: ResizeObserver });
   const boundsValid = bounds.height > 0;
   // Merge the refs so they can attach to the same element
-  const containerRef = useCallback(
+  const containerRef = useMergedRefs(containerRef1, containerRef2);
-    (el: HTMLDivElement) => {
-      containerRef1.current = el;
-      containerRef2(el);
-    },
-    [containerRef1, containerRef2]
-  );
-
-  // Managed media devices state coupled with an active room.
-  const roomMediaSwitcher = useMediaDevicesSwitcher(livekitRoom);
 
   const screenSharingTracks = useTracks(
     [{ source: Track.Source.ScreenShare, withPlaceholder: false }],
@@ -165,19 +166,18 @@ export function InCallView({
 
   const { hideScreensharing } = useUrlParams();
 
-  const {
+  const { isScreenShareEnabled, localParticipant } = useLocalParticipant({
-    isMicrophoneEnabled,
+    room: livekitRoom,
-    isCameraEnabled,
+  });
-    isScreenShareEnabled,
-    localParticipant,
-  } = useLocalParticipant({ room: livekitRoom });
 
-  const toggleMicrophone = useCallback(async () => {
+  const toggleMicrophone = useCallback(
-    await localParticipant.setMicrophoneEnabled(!isMicrophoneEnabled);
+    () => muteStates.audio.setEnabled?.((e) => !e),
-  }, [localParticipant, isMicrophoneEnabled]);
+    [muteStates]
-  const toggleCamera = useCallback(async () => {
+  );
-    await localParticipant.setCameraEnabled(!isCameraEnabled);
+  const toggleCamera = useCallback(
-  }, [localParticipant, isCameraEnabled]);
+    () => muteStates.video.setEnabled?.((e) => !e),
+    [muteStates]
+  );
 
   const joinRule = useJoinRule(groupCall.room);
 
@@ -190,6 +190,27 @@ export function InCallView({
     async (muted) => await localParticipant.setMicrophoneEnabled(!muted)
   );
 
+  const onDisconnected = useCallback(
+    (reason?: DisconnectReason) => {
+      PosthogAnalytics.instance.eventCallDisconnected.track(reason);
+      logger.info("Disconnected from livekit call with reason ", reason);
+      onLeave(
+        new Error("Disconnected from LiveKit call with reason " + reason)
+      );
+    },
+    [onLeave]
+  );
+
+  const onLeavePress = useCallback(() => {
+    onLeave();
+  }, [onLeave]);
+
+  useEventEmitterThree<RoomEvent.Disconnected, RoomEventCallbacks>(
+    livekitRoom,
+    RoomEvent.Disconnected,
+    onDisconnected
+  );
+
   useEffect(() => {
     widget?.api.transport.send(
       layout === "freedom"
@@ -203,11 +224,11 @@ export function InCallView({
     if (widget) {
       const onTileLayout = async (ev: CustomEvent<IWidgetApiRequest>) => {
         setLayout("freedom");
-        await widget.api.transport.reply(ev.detail, {});
+        await widget!.api.transport.reply(ev.detail, {});
       };
       const onSpotlightLayout = async (ev: CustomEvent<IWidgetApiRequest>) => {
         setLayout("spotlight");
-        await widget.api.transport.reply(ev.detail, {});
+        await widget!.api.transport.reply(ev.detail, {});
       };
 
       widget.lazyActions.on(ElementWidgetActions.TileLayout, onTileLayout);
@@ -217,8 +238,8 @@ export function InCallView({
       );
 
       return () => {
-        widget.lazyActions.off(ElementWidgetActions.TileLayout, onTileLayout);
+        widget!.lazyActions.off(ElementWidgetActions.TileLayout, onTileLayout);
-        widget.lazyActions.off(
+        widget!.lazyActions.off(
           ElementWidgetActions.SpotlightLayout,
           onSpotlightLayout
         );
@@ -341,7 +362,12 @@ export function InCallView({
 
   const toggleScreensharing = useCallback(async () => {
     exitFullscreen();
-    await localParticipant.setScreenShareEnabled(!isScreenShareEnabled);
+    await localParticipant.setScreenShareEnabled(!isScreenShareEnabled, {
+      audio: true,
+      selfBrowserSurface: "include",
+      surfaceSwitching: "include",
+      systemAudio: "include",
+    });
   }, [localParticipant, isScreenShareEnabled, exitFullscreen]);
 
   let footer: JSX.Element | null;
@@ -354,14 +380,16 @@ export function InCallView({
     buttons.push(
       <MicButton
         key="1"
-        muted={!isMicrophoneEnabled}
+        muted={!muteStates.audio.enabled}
         onPress={toggleMicrophone}
+        disabled={muteStates.audio.setEnabled === null}
         data-testid="incall_mute"
       />,
       <VideoButton
         key="2"
-        muted={!isCameraEnabled}
+        muted={!muteStates.video.enabled}
         onPress={toggleCamera}
+        disabled={muteStates.video.setEnabled === null}
         data-testid="incall_videomute"
       />
     );
@@ -381,7 +409,7 @@ export function InCallView({
     }
 
     buttons.push(
-      <HangupButton key="6" onPress={onLeave} data-testid="incall_leave" />
+      <HangupButton key="6" onPress={onLeavePress} data-testid="incall_leave" />
     );
     footer = <div className={styles.footer}>{buttons}</div>;
   }
@@ -391,7 +419,7 @@ export function InCallView({
       {!hideHeader && maximisedParticipant === null && (
         <Header>
           <LeftNav>
-            <RoomHeaderInfo roomName={matrixInfo.roomName} />
+            <RoomHeaderInfo roomName={groupCall.room.name} />
             <VersionMismatchWarning
               users={unencryptedEventsFromUsers}
               room={groupCall.room}
@@ -411,29 +439,32 @@ export function InCallView({
         {renderContent()}
         {footer}
       </div>
+      {otelGroupCallMembership && (
         <GroupCallInspector
           client={client}
           groupCall={groupCall}
           otelGroupCallMembership={otelGroupCallMembership}
           show={showInspector}
         />
+      )}
       {rageshakeRequestModalState.isOpen && !noControls && (
         <RageshakeRequestModal
           {...rageshakeRequestModalProps}
-          roomIdOrAlias={matrixInfo.roomIdOrAlias}
+          roomId={groupCall.room.roomId}
         />
       )}
       {settingsModalState.isOpen && (
         <SettingsModal
           client={client}
           roomId={groupCall.room.roomId}
-          mediaDevicesSwitcher={roomMediaSwitcher}
           {...settingsModalProps}
         />
       )}
       {inviteModalState.isOpen && (
         <InviteModal
-          roomIdOrAlias={matrixInfo.roomIdOrAlias}
+          roomIdOrAlias={
+            groupCall.room.getCanonicalAlias() ?? groupCall.room.roomId
+          }
           {...inviteModalProps}
         />
       )}

src/room/LobbyView.module.css

@@ -66,3 +66,9 @@ limitations under the License.
 .copyButton:last-child {
   margin-bottom: 0;
 }
+
+.passwordField {
+  width: 320px !important;
+  margin-bottom: 20px;
+  flex: 0;
+}

src/room/LobbyView.tsx

@@ -14,7 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { useRef, useEffect, useState } from "react";
+import {
+  useRef,
+  useEffect,
+  useState,
+  useCallback,
+  ChangeEvent,
+  FC,
+} from "react";
 import { Trans, useTranslation } from "react-i18next";
 
 import styles from "./LobbyView.module.css";
@@ -25,37 +32,56 @@ import { UserMenuContainer } from "../UserMenuContainer";
 import { Body, Link } from "../typography/Typography";
 import { useLocationNavigation } from "../useLocationNavigation";
 import { MatrixInfo, VideoPreview } from "./VideoPreview";
-import { UserChoices } from "../livekit/useLiveKit";
+import { E2EEConfig } from "../livekit/useLiveKit";
+import { InputField } from "../input/Input";
+import { useEnableE2EE } from "../settings/useSetting";
+import { MuteStates } from "./MuteStates";
 
 interface Props {
   matrixInfo: MatrixInfo;
-
+  muteStates: MuteStates;
-  onEnter: (userChoices: UserChoices) => void;
+  onEnter: (e2eeConfig?: E2EEConfig) => void;
   isEmbedded: boolean;
   hideHeader: boolean;
 }
 
-export function LobbyView(props: Props) {
+export const LobbyView: FC<Props> = ({
+  matrixInfo,
+  muteStates,
+  onEnter,
+  isEmbedded,
+  hideHeader,
+}) => {
   const { t } = useTranslation();
   useLocationNavigation();
 
-  const joinCallButtonRef = useRef<HTMLButtonElement>();
+  const [enableE2EE] = useEnableE2EE();
+
+  const joinCallButtonRef = useRef<HTMLButtonElement>(null);
   useEffect(() => {
     if (joinCallButtonRef.current) {
       joinCallButtonRef.current.focus();
     }
   }, [joinCallButtonRef]);
 
-  const [userChoices, setUserChoices] = useState<UserChoices | undefined>(
+  const [e2eeSharedKey, setE2EESharedKey] = useState<string | undefined>(
     undefined
   );
 
+  const onE2EESharedKeyChanged = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const value = event.target.value;
+      setE2EESharedKey(value === "" ? undefined : value);
+    },
+    [setE2EESharedKey]
+  );
+
   return (
     <div className={styles.room}>
-      {!props.hideHeader && (
+      {!hideHeader && (
         <Header>
           <LeftNav>
-            <RoomHeaderInfo roomName={props.matrixInfo.roomName} />
+            <RoomHeaderInfo roomName={matrixInfo.roomName} />
           </LeftNav>
           <RightNav>
             <UserMenuContainer />
@@ -64,16 +90,26 @@ export function LobbyView(props: Props) {
       )}
       <div className={styles.joinRoom}>
         <div className={styles.joinRoomContent}>
-          <VideoPreview
+          <VideoPreview matrixInfo={matrixInfo} muteStates={muteStates} />
-            matrixInfo={props.matrixInfo}
+          {enableE2EE && (
-            onUserChoicesChanged={setUserChoices}
+            <InputField
+              className={styles.passwordField}
+              label={t("Password (if none, E2EE is disabled)")}
+              type="text"
+              onChange={onE2EESharedKeyChanged}
+              value={e2eeSharedKey}
             />
+          )}
           <Trans>
             <Button
               ref={joinCallButtonRef}
               className={styles.copyButton}
               size="lg"
-              onPress={() => props.onEnter(userChoices!)}
+              onPress={() =>
+                onEnter(
+                  e2eeSharedKey ? { sharedKey: e2eeSharedKey } : undefined
+                )
+              }
               data-testid="lobby_joinCall"
             >
               Join call now
@@ -81,7 +117,7 @@ export function LobbyView(props: Props) {
             <Body>Or</Body>
             <CopyButton
               variant="secondaryCopy"
-              value={getRoomUrl(props.matrixInfo.roomName)}
+              value={getRoomUrl(matrixInfo.roomAlias ?? matrixInfo.roomId)}
               className={styles.copyButton}
               copiedMessage={t("Call link copied")}
               data-testid="lobby_inviteLink"
@@ -90,7 +126,7 @@ export function LobbyView(props: Props) {
             </CopyButton>
           </Trans>
         </div>
-        {!props.isEmbedded && (
+        {!isEmbedded && (
           <Body className={styles.joinRoomFooter}>
             <Link color="primary" to="/">
               {t("Take me Home")}
@@ -100,4 +136,4 @@ export function LobbyView(props: Props) {
       </div>
     </div>
   );
-}
+};

src/room/MuteStates.ts

@@ -0,0 +1,77 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { Dispatch, SetStateAction, useMemo } from "react";
+
+import { MediaDevice, useMediaDevices } from "../livekit/MediaDevicesContext";
+import { useReactiveState } from "../useReactiveState";
+
+/**
+ * If there already is this many participants in the call, we automatically mute
+ * the user
+ */
+const MUTE_PARTICIPANT_COUNT = 8;
+
+interface DeviceAvailable {
+  enabled: boolean;
+  setEnabled: Dispatch<SetStateAction<boolean>>;
+}
+
+interface DeviceUnavailable {
+  enabled: false;
+  setEnabled: null;
+}
+
+const deviceUnavailable: DeviceUnavailable = {
+  enabled: false,
+  setEnabled: null,
+};
+
+type MuteState = DeviceAvailable | DeviceUnavailable;
+
+export interface MuteStates {
+  audio: MuteState;
+  video: MuteState;
+}
+
+function useMuteState(
+  device: MediaDevice,
+  enabledByDefault: () => boolean
+): MuteState {
+  const [enabled, setEnabled] = useReactiveState<boolean>(
+    (prev) => device.available.length > 0 && (prev ?? enabledByDefault()),
+    [device]
+  );
+  return useMemo(
+    () =>
+      device.available.length === 0
+        ? deviceUnavailable
+        : { enabled, setEnabled },
+    [device, enabled, setEnabled]
+  );
+}
+
+export function useMuteStates(participantCount: number): MuteStates {
+  const devices = useMediaDevices();
+
+  const audio = useMuteState(
+    devices.audioInput,
+    () => participantCount <= MUTE_PARTICIPANT_COUNT
+  );
+  const video = useMuteState(devices.videoInput, () => true);
+
+  return useMemo(() => ({ audio, video }), [audio, video]);
+}

src/room/RageshakeRequestModal.tsx

@@ -25,13 +25,13 @@ import { Body } from "../typography/Typography";
 
 interface Props extends Omit<ModalProps, "title" | "children"> {
   rageshakeRequestId: string;
-  roomIdOrAlias: string;
+  roomId: string;
   onClose: () => void;
 }
 
 export const RageshakeRequestModal: FC<Props> = ({
   rageshakeRequestId,
-  roomIdOrAlias,
+  roomId,
   ...rest
 }) => {
   const { t } = useTranslation();
@@ -57,7 +57,7 @@ export const RageshakeRequestModal: FC<Props> = ({
               submitRageshake({
                 sendLogs: true,
                 rageshakeRequestId,
-                roomId: roomIdOrAlias, // Possibly not a room ID, but oh well
+                roomId,
               })
             }
             disabled={sending}

src/room/RoomAuthView.tsx

@@ -36,6 +36,8 @@ export function RoomAuthView() {
     useRegisterPasswordlessUser();
 
   const onSubmit = useCallback(
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     (e) => {
       e.preventDefault();
       const data = new FormData(e.target);

src/room/RoomPage.tsx

@@ -15,24 +15,19 @@ limitations under the License.
 */
 
 import { FC, useEffect, useState, useCallback } from "react";
-import { useTranslation } from "react-i18next";
 
 import type { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
-import { useClient } from "../ClientContext";
+import { useClientLegacy } from "../ClientContext";
 import { ErrorView, LoadingView } from "../FullScreenView";
 import { RoomAuthView } from "./RoomAuthView";
 import { GroupCallLoader } from "./GroupCallLoader";
 import { GroupCallView } from "./GroupCallView";
 import { useUrlParams } from "../UrlParams";
 import { useRegisterPasswordlessUser } from "../auth/useRegisterPasswordlessUser";
-import { translatedError } from "../TranslatedError";
 import { useOptInAnalytics } from "../settings/useSetting";
+import { HomePage } from "../home/HomePage";
 
 export const RoomPage: FC = () => {
-  const { t } = useTranslation();
-  const { loading, isAuthenticated, error, client, isPasswordlessUser } =
-    useClient();
-
   const {
     roomAlias,
     roomId,
@@ -44,7 +39,9 @@ export const RoomPage: FC = () => {
     displayName,
   } = useUrlParams();
   const roomIdOrAlias = roomId ?? roomAlias;
-  if (!roomIdOrAlias) throw translatedError("No room specified", t);
+  if (!roomIdOrAlias) {
+    console.error("No room specified");
+  }
 
   const [optInAnalytics, setOptInAnalytics] = useOptInAnalytics();
   const { registerPasswordlessUser } = useRegisterPasswordlessUser();
@@ -52,39 +49,41 @@ export const RoomPage: FC = () => {
 
   useEffect(() => {
     // During the beta, opt into analytics by default
-    if (optInAnalytics === null) setOptInAnalytics(true);
+    if (optInAnalytics === null && setOptInAnalytics) setOptInAnalytics(true);
   }, [optInAnalytics, setOptInAnalytics]);
 
+  const { loading, authenticated, client, error, passwordlessUser } =
+    useClientLegacy();
+
   useEffect(() => {
     // If we've finished loading, are not already authed and we've been given a display name as
     // a URL param, automatically register a passwordless user
-    if (!loading && !isAuthenticated && displayName) {
+    if (!loading && !authenticated && displayName) {
       setIsRegistering(true);
       registerPasswordlessUser(displayName).finally(() => {
         setIsRegistering(false);
       });
     }
   }, [
-    isAuthenticated,
+    loading,
+    authenticated,
     displayName,
     setIsRegistering,
     registerPasswordlessUser,
-    loading,
   ]);
 
   const groupCallView = useCallback(
     (groupCall: GroupCall) => (
       <GroupCallView
-        client={client}
+        client={client!}
-        roomIdOrAlias={roomIdOrAlias}
         groupCall={groupCall}
-        isPasswordlessUser={isPasswordlessUser}
+        isPasswordlessUser={passwordlessUser}
         isEmbedded={isEmbedded}
         preload={preload}
         hideHeader={hideHeader}
       />
     ),
-    [client, roomIdOrAlias, isPasswordlessUser, isEmbedded, preload, hideHeader]
+    [client, passwordlessUser, isEmbedded, preload, hideHeader]
   );
 
   if (loading || isRegistering) {
@@ -95,10 +94,14 @@ export const RoomPage: FC = () => {
     return <ErrorView error={error} />;
   }
 
-  if (!isAuthenticated) {
+  if (!client) {
     return <RoomAuthView />;
   }
 
+  if (!roomIdOrAlias) {
+    return <HomePage />;
+  }
+
   return (
     <GroupCallLoader
       client={client}

src/room/RoomRedirect.tsx

@@ -1,44 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { useEffect } from "react";
-import { useLocation, useHistory } from "react-router-dom";
-
-import { Config } from "../config/Config";
-import { LoadingView } from "../FullScreenView";
-
-// A component that, when loaded, redirects the client to a full room URL
-// based on the current URL being an abbreviated room URL
-export function RoomRedirect() {
-  const { pathname } = useLocation();
-  const history = useHistory();
-
-  useEffect(() => {
-    let roomId = pathname;
-
-    if (pathname.startsWith("/")) {
-      roomId = roomId.substring(1, roomId.length);
-    }
-
-    if (!roomId.startsWith("#") && !roomId.startsWith("!")) {
-      roomId = `#${roomId}:${Config.defaultServerName()}`;
-    }
-
-    history.replace(`/room/${roomId.toLowerCase()}`);
-  }, [pathname, history]);
-
-  return <LoadingView />;
-}

src/room/VideoPreview.tsx

@@ -14,12 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useState, useEffect, useCallback, useRef } from "react";
+import { useEffect, useCallback, useMemo, useRef, FC } from "react";
 import useMeasure from "react-use-measure";
 import { ResizeObserver } from "@juggle/resize-observer";
 import { OverlayTriggerState } from "@react-stately/overlays";
 import { usePreviewTracks } from "@livekit/components-react";
-import { LocalAudioTrack, LocalVideoTrack, Track } from "livekit-client";
+import {
+  CreateLocalTracksOptions,
+  LocalVideoTrack,
+  Track,
+} from "livekit-client";
 
 import { MicButton, SettingsButton, VideoButton } from "../button";
 import { Avatar } from "../Avatar";
@@ -27,23 +31,23 @@ import styles from "./VideoPreview.module.css";
 import { useModalTriggerState } from "../Modal";
 import { SettingsModal } from "../settings/SettingsModal";
 import { useClient } from "../ClientContext";
-import { useMediaDevicesSwitcher } from "../livekit/useMediaDevicesSwitcher";
+import { useMediaDevices } from "../livekit/MediaDevicesContext";
-import { DeviceChoices, UserChoices } from "../livekit/useLiveKit";
+import { MuteStates } from "./MuteStates";
-import { useDefaultDevices } from "../settings/useSetting";
 
 export type MatrixInfo = {
   displayName: string;
   avatarUrl: string;
+  roomId: string;
   roomName: string;
-  roomIdOrAlias: string;
+  roomAlias: string | null;
 };
 
 interface Props {
   matrixInfo: MatrixInfo;
-  onUserChoicesChanged: (choices: UserChoices) => void;
+  muteStates: MuteStates;
 }
 
-export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) {
+export const VideoPreview: FC<Props> = ({ matrixInfo, muteStates }) => {
   const { client } = useClient();
   const [previewRef, previewBounds] = useMeasure({ polyfill: ResizeObserver });
 
@@ -62,95 +66,41 @@ export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) {
     settingsModalState.open();
   }, [settingsModalState]);
 
-  // Create local media tracks.
+  const devices = useMediaDevices();
-  const [videoEnabled, setVideoEnabled] = useState<boolean>(true);
-  const [audioEnabled, setAudioEnabled] = useState<boolean>(true);
 
-  // The settings are updated as soon as the device changes. We wrap the settings value in a ref to store their initial value.
+  const initialAudioOptions = useRef<CreateLocalTracksOptions["audio"]>();
-  // Not changing the device options prohibits the usePreviewTracks hook to recreate the tracks.
+  initialAudioOptions.current ??= muteStates.audio.enabled && {
-  const initialDefaultDevices = useRef(useDefaultDevices()[0]);
+    deviceId: devices.audioInput.selectedId,
+  };
 
   const tracks = usePreviewTracks(
     {
-      audio: { deviceId: initialDefaultDevices.current.audioinput },
+      // The only reason we request audio here is to get the audio permission
-      video: { deviceId: initialDefaultDevices.current.videoinput },
+      // request over with at the same time. But changing the audio settings
+      // shouldn't cause this hook to recreate the track, which is why we
+      // reference the initial values here.
+      audio: initialAudioOptions.current,
+      video: muteStates.video.enabled && {
+        deviceId: devices.videoInput.selectedId,
+      },
     },
     (error) => {
       console.error("Error while creating preview Tracks:", error);
     }
   );
-  const videoTrack = React.useMemo(
+  const videoTrack = useMemo(
     () =>
-      tracks?.filter((t) => t.kind === Track.Kind.Video)[0] as LocalVideoTrack,
+      tracks?.find((t) => t.kind === Track.Kind.Video) as
+        | LocalVideoTrack
+        | undefined,
     [tracks]
   );
-  const audioTrack = React.useMemo(
-    () =>
-      tracks?.filter((t) => t.kind === Track.Kind.Audio)[0] as LocalAudioTrack,
-    [tracks]
-  );
-  // Only let the MediaDeviceSwitcher request permissions if a video track is already available.
-  // Otherwise we would end up asking for permissions in usePreviewTracks and in useMediaDevicesSwitcher.
-  const requestPermissions = !!videoTrack;
-  const mediaSwitcher = useMediaDevicesSwitcher(
-    undefined,
-    {
-      videoTrack,
-      audioTrack,
-    },
-    requestPermissions
-  );
-  const { videoIn, audioIn } = mediaSwitcher;
 
-  const videoEl = React.useRef(null);
+  const videoEl = useRef<HTMLVideoElement | null>(null);
-
-  useEffect(() => {
-    // Effect to update the settings
-    const createChoices = (
-      enabled: boolean,
-      deviceId?: string
-    ): DeviceChoices | undefined => {
-      return deviceId
-        ? {
-            selectedId: deviceId,
-            enabled,
-          }
-        : undefined;
-    };
-    onUserChoicesChanged({
-      video: createChoices(videoEnabled, videoIn.selectedId),
-      audio: createChoices(audioEnabled, audioIn.selectedId),
-    });
-  }, [
-    onUserChoicesChanged,
-    videoIn.selectedId,
-    videoEnabled,
-    audioIn.selectedId,
-    audioEnabled,
-  ]);
-
-  useEffect(() => {
-    // Effect to update the initial device selection for the ui elements based on the current preview track.
-    if (!videoIn.selectedId || videoIn.selectedId == "") {
-      videoTrack?.getDeviceId().then((videoId) => {
-        if (videoId) {
-          videoIn.setSelected(videoId);
-        }
-      });
-    }
-    if (!audioIn.selectedId || audioIn.selectedId == "") {
-      audioTrack?.getDeviceId().then((audioId) => {
-        if (audioId) {
-          audioIn.setSelected(audioId);
-        }
-      });
-    }
-  }, [videoIn, audioIn, videoTrack, audioTrack]);
 
   useEffect(() => {
     // Effect to connect the videoTrack with the video element.
     if (videoEl.current) {
-      videoTrack?.unmute();
       videoTrack?.attach(videoEl.current);
     }
     return () => {
@@ -158,11 +108,20 @@ export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) {
     };
   }, [videoTrack]);
 
+  const onAudioPress = useCallback(
+    () => muteStates.audio.setEnabled?.((e) => !e),
+    [muteStates]
+  );
+  const onVideoPress = useCallback(
+    () => muteStates.video.setEnabled?.((e) => !e),
+    [muteStates]
+  );
+
   return (
     <div className={styles.preview} ref={previewRef}>
       <video ref={videoEl} muted playsInline disablePictureInPicture />
       <>
-        {(videoTrack ? !videoEnabled : true) && (
+        {!muteStates.video.enabled && (
           <div className={styles.avatarContainer}>
             <Avatar
               size={(previewBounds.height - 66) / 2}
@@ -173,23 +132,21 @@ export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) {
         )}
         <div className={styles.previewButtons}>
           <MicButton
-            muted={!audioEnabled}
+            muted={!muteStates.audio.enabled}
-            onPress={() => setAudioEnabled(!audioEnabled)}
+            onPress={onAudioPress}
+            disabled={muteStates.audio.setEnabled === null}
           />
           <VideoButton
-            muted={!videoEnabled}
+            muted={!muteStates.video.enabled}
-            onPress={() => setVideoEnabled(!videoEnabled)}
+            onPress={onVideoPress}
+            disabled={muteStates.video.setEnabled === null}
           />
           <SettingsButton onPress={openSettings} />
         </div>
       </>
-      {settingsModalState.isOpen && (
+      {settingsModalState.isOpen && client && (
-        <SettingsModal
+        <SettingsModal client={client} {...settingsModalProps} />
-          client={client}
-          mediaDevicesSwitcher={mediaSwitcher}
-          {...settingsModalProps}
-        />
       )}
     </div>
   );
-}
+};

src/room/useGroupCall.ts

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import { useCallback, useEffect, useReducer, useState } from "react";
+import * as Sentry from "@sentry/react";
 import {
   GroupCallEvent,
   GroupCallState,
@@ -58,12 +59,12 @@ export interface ParticipantInfo {
 
 interface UseGroupCallReturnType {
   state: GroupCallState;
-  localCallFeed: CallFeed;
+  localCallFeed?: CallFeed;
-  activeSpeaker: CallFeed | null;
+  activeSpeaker?: CallFeed;
   userMediaFeeds: CallFeed[];
   microphoneMuted: boolean;
   localVideoMuted: boolean;
-  error: TranslatedError | null;
+  error?: TranslatedError;
   initLocalCallFeed: () => void;
   enter: () => Promise<void>;
   leave: () => void;
@@ -74,23 +75,21 @@ interface UseGroupCallReturnType {
   requestingScreenshare: boolean;
   isScreensharing: boolean;
   screenshareFeeds: CallFeed[];
-  localDesktopCapturerSourceId: string; // XXX: This looks unused?
   participants: Map<RoomMember, Map<string, ParticipantInfo>>;
   hasLocalParticipant: boolean;
   unencryptedEventsFromUsers: Set<string>;
-  otelGroupCallMembership: OTelGroupCallMembership;
+  otelGroupCallMembership?: OTelGroupCallMembership;
 }
 
 interface State {
   state: GroupCallState;
-  localCallFeed: CallFeed;
+  localCallFeed?: CallFeed;
-  activeSpeaker: CallFeed | null;
+  activeSpeaker?: CallFeed;
   userMediaFeeds: CallFeed[];
-  error: TranslatedError | null;
+  error?: TranslatedError;
   microphoneMuted: boolean;
   localVideoMuted: boolean;
   screenshareFeeds: CallFeed[];
-  localDesktopCapturerSourceId: string;
   isScreensharing: boolean;
   requestingScreenshare: boolean;
   participants: Map<RoomMember, Map<string, ParticipantInfo>>;
@@ -101,7 +100,7 @@ interface State {
 // level so that it doesn't pop in & out of existence as react mounts & unmounts
 // components. The right solution is probably for this to live in the js-sdk and have
 // the same lifetime as groupcalls themselves.
-let groupCallOTelMembership: OTelGroupCallMembership;
+let groupCallOTelMembership: OTelGroupCallMembership | undefined;
 let groupCallOTelMembershipGroupCallId: string;
 
 function getParticipants(
@@ -159,7 +158,6 @@ export function useGroupCall(
       localVideoMuted,
       isScreensharing,
       screenshareFeeds,
-      localDesktopCapturerSourceId,
       participants,
       hasLocalParticipant,
       requestingScreenshare,
@@ -167,17 +165,13 @@ export function useGroupCall(
     setState,
   ] = useState<State>({
     state: GroupCallState.LocalCallFeedUninitialized,
-    localCallFeed: null,
-    activeSpeaker: null,
     userMediaFeeds: [],
-    error: null,
     microphoneMuted: false,
     localVideoMuted: false,
     isScreensharing: false,
     screenshareFeeds: [],
-    localDesktopCapturerSourceId: null,
     requestingScreenshare: false,
-    participants: new Map(),
+    participants: getParticipants(groupCall),
     hasLocalParticipant: false,
   });
 
@@ -248,12 +242,11 @@ export function useGroupCall(
       updateState({
         state: groupCall.state,
         localCallFeed: groupCall.localCallFeed,
-        activeSpeaker: groupCall.activeSpeaker ?? null,
+        activeSpeaker: groupCall.activeSpeaker,
         userMediaFeeds: [...groupCall.userMediaFeeds],
         microphoneMuted: groupCall.isMicrophoneMuted(),
         localVideoMuted: groupCall.isLocalVideoMuted(),
         isScreensharing: groupCall.isScreensharing(),
-        localDesktopCapturerSourceId: groupCall.localDesktopCapturerSourceId,
         screenshareFeeds: [...groupCall.screenshareFeeds],
       });
     }
@@ -303,7 +296,7 @@ export function useGroupCall(
 
     function onActiveSpeakerChanged(activeSpeaker: CallFeed | undefined): void {
       updateState({
-        activeSpeaker: activeSpeaker ?? null,
+        activeSpeaker: activeSpeaker,
       });
     }
 
@@ -319,12 +312,11 @@ export function useGroupCall(
 
     function onLocalScreenshareStateChanged(
       isScreensharing: boolean,
-      _localScreenshareFeed: CallFeed,
+      _localScreenshareFeed?: CallFeed,
-      localDesktopCapturerSourceId: string
+      localDesktopCapturerSourceId?: string
     ): void {
       updateState({
         isScreensharing,
-        localDesktopCapturerSourceId,
       });
     }
 
@@ -340,6 +332,7 @@ export function useGroupCall(
     }
 
     function onError(e: GroupCallError): void {
+      Sentry.captureException(e);
       if (e.code === GroupCallErrorCode.UnknownDevice) {
         const unknownDeviceError = e as GroupCallUnknownDeviceError;
         addUnencryptedEventUser(unknownDeviceError.userId);
@@ -405,15 +398,14 @@ export function useGroupCall(
     );
 
     updateState({
-      error: null,
+      error: undefined,
       state: groupCall.state,
       localCallFeed: groupCall.localCallFeed,
-      activeSpeaker: groupCall.activeSpeaker ?? null,
+      activeSpeaker: groupCall.activeSpeaker,
       userMediaFeeds: [...groupCall.userMediaFeeds],
       microphoneMuted: groupCall.isMicrophoneMuted(),
       localVideoMuted: groupCall.isLocalVideoMuted(),
       isScreensharing: groupCall.isScreensharing(),
-      localDesktopCapturerSourceId: groupCall.localDesktopCapturerSourceId,
       screenshareFeeds: [...groupCall.screenshareFeeds],
       participants: getParticipants(groupCall),
       hasLocalParticipant: groupCall.hasLocalParticipant(),
@@ -516,7 +508,7 @@ export function useGroupCall(
   }, [groupCall]);
 
   const setMicrophoneMuted = useCallback(
-    (setMuted) => {
+    (setMuted: boolean) => {
       groupCall.setMicrophoneMuted(setMuted);
       groupCallOTelMembership?.onSetMicrophoneMuted(setMuted);
       PosthogAnalytics.instance.eventMuteMicrophone.track(
@@ -575,7 +567,7 @@ export function useGroupCall(
         desktopCapturerSourceId: data.desktopCapturerSourceId as string,
         audio: !data.desktopCapturerSourceId,
       });
-      await widget.api.transport.reply(ev.detail, {});
+      await widget?.api.transport.reply(ev.detail, {});
     },
     [groupCall, updateState]
   );
@@ -584,7 +576,7 @@ export function useGroupCall(
     async (ev: CustomEvent<IWidgetApiRequest>) => {
       updateState({ requestingScreenshare: false });
       await groupCall.setScreensharingEnabled(false);
-      await widget.api.transport.reply(ev.detail, {});
+      await widget?.api.transport.reply(ev.detail, {});
     },
     [groupCall, updateState]
   );
@@ -601,11 +593,11 @@ export function useGroupCall(
       );
 
       return () => {
-        widget.lazyActions.off(
+        widget?.lazyActions.off(
           ElementWidgetActions.ScreenshareStart,
           onScreenshareStart
         );
-        widget.lazyActions.off(
+        widget?.lazyActions.off(
           ElementWidgetActions.ScreenshareStop,
           onScreenshareStop
         );
@@ -644,7 +636,6 @@ export function useGroupCall(
     requestingScreenshare,
     isScreensharing,
     screenshareFeeds,
-    localDesktopCapturerSourceId,
     participants,
     hasLocalParticipant,
     unencryptedEventsFromUsers,

src/room/useLoadGroupCall.ts

@@ -34,8 +34,26 @@ import { widget } from "../widget";
 
 const STATS_COLLECT_INTERVAL_TIME_MS = 10000;
 
+export type GroupCallLoaded = {
+  kind: "loaded";
+  groupCall: GroupCall;
+};
+
+export type GroupCallLoadFailed = {
+  kind: "failed";
+  error: Error;
+};
+
+export type GroupCallLoading = {
+  kind: "loading";
+};
+
+export type GroupCallStatus =
+  | GroupCallLoaded
+  | GroupCallLoadFailed
+  | GroupCallLoading;
+
 export interface GroupCallLoadState {
-  loading: boolean;
   error?: Error;
   groupCall?: GroupCall;
 }
@@ -45,13 +63,11 @@ export const useLoadGroupCall = (
   roomIdOrAlias: string,
   viaServers: string[],
   createPtt: boolean
-): GroupCallLoadState => {
+): GroupCallStatus => {
   const { t } = useTranslation();
-  const [state, setState] = useState<GroupCallLoadState>({ loading: true });
+  const [state, setState] = useState<GroupCallStatus>({ kind: "loading" });
 
   useEffect(() => {
-    setState({ loading: true });
-
     const fetchOrCreateRoom = async (): Promise<Room> => {
       try {
         // We lowercase the localpart when we create the room, so we must lowercase
@@ -74,8 +90,14 @@ export const useLoadGroupCall = (
       } catch (error) {
         if (
           isLocalRoomId(roomIdOrAlias, client) &&
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
           (error.errcode === "M_NOT_FOUND" ||
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
             (error.message &&
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore
               error.message.indexOf("Failed to fetch alias") !== -1))
         ) {
           // The room doesn't exist, but we can create it
@@ -86,7 +108,7 @@ export const useLoadGroupCall = (
           );
           // likewise, wait for the room
           await client.waitUntilRoomReadyForGroupCalls(roomId);
-          return client.getRoom(roomId);
+          return client.getRoom(roomId)!;
         } else {
           throw error;
         }
@@ -170,12 +192,8 @@ export const useLoadGroupCall = (
 
     waitForClientSyncing()
       .then(fetchOrCreateGroupCall)
-      .then((groupCall) =>
+      .then((groupCall) => setState({ kind: "loaded", groupCall }))
-        setState((prevState) => ({ ...prevState, loading: false, groupCall }))
+      .catch((error) => setState({ kind: "failed", error }));
-      )
-      .catch((error) =>
-        setState((prevState) => ({ ...prevState, loading: false, error }))
-      );
   }, [client, roomIdOrAlias, viaServers, createPtt, t]);
 
   return state;

src/room/usePageUnload.ts

@@ -55,14 +55,22 @@ export function usePageUnload(callback: () => void) {
     // iOS doesn't fire beforeunload event, so leave the call when you hide the page.
     if (isIOS()) {
       window.addEventListener("pagehide", onBeforeUnload);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
       document.addEventListener("visibilitychange", onBeforeUnload);
     }
 
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     window.addEventListener("beforeunload", onBeforeUnload);
 
     return () => {
       window.removeEventListener("pagehide", onBeforeUnload);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
       document.removeEventListener("visibilitychange", onBeforeUnload);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
       window.removeEventListener("beforeunload", onBeforeUnload);
       clearTimeout(pageVisibilityTimeout);
     };