Merge pull request #1892 from vector-im/dbkr/focus_switch_keep_screenshare

Keep screenshares when switching focus

.github/workflows/build.yaml

@@ -11,7 +11,7 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
       - name: Yarn cache
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           cache: "yarn"
       - name: Install dependencies

.github/workflows/lint.yaml

@@ -9,7 +9,7 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
       - name: Yarn cache
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           cache: "yarn"
       - name: Install dependencies

.github/workflows/netlify-fullmesh.yaml

@@ -1,88 +0,0 @@
-name: Netlify Main
-on:
-  workflow_run:
-    workflows: ["Build"]
-    types:
-      - completed
-    branches:
-      - "full-mesh"
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    permissions:
-      deployments: write
-    # Important: the 'branches' filter above will match the 'main' branch on forks,
-    # so we need to check the head repo too in order to not run on PRs from forks
-    # We check the branch name again too just for completeness
-    # (Is there a nicer way to see if a PR is from a fork?)
-    if: github.event.workflow_run.conclusion == 'success' && github.event.workflow_run.head_repository.full_name == 'vector-im/element-call' && github.event.workflow_run.head_branch == 'full-mesh'
-    steps:
-      - name: Create Deployment
-        uses: bobheadxi/deployments@v1
-        id: deployment
-        with:
-          step: start
-          token: ${{ secrets.GITHUB_TOKEN }}
-          env: main-branch-cd
-          ref: ${{ github.event.workflow_run.head_sha }}
-
-      - name: "Download artifact"
-        uses: actions/github-script@v6.4.1
-        with:
-          script: |
-            const artifacts = await github.rest.actions.listWorkflowRunArtifacts({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                run_id: ${{ github.event.workflow_run.id }},
-            });
-            const matchArtifact = artifacts.data.artifacts.filter((artifact) => {
-                return artifact.name == "build"
-            })[0];
-            const download = await github.rest.actions.downloadArtifact({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                artifact_id: matchArtifact.id,
-                archive_format: 'zip',
-            });
-            const fs = require('fs');
-            fs.writeFileSync('${{github.workspace}}/build.zip', Buffer.from(download.data));
-
-      - name: Extract Artifacts
-        run: unzip -d dist build.zip && rm build.zip
-
-      - name: Add redirects file
-        # We fetch from github directly as we don't bother checking out the repo
-        run: curl -s https://raw.githubusercontent.com/vector-im/element-call/main/config/netlify_redirects > dist/_redirects
-
-      - name: Add config file
-        run: curl -s https://raw.githubusercontent.com/vector-im/element-call/main/config/element_io_develop.json > dist/config.json
-
-      - name: Deploy to Netlify
-        id: netlify
-        uses: nwtgck/actions-netlify@v2.1.0
-        with:
-          publish-dir: dist
-          deploy-message: "Deploy from GitHub Actions"
-          production-branch: main
-          production-deploy: true
-          # These don't work because we're in workflow_run
-          enable-pull-request-comment: false
-          enable-commit-comment: false
-          github-deployment-environment: main
-        env:
-          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
-        timeout-minutes: 1
-
-      - name: Update deployment status
-        uses: bobheadxi/deployments@v1
-        if: always()
-        with:
-          step: finish
-          override: false
-          token: ${{ secrets.GITHUB_TOKEN }}
-          status: ${{ job.status }}
-          env: ${{ steps.deployment.outputs.env }}
-          deployment_id: ${{ steps.deployment.outputs.deployment_id }}
-          env_url: ${{ steps.netlify.outputs.deploy-url }}

.github/workflows/netlify-livekit.yaml

@@ -1,87 +0,0 @@
-name: Netlify LiveKit
-on:
-  workflow_run:
-    workflows: ["Build"]
-    types:
-      - completed
-    branches:
-      - "livekit"
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    permissions:
-      deployments: write
-    # Important: the 'branches' filter above will match the 'livekit' branch on forks,
-    # so we need to check the head repo too in order to not run on PRs from forks
-    # We check the branch name again too just for completeness
-    # (Is there a nicer way to see if a PR is from a fork?)
-    if: github.event.workflow_run.conclusion == 'success' && github.event.workflow_run.head_repository.full_name == 'vector-im/element-call' && github.event.workflow_run.head_branch == 'livekit'
-    steps:
-      - name: Create Deployment
-        uses: bobheadxi/deployments@v1
-        id: deployment
-        with:
-          step: start
-          token: ${{ secrets.GITHUB_TOKEN }}
-          env: livekit-experiment-branch-cd
-          ref: ${{ github.event.workflow_run.head_sha }}
-
-      - name: "Download artifact"
-        uses: actions/github-script@v6.4.1
-        with:
-          script: |
-            const artifacts = await github.rest.actions.listWorkflowRunArtifacts({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                run_id: ${{ github.event.workflow_run.id }},
-            });
-            const matchArtifact = artifacts.data.artifacts.filter((artifact) => {
-                return artifact.name == "build"
-            })[0];
-            const download = await github.rest.actions.downloadArtifact({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                artifact_id: matchArtifact.id,
-                archive_format: 'zip',
-            });
-            const fs = require('fs');
-            fs.writeFileSync('${{github.workspace}}/build.zip', Buffer.from(download.data));
-
-      - name: Extract Artifacts
-        run: unzip -d dist build.zip && rm build.zip
-
-      - name: Add redirects file
-        # We fetch from github directly as we don't bother checking out the repo
-        run: curl -s https://raw.githubusercontent.com/vector-im/element-call/livekit/config/netlify_redirects > dist/_redirects
-
-      - name: Add config file
-        run: curl -s https://raw.githubusercontent.com/vector-im/element-call/livekit/config/element_io_preview.json > dist/config.json
-
-      - name: Deploy to Netlify
-        id: netlify
-        uses: nwtgck/actions-netlify@v2.1.0
-        with:
-          publish-dir: dist
-          deploy-message: "Deploy from GitHub Actions"
-          production-branch: livekit
-          production-deploy: true
-          # These don't work because we're in workflow_run
-          enable-pull-request-comment: false
-          enable-commit-comment: false
-        env:
-          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: e3b9fa82-c040-4db6-b4bf-42b524d57423
-        timeout-minutes: 1
-
-      - name: Update deployment status
-        uses: bobheadxi/deployments@v1
-        if: always()
-        with:
-          step: finish
-          override: false
-          token: ${{ secrets.GITHUB_TOKEN }}
-          status: ${{ job.status }}
-          env: ${{ steps.deployment.outputs.env }}
-          deployment_id: ${{ steps.deployment.outputs.deployment_id }}
-          env_url: ${{ steps.netlify.outputs.deploy-url }}

.github/workflows/publish.yaml

@@ -26,14 +26,14 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Log in to container registry
-        uses: docker/login-action@b4bedf8053341df3b5a9f9e0f2cf4e79e27360c6
+        uses: docker/login-action@1f401f745bf57e30b3a2800ad308a87d2ebdf14b
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Yarn cache
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           cache: "yarn"
       - name: Install dependencies
@@ -62,7 +62,7 @@ jobs:
 
       - name: Extract metadata (tags, labels) for Docker
         id: meta
-        uses: docker/metadata-action@879dcbb708d40f8b8679d4f7941b938a086e23a7
+        uses: docker/metadata-action@62339db73c56dd749060f65a6ebb93a6e056b755
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
           tags: |
@@ -72,7 +72,7 @@ jobs:
             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@5d9862498505fcac67b9f455d6e94ec0339f7b90
+        uses: docker/setup-buildx-action@6d5347c4025fdf2bb05167a2519cac535a14a408
 
       - name: Build and push Docker image
         uses: docker/build-push-action@fdf7f43ecf7c1a5c7afe936410233728a8c2d9c2

.github/workflows/test.yaml

@@ -11,7 +11,7 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
       - name: Yarn cache
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           cache: "yarn"
       - name: Install dependencies

README.md

@@ -106,3 +106,9 @@ Run backend components:
 ```
 yarn backend
 ```
+
+## Documentation
+
+Usage and other technical details about the project can be found here:
+
+[**Docs**](./docs/README.md)

docs/README.md

@@ -0,0 +1,6 @@
+## Element Call Docs
+
+This folder contains documentation for Element Call setup and usage.
+
+- [Url format and parameters](./url-params.md)
+- [Embedded vs standalone mode](./embedded-standalone.md)

docs/embedded-standalone.md

@@ -0,0 +1,9 @@
+## Embedded vs standalone mode
+
+Element call is developed using the js-sdk with matroska mode. This means the app can run either as a standalone app directly connected to a homeserver providing login interfaces or it can be used as a widget.
+
+As a widget the app only uses the core calling (matrixRTC) parts. The rest (authentication, sending events, getting room state updates about calls) is done by the hosting client.
+Element Call and the hosting client are connected via the widget api.
+
+Element call detects that it is run as a widget if a widgetId is defined in the url parameters. If `widgetId` is present element call will try to connect to the client via the widget postMessage api using the parameters provided in [Url Format and parameters
+](./url-params.md).

docs/url-params.md

@@ -0,0 +1,190 @@
+## Url Format and parameters
+
+There are two formats for Element Call urls.
+
+- **Current Format**
+  ```
+  https://element_call.domain/room/#
+  /<room_name_alias>?roomId=!id:domain&password=1234&<other params see below>
+  ```
+  The url is split into two sections. The `https://element_call.domain/room/#` contains the app and the intend that the link brings you into a specific room (`https://call.element.io/#` would be the homepage). The fragment is used for query parameters to make sure they never get sent to the element_call.domain server. Here we have the actual matrix roomId and the password which are used to connect all participants with e2ee. This allows that `<room_name_alias>` does not need to be unique. Multiple meetings with the label weekly-sync can be created without collisions.
+- **deprecated**
+  ```
+  https://element_call.domain/<room_name>
+  ```
+  With this format the livekit alias that will be used is the `<room_name>`. All ppl connecting to this url will end up in the same unencrypted room. This does not scale, is super unsecure (ppl could end up in the same room by accident) and it also is not really possible to support encryption.
+  The url parameters are spit into two categories: **general** and **widget related**.
+
+### Widget related params
+
+**widgetId**
+The id used by the widget. The presence of this parameter inplis that elemetn call will not connect to a homeserver directly and instead tries to establish postMessage communication via the `parentUrl`
+
+```
+widgetId: string | null;
+```
+
+**parentUrl**
+The url used to send widget action postMessages. This should be the domain of the client
+or the webview the widget is hosted in. (in case the widget is not in an Iframe but in a
+dedicated webview we send the postMessages same webview the widget lives in. Filtering is
+done in the widget so it ignores the messages it receives from itself)
+
+```
+parentUrl: string | null;
+```
+
+**userId**
+The user's ID (only used in matryoshka mode).
+
+```
+userId: string | null;
+```
+
+**deviceId**
+The device's ID (only used in matryoshka mode).
+
+```
+deviceId: string | null;
+```
+
+**baseUrl**
+The base URL of the homeserver to use for media lookups in matryoshka mode.
+
+```
+baseUrl: string | null;
+```
+
+### General url parameters
+
+**roomId**
+Anything about what room we're pointed to should be from useRoomIdentifier which
+parses the path and resolves alias with respect to the default server name, however
+roomId is an exception as we need the room ID in embedded (matroyska) mode, and not
+the room alias (or even the via params because we are not trying to join it). This
+is also not validated, where it is in useRoomIdentifier().
+
+```
+roomId: string | null;
+```
+
+**confineToRoom**
+Whether the app should keep the user confined to the current call/room.
+
+```
+confineToRoom: boolean; (default: false)
+```
+
+**appPrompt**
+Whether upon entering a room, the user should be prompted to launch the
+native mobile app. (Affects only Android and iOS.)
+
+```
+appPrompt: boolean; (default: true)
+```
+
+**preload**
+Whether the app should pause before joining the call until it sees an
+io.element.join widget action, allowing it to be preloaded.
+
+```
+preload: boolean; (default: false)
+```
+
+**hideHeader**
+Whether to hide the room header when in a call.
+
+```
+hideHeader: boolean; (default: false)
+```
+
+**showControls**
+Whether to show the buttons to mute, screen-share, invite, hangup are shown when in a call.
+
+```
+showControls: boolean; (default: true)
+```
+
+**hideScreensharing**
+Whether to hide the screen-sharing button.
+
+```
+hideScreensharing: boolean; (default: false)
+```
+
+**enableE2EE**
+Whether to use end-to-end encryption.
+
+```
+enableE2EE: boolean; (default: true)
+```
+
+**perParticipantE2EE**
+Whether to use per participant encryption.
+Keys will be exchanged over encrypted matrix room messages.
+
+```
+perParticipantE2EE: boolean; (default: false)
+```
+
+**password**
+E2EE password when using a shared secret. (For individual sender keys in embedded mode this is not required.)
+
+```
+password: string | null;
+```
+
+**displayName**
+The display name to use for auto-registration.
+
+```
+displayName: string | null;
+```
+
+**lang**
+The BCP 47 code of the language the app should use.
+
+```
+lang: string | null;
+```
+
+**fonts**
+The font/fonts which the interface should use.
+There can be multiple font url parameters: `?font=font-one&font=font-two...`
+
+```
+font: string;
+font: string;
+...
+```
+
+**fontScale**
+The factor by which to scale the interface's font size.
+
+```
+fontScale: number | null;
+```
+
+**analyticsID**
+The Posthog analytics ID. It is only available if the user has given consent for sharing telemetry in element web.
+
+```
+analyticsID: string | null;
+```
+
+**allowIceFallback**
+Whether the app is allowed to use fallback STUN servers for ICE in case the
+user's homeserver doesn't provide any.
+
+```
+allowIceFallback: boolean; (default: false)
+```
+
+**skipLobby**
+Setting this flag skips the lobby and brings you in the call directly.
+In the widget this can be combined with preload to pass the device settings
+with the join widget action.
+
+```
+skipLobby: boolean; (default: false)
+```

package.json

@@ -23,7 +23,7 @@
     "@opentelemetry/api": "^1.4.0",
     "@opentelemetry/context-zone": "^1.9.1",
     "@opentelemetry/exporter-jaeger": "^1.9.1",
-    "@opentelemetry/exporter-trace-otlp-http": "^0.41.0",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.45.0",
     "@opentelemetry/instrumentation-document-load": "^0.33.0",
     "@opentelemetry/instrumentation-user-interaction": "^0.33.0",
     "@opentelemetry/sdk-trace-web": "^1.9.1",
@@ -46,8 +46,8 @@
     "@sentry/tracing": "^7.0.0",
     "@types/lodash": "^4.14.199",
     "@use-gesture/react": "^10.2.11",
-    "@vector-im/compound-design-tokens": "^0.0.6",
-    "@vector-im/compound-web": "^0.5.0",
+    "@vector-im/compound-design-tokens": "^0.1.0",
+    "@vector-im/compound-web": "^0.6.0",
     "@vitejs/plugin-basic-ssl": "^1.0.1",
     "@vitejs/plugin-react": "^4.0.1",
     "buffer": "^6.0.3",
@@ -58,7 +58,7 @@
     "i18next-http-backend": "^2.0.0",
     "livekit-client": "^1.12.3",
     "lodash": "^4.17.21",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#c8f8fb587d29dce22d314bfc16bf25a76b04e8bb",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#107e28e1145c8b2667701e1f75b9f09b5d2ac3d6",
     "matrix-widget-api": "^1.3.1",
     "normalize.css": "^8.0.1",
     "pako": "^2.0.4",
@@ -88,12 +88,11 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.5.1",
     "@types/content-type": "^1.1.5",
-    "@types/d3": "^7.4.0",
     "@types/dom-screen-wake-lock": "^1.0.1",
     "@types/dompurify": "^3.0.2",
     "@types/grecaptcha": "^3.0.4",
     "@types/jest": "^29.5.5",
-    "@types/node": "^18.13.0",
+    "@types/node": "^20.0.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/request": "^2.48.8",
     "@types/sdp-transform": "^2.4.5",
@@ -111,7 +110,7 @@
     "eslint-plugin-matrix-org": "^1.2.1",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.5.0",
-    "eslint-plugin-unicorn": "^48.0.1",
+    "eslint-plugin-unicorn": "^49.0.0",
     "i18next-parser": "^8.0.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.2.2",

public/locales/de/app.json

@@ -83,10 +83,7 @@
   "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 (Passwortgeschützte Anrufe)",
-  "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",

public/locales/es/app.json

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

public/locales/et/app.json

@@ -83,14 +83,11 @@
   "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)",
   "Encrypted": "Krüptitud",
   "End call": "Lõpeta kõne",
   "Grid": "Ruudustik",

public/locales/fr/app.json

@@ -83,14 +83,11 @@
   "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.",
-  "Enable end-to-end encryption (password protected calls)": "Activer le chiffrement de bout-en-bout (appels protégés par mot de passe)",
   "{{count, number}}|other": "{{count, number}}",
   "Encrypted": "Chiffré",
   "End call": "Terminer l’appel",

public/locales/id/app.json

@@ -83,10 +83,7 @@
   "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.",
   "Retry sending logs": "Kirim ulang catatan",
   "You were disconnected from the call": "Anda terputus dari panggilan",
   "Reconnect": "Hubungkan ulang",

public/locales/it/app.json

@@ -25,7 +25,6 @@
   "Developer Settings": "Impostazioni per sviluppatori",
   "Display name": "Il tuo nome",
   "Element Call Home": "Inizio di Element Call",
-  "Enable end-to-end encryption (password protected calls)": "Attiva crittografia end-to-end (chiamate protette da password)",
   "Encrypted": "Cifrata",
   "End call": "Termina chiamata",
   "Exit full screen": "Esci da schermo intero",
@@ -92,12 +91,10 @@
   "{{displayName}}, your call has ended.": "{{displayName}}, la chiamata è terminata.",
   "<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>Puoi revocare il consenso deselezionando questa casella. Se attualmente sei in una chiamata, avrà effetto al termine di essa.",
   "<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>Ti va di terminare impostando una password per mantenere il profilo?</0><1>Potrai mantenere il tuo nome e impostare un avatar da usare in chiamate future</1>",
-  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Element Call temporaneamente non è cifrato end-to-end mentre proviamo la scalabilità.",
   "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.": "Se stai riscontrando problemi o semplicemente vuoi dare un'opinione, inviaci una breve descrizione qua sotto.",
   "Not now, return to home screen": "Non ora, torna alla schermata principale",
   "Submitting…": "Invio…",
   "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 altro utente in questa chiamata sta avendo problemi. Per diagnosticare meglio questi problemi, vorremmo raccogliere un registro di debug.",
-  "End-to-end encryption isn't supported on your browser.": "La crittografia end-to-end non è supportata nel tuo browser.",
   "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>": "Cliccando \"Entra in chiamata ora\", accetti il nostro <2>accordo di licenza con l'utente finale (EULA)</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>.": "Partecipando a questa beta, acconsenti alla raccolta di dati anonimi che usiamo per migliorare il prodotto. Puoi trovare più informazioni su quali dati monitoriamo nella nostra <2>informativa sulla privacy</2> e nell'<5>informativa sui cookie</5>.",
   "You": "Tu",

public/locales/lv/app.json

@@ -29,9 +29,6 @@
   "Go": "Aiziet",
   "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.",

public/locales/pl/app.json

@@ -80,17 +80,14 @@
   "How did it go?": "Jak poszło?",
   "{{displayName}} is presenting": "{{displayName}} prezentuje",
   "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ę.",
   "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)",
   "{{count, number}}|other": "{{count, number}}",
   "Encrypted": "Szyfrowane",
   "End call": "Zakończ połączenie",

public/locales/sk/app.json

@@ -83,14 +83,11 @@
   "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é.",
   "{{count, number}}|other": "{{count, number}}",
   "Encrypted": "Šifrované",
   "End call": "Ukončiť hovor",

public/locales/sq/app.json

@@ -0,0 +1 @@
+{}

public/locales/uk/app.json

@@ -83,14 +83,11 @@
   "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.": "Наскрізне шифрування не підтримується вашим переглядачем.",
   "{{count, number}}|other": "{{count, number}}",
   "Encrypted": "Зашифровано",
   "Microphone on": "Мікрофон увімкнено",

public/locales/zh-Hans/app.json

@@ -26,7 +26,7 @@
   "Remove": "移除",
   "Registering…": "正在注册……",
   "Register": "注册",
-  "Recaptcha not loaded": "验证器未载入",
+  "Recaptcha not loaded": "recaptcha未加载",
   "Recaptcha dismissed": "人机验证失败",
   "Profile": "个人信息",
   "Passwords must match": "密码必须匹配",
@@ -49,10 +49,10 @@
   "Go": "开始",
   "Full screen": "全屏",
   "Exit full screen": "退出全屏",
-  "Element Call Home": "Element 呼叫 主页",
+  "Element Call Home": "Element Call主页",
   "Display name": "显示名称",
   "Developer": "开发者",
-  "Debug log request": "请求调试日志",
+  "Debug log request": "调试日志请求",
   "Create account": "创建账户",
   "Copy": "复制",
   "Copied!": "已复制！",
@@ -65,15 +65,15 @@
   "Encrypted": "已加密",
   "End call": "通话结束",
   "Grid": "网格",
-  "Microphone off": "关闭麦克风",
-  "Microphone on": "开启麦克风",
+  "Microphone off": "麦克风关闭",
+  "Microphone on": "麦克风开启",
   "Not encrypted": "未加密",
   "{{count, number}}|one": "{{count, number}}",
   "{{count, number}}|other": "{{count, number}}",
   "Sharing screen": "屏幕共享",
   "You": "你",
   "Continue in browser": "在浏览器中继续",
-  "Mute microphone": "麦克风静音",
+  "Mute microphone": "静音麦克风",
   "Name of call": "通话名称",
   "Open in the app": "在应用中打开",
   "Ready to join?": "准备好加入了吗？",
@@ -87,7 +87,7 @@
   "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.": "现在，通话是端对端加密的，需要从主页创建。这有助于确保每个人都使用相同的加密密钥。",
   "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "您的浏览器不支持媒体端对端加密。支持的浏览器有 Chrome、Safari、Firefox >=117",
   "{{count}} stars|other": "{{count}} 个星",
-  "{{displayName}} is presenting": "{{displayName}} 正在显示",
+  "{{displayName}} is presenting": "{{displayName}}正在展示",
   "{{displayName}}, your call has ended.": "{{displayName}}，通话已结束。",
   "<0>Submitting debug logs will help us track down the problem.</0>": "<0>提交日志以帮助我们修复问题。</0>",
   "<0>We'd love to hear your feedback so we can improve your experience.</0>": "<0>我们需要您的反馈以提升用户体验。</0>",
@@ -95,7 +95,6 @@
   "Expose developer settings in the settings window.": "在设置中显示开发者设置。",
   "Show connection stats": "显示连接统计信息",
   "Thanks, we received your feedback!": "谢谢，我们收到了反馈！",
-  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "在我们测试扩展性时，Element 通话 暂时不进行端对端加密。",
   "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>",
   "{{count}} stars|one": "{{count}} 个星",
@@ -105,9 +104,7 @@
   "Developer Settings": "开发者设置",
   "Feedback": "反馈",
   "Submit": "提交",
-  "Reconnect": "断线重连",
-  "Enable end-to-end encryption (password protected calls)": "启用端对端加密（有密码保护的通话）",
-  "End-to-end encryption isn't supported on your browser.": "您的浏览器不支持端对端加密。",
+  "Reconnect": "重新连接",
   "How did it go?": "进展如何？",
   "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.": "如果遇到问题或想提供一些反馈意见，请在下面向我们发送简短描述。",
   "Retry sending logs": "重传日志",

public/locales/zh-Hant/app.json

@@ -83,14 +83,11 @@
   "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.": "您的瀏覽器不支援端到端加密。",
   "{{count, number}}|one": "{{count, number}}",
   "{{count, number}}|other": "{{count, number}}",
   "Encrypted": "已加密",

src/Glass.tsx

@@ -1,52 +0,0 @@
-/*
-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 {
-  ComponentPropsWithoutRef,
-  ReactNode,
-  forwardRef,
-  Children,
-} from "react";
-import classNames from "classnames";
-
-import styles from "./Glass.module.css";
-
-interface Props extends ComponentPropsWithoutRef<"div"> {
-  children: ReactNode;
-  className?: string;
-  /**
-   * Increases the blur effect.
-   * @default false
-   */
-  frosted?: boolean;
-}
-
-/**
- * Adds a border of glass around a child component.
- */
-export const Glass = forwardRef<HTMLDivElement, Props>(
-  ({ frosted = false, children, className, ...rest }, ref) => (
-    <div
-      ref={ref}
-      className={classNames(className, styles.glass, {
-        [styles.frosted]: frosted,
-      })}
-      {...rest}
-    >
-      {Children.only(children)}
-    </div>
-  ),
-);

src/Modal.tsx

@@ -29,12 +29,11 @@ import { Drawer } from "vaul";
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import CloseIcon from "@vector-im/compound-design-tokens/icons/close.svg?react";
 import classNames from "classnames";
-import { Heading } from "@vector-im/compound-web";
+import { Heading, Glass } from "@vector-im/compound-web";
 
 import styles from "./Modal.module.css";
 import overlayStyles from "./Overlay.module.css";
 import { useMediaQuery } from "./useMediaQuery";
-import { Glass } from "./Glass";
 
 // TODO: Support tabs
 export interface Props extends AriaDialogProps {
@@ -118,7 +117,6 @@ export const Modal: FC<Props> = ({
           />
           <DialogContent asChild {...rest}>
             <Glass
-              frosted
               className={classNames(
                 className,
                 overlayStyles.overlay,

src/UrlParams.ts

@@ -62,6 +62,10 @@ interface UrlParams {
    * Whether to hide the room header when in a call.
    */
   hideHeader: boolean;
+  /**
+   * Whether the controls should be shown. For screen recording no controls can be desired.
+   */
+  showControls: boolean;
   /**
    * Whether to hide the screen-sharing button.
    */
@@ -111,6 +115,16 @@ interface UrlParams {
    * E2EE password
    */
   password: string | null;
+  /**
+   * Whether we the app should use per participant keys for E2EE.
+   */
+  perParticipantE2EE: boolean;
+  /**
+   * Setting this flag skips the lobby and brings you in the call directly.
+   * In the widget this can be combined with preload to pass the device settings
+   * with the join widget action.
+   */
+  skipLobby: boolean;
 }
 
 // This is here as a stopgap, but what would be far nicer is a function that
@@ -195,8 +209,9 @@ export const getUrlParams = (
     appPrompt: parser.getFlagParam("appPrompt", true),
     preload: parser.getFlagParam("preload"),
     hideHeader: parser.getFlagParam("hideHeader"),
+    showControls: parser.getFlagParam("showControls", true),
     hideScreensharing: parser.getFlagParam("hideScreensharing"),
-    e2eEnabled: parser.getFlagParam("enableE2e", true),
+    e2eEnabled: parser.getFlagParam("enableE2EE", true),
     userId: parser.getParam("userId"),
     displayName: parser.getParam("displayName"),
     deviceId: parser.getParam("deviceId"),
@@ -206,6 +221,8 @@ export const getUrlParams = (
     fontScale: Number.isNaN(fontScale) ? null : fontScale,
     analyticsID: parser.getParam("analyticsID"),
     allowIceFallback: parser.getFlagParam("allowIceFallback"),
+    perParticipantE2EE: parser.getFlagParam("perParticipantE2EE"),
+    skipLobby: parser.getFlagParam("skipLobby"),
   };
 };
 

src/button/Button.tsx

@@ -22,8 +22,8 @@ import { useTranslation } from "react-i18next";
 import { Tooltip } from "@vector-im/compound-web";
 import MicOnSolidIcon from "@vector-im/compound-design-tokens/icons/mic-on-solid.svg?react";
 import MicOffSolidIcon from "@vector-im/compound-design-tokens/icons/mic-off-solid.svg?react";
-import VideoCallIcon from "@vector-im/compound-design-tokens/icons/video-call.svg?react";
-import VideoCallOffIcon from "@vector-im/compound-design-tokens/icons/video-call-off.svg?react";
+import VideoCallSolidIcon from "@vector-im/compound-design-tokens/icons/video-call-solid.svg?react";
+import VideoCallOffSolidIcon from "@vector-im/compound-design-tokens/icons/video-call-off-solid.svg?react";
 import EndCallIcon from "@vector-im/compound-design-tokens/icons/end-call.svg?react";
 import ShareScreenSolidIcon from "@vector-im/compound-design-tokens/icons/share-screen-solid.svg?react";
 import SettingsSolidIcon from "@vector-im/compound-design-tokens/icons/settings-solid.svg?react";
@@ -159,7 +159,7 @@ export const VideoButton: FC<{
   [index: string]: unknown;
 }> = ({ muted, ...rest }) => {
   const { t } = useTranslation();
-  const Icon = muted ? VideoCallOffIcon : VideoCallIcon;
+  const Icon = muted ? VideoCallOffSolidIcon : VideoCallSolidIcon;
   const label = muted ? t("Start video") : t("Stop video");
 
   return (

src/button/InviteButton.tsx

@@ -17,14 +17,14 @@ limitations under the License.
 import { ComponentPropsWithoutRef, FC } from "react";
 import { Button } from "@vector-im/compound-web";
 import { useTranslation } from "react-i18next";
-import UserAddSolidIcon from "@vector-im/compound-design-tokens/icons/user-add-solid.svg?react";
+import UserAddIcon from "@vector-im/compound-design-tokens/icons/user-add.svg?react";
 
 export const InviteButton: FC<
   Omit<ComponentPropsWithoutRef<"button">, "children">
 > = (props) => {
   const { t } = useTranslation();
   return (
-    <Button kind="secondary" size="sm" Icon={UserAddSolidIcon} {...props}>
+    <Button kind="secondary" size="sm" Icon={UserAddIcon} {...props}>
       {t("Invite")}
     </Button>
   );

src/e2ee/e2eeType.ts

@@ -5,7 +5,7 @@ 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
+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,
@@ -14,18 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.glass {
-  border-radius: 36px;
-  padding: 11px;
-  border: 1px solid var(--cpd-color-alpha-gray-400);
-  background: var(--cpd-color-alpha-gray-400);
-  backdrop-filter: blur(10px);
-}
-
-.glass > * {
-  border-radius: 24px;
-}
-
-.glass.frosted {
-  backdrop-filter: blur(20px);
+export enum E2eeType {
+  NONE = 0,
+  PER_PARTICIPANT = 1,
+  SHARED_KEY = 2,
 }

src/e2ee/matrixKeyProvider.ts

@@ -0,0 +1,73 @@
+/*
+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 { BaseKeyProvider, createKeyMaterialFromBuffer } from "livekit-client";
+import { logger } from "matrix-js-sdk/src/logger";
+import {
+  MatrixRTCSession,
+  MatrixRTCSessionEvent,
+} from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+
+export class MatrixKeyProvider extends BaseKeyProvider {
+  private rtcSession?: MatrixRTCSession;
+
+  public constructor() {
+    super({ ratchetWindowSize: 0 });
+  }
+
+  public setRTCSession(rtcSession: MatrixRTCSession): void {
+    if (this.rtcSession) {
+      this.rtcSession.off(
+        MatrixRTCSessionEvent.EncryptionKeyChanged,
+        this.onEncryptionKeyChanged,
+      );
+    }
+
+    this.rtcSession = rtcSession;
+
+    this.rtcSession.on(
+      MatrixRTCSessionEvent.EncryptionKeyChanged,
+      this.onEncryptionKeyChanged,
+    );
+
+    // The new session could be aware of keys of which the old session wasn't,
+    // so emit a key changed event.
+    for (const [
+      participant,
+      encryptionKeys,
+    ] of this.rtcSession.getEncryptionKeys()) {
+      for (const [index, encryptionKey] of encryptionKeys.entries()) {
+        this.onEncryptionKeyChanged(encryptionKey, index, participant);
+      }
+    }
+  }
+
+  private onEncryptionKeyChanged = async (
+    encryptionKey: Uint8Array,
+    encryptionKeyIndex: number,
+    participantId: string,
+  ): Promise<void> => {
+    this.onSetEncryptionKey(
+      await createKeyMaterialFromBuffer(encryptionKey),
+      participantId,
+      encryptionKeyIndex,
+    );
+
+    logger.debug(
+      `Sent new key to livekit room=${this.rtcSession?.room.roomId} participantId=${participantId} encryptionKeyIndex=${encryptionKeyIndex}`,
+    );
+  };
+}

src/home/RegisteredView.tsx

@@ -40,6 +40,7 @@ import { Caption } from "../typography/Typography";
 import { Form } from "../form/Form";
 import { useOptInAnalytics } from "../settings/useSetting";
 import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
+import { E2eeType } from "../e2ee/e2eeType";
 
 interface Props {
   client: MatrixClient;
@@ -72,7 +73,11 @@ export const RegisteredView: FC<Props> = ({ client }) => {
         setError(undefined);
         setLoading(true);
 
-        const createRoomResult = await createRoom(client, roomName, true);
+        const createRoomResult = await createRoom(
+          client,
+          roomName,
+          E2eeType.SHARED_KEY,
+        );
 
         history.push(
           getRelativeRoomUrl(

src/home/UnauthenticatedView.tsx

@@ -43,6 +43,7 @@ import { generateRandomName } from "../auth/generateRandomName";
 import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
 import { useOptInAnalytics } from "../settings/useSetting";
 import { Config } from "../config/Config";
+import { E2eeType } from "../e2ee/e2eeType";
 
 export const UnauthenticatedView: FC = () => {
   const { setClient } = useClient();
@@ -84,7 +85,11 @@ export const UnauthenticatedView: FC = () => {
 
         let createRoomResult;
         try {
-          createRoomResult = await createRoom(client, roomName, true);
+          createRoomResult = await createRoom(
+            client,
+            roomName,
+            E2eeType.SHARED_KEY,
+          );
         } catch (error) {
           if (!setClient) {
             throw error;

src/initializer.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Integrations } from "@sentry/tracing";
+import { BrowserTracing } from "@sentry/browser";
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
@@ -160,7 +160,7 @@ export class Initializer {
           dsn: Config.get().sentry?.DSN,
           environment: Config.get().sentry?.environment,
           integrations: [
-            new Integrations.BrowserTracing({
+            new BrowserTracing({
               routingInstrumentation:
                 Sentry.reactRouterV5Instrumentation(history),
             }),

src/livekit/useECConnectionState.ts

@@ -17,12 +17,14 @@ limitations under the License.
 import {
   AudioCaptureOptions,
   ConnectionState,
+  LocalTrack,
   Room,
   RoomEvent,
   Track,
 } from "livekit-client";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
+import * as Sentry from "@sentry/react";
 
 import { SFUConfig, sfuConfigEquals } from "./openIDSFU";
 
@@ -54,8 +56,6 @@ async function doConnect(
   audioEnabled: boolean,
   audioOptions: AudioCaptureOptions,
 ): Promise<void> {
-  await livekitRoom!.connect(sfuConfig!.url, sfuConfig!.jwt);
-
   // Always create an audio track manually.
   // livekit (by default) keeps the mic track open when you mute, but if you start muted,
   // doesn't publish it until you unmute. We want to publish it from the start so we're
@@ -65,6 +65,9 @@ async function doConnect(
     logger.warn(
       "Pre-creating audio track but participant already appears to have an microphone track: this shouldn't happen!",
     );
+    Sentry.captureMessage(
+      "Pre-creating audio track but participant already appears to have an microphone track!",
+    );
     return;
   }
 
@@ -78,15 +81,60 @@ async function doConnect(
   }
   if (!audioEnabled) await audioTracks[0].mute();
 
+  logger.info("Pre-created microphone track");
+
   // check again having awaited for the track to create
   if (livekitRoom!.localParticipant.getTrack(Track.Source.Microphone)) {
     logger.warn(
       "Publishing pre-created audio track but participant already appears to have an microphone track: this shouldn't happen!",
     );
+    for (const t of audioTracks) {
+      t.stop();
+    }
     return;
   }
-  logger.info("Publishing pre-created mic track");
-  await livekitRoom?.localParticipant.publishTrack(audioTracks[0]);
+
+  logger.info("Connecting & publishing");
+  try {
+    await connectAndPublish(livekitRoom, sfuConfig, audioTracks[0], []);
+  } catch (e) {
+    for (const t of audioTracks) {
+      t.stop();
+    }
+  }
+}
+
+/**
+ * Connect to the SFU and publish specific tracks, if provided.
+ * This is very specific to what we need to do: for instance, we don't
+ * currently have a need to prepublish video tracks. We just prepublish
+ * a mic track at the start of a call and copy any srceenshare tracks over
+ * when switching focus (because we can't re-acquire them without the user
+ * going through the dialog to choose them again).
+ */
+async function connectAndPublish(
+  livekitRoom: Room,
+  sfuConfig: SFUConfig,
+  micTrack: LocalTrack | undefined,
+  screenshareTracks: MediaStreamTrack[],
+): Promise<void> {
+  await livekitRoom!.connect(sfuConfig!.url, sfuConfig!.jwt);
+
+  if (micTrack) {
+    logger.info(`Publishing precreated mic track`);
+    await livekitRoom.localParticipant.publishTrack(micTrack, {
+      source: Track.Source.Microphone,
+    });
+  }
+
+  logger.info(
+    `Publishing ${screenshareTracks.length} precreated screenshare tracks`,
+  );
+  for (const st of screenshareTracks) {
+    livekitRoom.localParticipant.publishTrack(st, {
+      source: Track.Source.ScreenShare,
+    });
+  }
 }
 
 export function useECConnectionState(
@@ -122,6 +170,33 @@ export function useECConnectionState(
     };
   }, [livekitRoom, onConnStateChanged]);
 
+  const doFocusSwitch = useCallback(async (): Promise<void> => {
+    const screenshareTracks: MediaStreamTrack[] = [];
+    for (const t of livekitRoom!.localParticipant.videoTracks.values()) {
+      if (t.track && t.source == Track.Source.ScreenShare) {
+        const newTrack = t.track.mediaStreamTrack.clone();
+        newTrack.enabled = true;
+        screenshareTracks.push(newTrack);
+      }
+    }
+
+    // Flag that we're currently switching focus. This will get reset when the
+    // connection state changes back to connected in onConnStateChanged above.
+    setSwitchingFocus(true);
+    await livekitRoom?.disconnect();
+    setIsInDoConnect(true);
+    try {
+      await connectAndPublish(
+        livekitRoom!,
+        sfuConfig!,
+        undefined,
+        screenshareTracks,
+      );
+    } finally {
+      setIsInDoConnect(false);
+    }
+  }, [livekitRoom, sfuConfig]);
+
   const currentSFUConfig = useRef(Object.assign({}, sfuConfig));
 
   // Id we are transitioning from a valid config to another valid one, we need
@@ -136,21 +211,7 @@ export function useECConnectionState(
         `SFU config changed! URL was ${currentSFUConfig.current?.url} now ${sfuConfig?.url}`,
       );
 
-      (async (): Promise<void> => {
-        setSwitchingFocus(true);
-        await livekitRoom?.disconnect();
-        setIsInDoConnect(true);
-        try {
-          await doConnect(
-            livekitRoom!,
-            sfuConfig!,
-            initialAudioEnabled,
-            initialAudioOptions,
-          );
-        } finally {
-          setIsInDoConnect(false);
-        }
-      })();
+      doFocusSwitch();
     } else if (
       !sfuConfigValid(currentSFUConfig.current) &&
       sfuConfigValid(sfuConfig)
@@ -171,7 +232,13 @@ export function useECConnectionState(
     }
 
     currentSFUConfig.current = Object.assign({}, sfuConfig);
-  }, [sfuConfig, livekitRoom, initialAudioOptions, initialAudioEnabled]);
+  }, [
+    sfuConfig,
+    livekitRoom,
+    initialAudioOptions,
+    initialAudioEnabled,
+    doFocusSwitch,
+  ]);
 
   // Because we create audio tracks by hand, there's more to connecting than
   // just what LiveKit does in room.connect, and we should continue to return

src/livekit/useLiveKit.ts

@@ -22,10 +22,10 @@ import {
   RoomOptions,
   Track,
 } from "livekit-client";
-import { useLiveKitRoom } from "@livekit/components-react";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import E2EEWorker from "livekit-client/e2ee-worker?worker";
 import { logger } from "matrix-js-sdk/src/logger";
+import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 
 import { defaultLiveKitOptions } from "./options";
 import { SFUConfig } from "./openIDSFU";
@@ -39,9 +39,12 @@ import {
   ECConnectionState,
   useECConnectionState,
 } from "./useECConnectionState";
+import { MatrixKeyProvider } from "../e2ee/matrixKeyProvider";
+import { E2eeType } from "../e2ee/e2eeType";
 
 export type E2EEConfig = {
-  sharedKey: string;
+  mode: E2eeType;
+  sharedKey?: string;
 };
 
 interface UseLivekitResult {
@@ -50,26 +53,44 @@ interface UseLivekitResult {
 }
 
 export function useLiveKit(
+  rtcSession: MatrixRTCSession,
   muteStates: MuteStates,
-  sfuConfig?: SFUConfig,
-  e2eeConfig?: E2EEConfig,
+  sfuConfig: SFUConfig | undefined,
+  e2eeConfig: E2EEConfig,
 ): UseLivekitResult {
-  const e2eeOptions = useMemo(() => {
-    if (!e2eeConfig?.sharedKey) return undefined;
+  const e2eeOptions = useMemo((): E2EEOptions | undefined => {
+    if (e2eeConfig.mode === E2eeType.NONE) return undefined;
 
-    return {
-      keyProvider: new ExternalE2EEKeyProvider(),
-      worker: new E2EEWorker(),
-    } as E2EEOptions;
+    if (e2eeConfig.mode === E2eeType.PER_PARTICIPANT) {
+      return {
+        keyProvider: new MatrixKeyProvider(),
+        worker: new E2EEWorker(),
+      };
+    } else if (
+      e2eeConfig.mode === E2eeType.SHARED_KEY &&
+      e2eeConfig.sharedKey
+    ) {
+      return {
+        keyProvider: new ExternalE2EEKeyProvider(),
+        worker: new E2EEWorker(),
+      };
+    }
   }, [e2eeConfig]);
 
   useEffect(() => {
-    if (!e2eeConfig?.sharedKey || !e2eeOptions) return;
+    if (e2eeConfig.mode === E2eeType.NONE || !e2eeOptions) return;
 
-    (e2eeOptions.keyProvider as ExternalE2EEKeyProvider).setKey(
-      e2eeConfig?.sharedKey,
-    );
-  }, [e2eeOptions, e2eeConfig?.sharedKey]);
+    if (e2eeConfig.mode === E2eeType.PER_PARTICIPANT) {
+      (e2eeOptions.keyProvider as MatrixKeyProvider).setRTCSession(rtcSession);
+    } else if (
+      e2eeConfig.mode === E2eeType.SHARED_KEY &&
+      e2eeConfig.sharedKey
+    ) {
+      (e2eeOptions.keyProvider as ExternalE2EEKeyProvider).setKey(
+        e2eeConfig.sharedKey,
+      );
+    }
+  }, [e2eeOptions, e2eeConfig, rtcSession]);
 
   const initialMuteStates = useRef<MuteStates>(muteStates);
   const devices = useMediaDevices();
@@ -96,11 +117,6 @@ export function useLiveKit(
     [e2eeOptions],
   );
 
-  // useECConnectionState creates and publishes an audio track by hand. To keep
-  // this from racing with LiveKit's automatic creation of the audio track, we
-  // block audio from being enabled until the connection is finished.
-  const [blockAudio, setBlockAudio] = useState(true);
-
   // Store if audio/video are currently updating. If to prohibit unnecessary calls
   // to setMicrophoneEnabled/setCameraEnabled
   const audioMuteUpdating = useRef(false);
@@ -115,15 +131,11 @@ export function useLiveKit(
   // 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,
-    serverUrl: sfuConfig?.url,
-    audio: initialMuteStates.current.audio.enabled && !blockAudio,
-    video: initialMuteStates.current.video.enabled,
-    room: roomWithoutProps,
-    connect: false,
-  });
+  const room = useMemo(() => {
+    const r = new Room(roomOptions);
+    r.setE2EEEnabled(e2eeConfig.mode !== E2eeType.NONE);
+    return r;
+  }, [roomOptions, e2eeConfig]);
 
   const connectionState = useECConnectionState(
     {
@@ -134,11 +146,6 @@ export function useLiveKit(
     sfuConfig,
   );
 
-  // Unblock audio once the connection is finished
-  useEffect(() => {
-    if (connectionState === ConnectionState.Connected) setBlockAudio(false);
-  }, [connectionState, setBlockAudio]);
-
   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
@@ -154,52 +161,101 @@ export function useLiveKit(
         audio: muteStates.audio.enabled,
         video: muteStates.video.enabled,
       };
-      const syncMuteStateAudio = async (): Promise<void> => {
-        if (
-          participant.isMicrophoneEnabled !== buttonEnabled.current.audio &&
-          !audioMuteUpdating.current
-        ) {
-          audioMuteUpdating.current = true;
+
+      enum MuteDevice {
+        Microphone,
+        Camera,
+      }
+
+      const syncMuteState = async (
+        iterCount: number,
+        type: MuteDevice,
+      ): Promise<void> => {
+        // The approach for muting is to always bring the actual livekit state in sync with the button
+        // This allows for a very predictable and reactive behavior for the user.
+        // (the new state is the old state when pressing the button n times (where n is even))
+        // (the new state is different to the old state when pressing the button n times (where n is uneven))
+        // In case there are issues with the device there might be situations where setMicrophoneEnabled/setCameraEnabled
+        // return immediately. This should be caught with the Error("track with new mute state could not be published").
+        // For now we are still using an iterCount to limit the recursion loop to 10.
+        // This could happen if the device just really does not want to turn on (hardware based issue)
+        // but the mute button is in unmute state.
+        // For now our fail mode is to just stay in this state.
+        // TODO: decide for a UX on how that fail mode should be treated (disable button, hide button, sync button back to muted without user input)
+
+        if (iterCount > 10) {
+          logger.error(
+            "Stop trying to sync the input device with current mute state after 10 failed tries",
+          );
+          return;
+        }
+        let devEnabled;
+        let btnEnabled;
+        let updating;
+        switch (type) {
+          case MuteDevice.Microphone:
+            devEnabled = participant.isMicrophoneEnabled;
+            btnEnabled = buttonEnabled.current.audio;
+            updating = audioMuteUpdating.current;
+            break;
+          case MuteDevice.Camera:
+            devEnabled = participant.isCameraEnabled;
+            btnEnabled = buttonEnabled.current.video;
+            updating = videoMuteUpdating.current;
+            break;
+        }
+        if (devEnabled !== btnEnabled && !updating) {
           try {
-            await participant.setMicrophoneEnabled(buttonEnabled.current.audio);
+            let trackPublication;
+            switch (type) {
+              case MuteDevice.Microphone:
+                audioMuteUpdating.current = true;
+                trackPublication = await participant.setMicrophoneEnabled(
+                  buttonEnabled.current.audio,
+                );
+                audioMuteUpdating.current = false;
+                break;
+              case MuteDevice.Camera:
+                videoMuteUpdating.current = true;
+                trackPublication = await participant.setCameraEnabled(
+                  buttonEnabled.current.video,
+                );
+                videoMuteUpdating.current = false;
+                break;
+            }
+
+            if (trackPublication) {
+              // await participant.setMicrophoneEnabled can return immediately in some instances,
+              // so that participant.isMicrophoneEnabled !== buttonEnabled.current.audio still holds true.
+              // This happens if the device is still in a pending state
+              // "sleeping" here makes sure we let react do its thing so that participant.isMicrophoneEnabled is updated,
+              // so we do not end up in a recursion loop.
+              await new Promise((r) => setTimeout(r, 100));
+
+              // track got successfully changed to mute/unmute
+              // Run the check again after the change is done. Because the user
+              // can update the state (presses mute button) while the device is enabling
+              // itself we need might need to update the mute state right away.
+              // This async recursion makes sure that setCamera/MicrophoneEnabled is
+              // called as little times as possible.
+              syncMuteState(iterCount + 1, type);
+            } else {
+              throw new Error(
+                "track with new mute state could not be published",
+              );
+            }
           } catch (e) {
-            logger.error("Failed to sync audio mute state with LiveKit", e);
+            logger.error(
+              "Failed to sync audio mute state with LiveKit (will retry to sync in 1s):",
+              e,
+            );
+            setTimeout(() => syncMuteState(iterCount + 1, type), 1000);
           }
-          audioMuteUpdating.current = false;
-          // await participant.setMicrophoneEnabled can return immediately in some instances,
-          // so that participant.isMicrophoneEnabled !== buttonEnabled.current.audio still holds true.
-          // This happens if the device is still in a pending state
-          // "sleeping" here makes sure we let react do its thing so that participant.isMicrophoneEnabled is updated,
-          // so we do not end up in a recursion loop.
-          await new Promise((r) => setTimeout(r, 20));
-          // Run the check again after the change is done. Because the user
-          // can update the state (presses mute button) while the device is enabling
-          // itself we need might need to update the mute state right away.
-          // This async recursion makes sure that setCamera/MicrophoneEnabled is
-          // called as little times as possible.
-          syncMuteStateAudio();
         }
       };
-      const syncMuteStateVideo = async (): Promise<void> => {
-        if (
-          participant.isCameraEnabled !== buttonEnabled.current.video &&
-          !videoMuteUpdating.current
-        ) {
-          videoMuteUpdating.current = true;
-          try {
-            await participant.setCameraEnabled(buttonEnabled.current.video);
-          } catch (e) {
-            logger.error("Failed to sync audio mute state with LiveKit", e);
-          }
-          videoMuteUpdating.current = false;
-          // see above
-          await new Promise((r) => setTimeout(r, 20));
-          // see above
-          syncMuteStateVideo();
-        }
-      };
-      syncMuteStateAudio();
-      syncMuteStateVideo();
+
+      syncMuteState(0, MuteDevice.Microphone);
+      syncMuteState(0, MuteDevice.Camera);
     }
   }, [room, muteStates, connectionState]);
 

src/matrix-utils.ts

@@ -28,6 +28,7 @@ import {
   GroupCallIntent,
   GroupCallType,
 } from "matrix-js-sdk/src/webrtc/groupCall";
+import { secureRandomBase64Url } from "matrix-js-sdk/src/randomstring";
 
 import type { MatrixClient } from "matrix-js-sdk/src/client";
 import type { Room } from "matrix-js-sdk/src/models/room";
@@ -37,6 +38,7 @@ import { loadOlm } from "./olm";
 import { Config } from "./config/Config";
 import { setLocalStorageItem } from "./useLocalStorage";
 import { getRoomSharedKeyLocalStorageKey } from "./e2ee/sharedKeyManagement";
+import { E2eeType } from "./e2ee/e2eeType";
 
 export const fallbackICEServerAllowed =
   import.meta.env.VITE_FALLBACK_STUN_ALLOWED === "true";
@@ -73,23 +75,6 @@ function waitForSync(client: MatrixClient): Promise<void> {
   });
 }
 
-function secureRandomString(entropyBytes: number): string {
-  const key = new Uint8Array(entropyBytes);
-  crypto.getRandomValues(key);
-  // encode to base64url as this value goes into URLs
-  // base64url is just base64 with thw two non-alphanum characters swapped out for
-  // ones that can be put in a URL without encoding. Browser JS has a native impl
-  // for base64 encoding but only a string (there isn't one that takes a UInt8Array
-  // yet) so just use the built-in one and convert, replace the chars and strip the
-  // padding from the end (otherwise we'd need to pull in another dependency).
-  return btoa(
-    key.reduce((acc, current) => acc + String.fromCharCode(current), ""),
-  )
-    .replace("+", "-")
-    .replace("/", "_")
-    .replace(/=*$/, "");
-}
-
 /**
  * Initialises and returns a new standalone Matrix Client.
  * If true is passed for the 'restore' parameter, a check will be made
@@ -294,10 +279,20 @@ interface CreateRoomResult {
   password?: string;
 }
 
+/**
+ * Create a new room ready for calls
+ *
+ * @param client Matrix client to use
+ * @param name The name of the room
+ * @param e2ee The type of e2ee call to create. Note that we would currently never
+ *             create a room for per-participant e2ee calls: since it's used in
+ *             embedded mode, we use the existing room.
+ * @returns Object holding information about the new room
+ */
 export async function createRoom(
   client: MatrixClient,
   name: string,
-  e2ee: boolean,
+  e2ee: E2eeType,
 ): Promise<CreateRoomResult> {
   logger.log(`Creating room for group call`);
   const createPromise = client.createRoom({
@@ -362,8 +357,8 @@ export async function createRoom(
   );
 
   let password;
-  if (e2ee) {
-    password = secureRandomString(16);
+  if (e2ee == E2eeType.SHARED_KEY) {
+    password = secureRandomBase64Url(16);
     setLocalStorageItem(
       getRoomSharedKeyLocalStorageKey(result.room_id),
       password,

src/room/GroupCallView.tsx

@@ -44,6 +44,9 @@ import { useRoomAvatar } from "./useRoomAvatar";
 import { useRoomName } from "./useRoomName";
 import { useJoinRule } from "./useJoinRule";
 import { InviteModal } from "./InviteModal";
+import { E2EEConfig } from "../livekit/useLiveKit";
+import { useUrlParams } from "../UrlParams";
+import { E2eeType } from "../e2ee/e2eeType";
 
 declare global {
   interface Window {
@@ -56,6 +59,7 @@ interface Props {
   isPasswordlessUser: boolean;
   confineToRoom: boolean;
   preload: boolean;
+  skipLobby: boolean;
   hideHeader: boolean;
   rtcSession: MatrixRTCSession;
 }
@@ -65,6 +69,7 @@ export const GroupCallView: FC<Props> = ({
   isPasswordlessUser,
   confineToRoom,
   preload,
+  skipLobby,
   hideHeader,
   rtcSession,
 }) => {
@@ -85,6 +90,7 @@ export const GroupCallView: FC<Props> = ({
   const roomName = useRoomName(rtcSession.room);
   const roomAvatar = useRoomAvatar(rtcSession.room);
   const roomEncrypted = useIsRoomE2EE(rtcSession.room.roomId)!;
+  const { perParticipantE2EE } = useUrlParams();
 
   const matrixInfo = useMemo((): MatrixInfo => {
     return {
@@ -122,80 +128,80 @@ export const GroupCallView: FC<Props> = ({
   latestMuteStates.current = muteStates;
 
   useEffect(() => {
+    // this effect is only if we don't want to show the lobby (skipLobby = true)
+    if (!skipLobby) return;
+
+    const defaultDeviceSetup = async (
+      requestedDeviceData: JoinCallData,
+    ): Promise<void> => {
+      // 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 } = requestedDeviceData;
+      if (audioInput === null) {
+        latestMuteStates.current!.audio.setEnabled?.(false);
+      } else {
+        const deviceId = await findDeviceByName(
+          audioInput,
+          "audioinput",
+          devices,
+        );
+        if (!deviceId) {
+          logger.warn("Unknown audio input: " + audioInput);
+          latestMuteStates.current!.audio.setEnabled?.(false);
+        } else {
+          logger.debug(
+            `Found audio input ID ${deviceId} for name ${audioInput}`,
+          );
+          latestDevices.current!.audioInput.select(deviceId);
+          latestMuteStates.current!.audio.setEnabled?.(true);
+        }
+      }
+
+      if (videoInput === null) {
+        latestMuteStates.current!.video.setEnabled?.(false);
+      } else {
+        const deviceId = await findDeviceByName(
+          videoInput,
+          "videoinput",
+          devices,
+        );
+        if (!deviceId) {
+          logger.warn("Unknown video input: " + videoInput);
+          latestMuteStates.current!.video.setEnabled?.(false);
+        } else {
+          logger.debug(
+            `Found video input ID ${deviceId} for name ${videoInput}`,
+          );
+          latestDevices.current!.videoInput.select(deviceId);
+          latestMuteStates.current!.video.setEnabled?.(true);
+        }
+      }
+    };
     if (widget && preload) {
       // In preload mode, wait for a join action before entering
       const onJoin = async (
         ev: CustomEvent<IWidgetApiRequest>,
       ): Promise<void> => {
-        // 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;
-
-        if (audioInput === null) {
-          latestMuteStates.current!.audio.setEnabled?.(false);
-        } else {
-          const deviceId = await findDeviceByName(
-            audioInput,
-            "audioinput",
-            devices,
-          );
-          if (!deviceId) {
-            logger.warn("Unknown audio input: " + audioInput);
-            latestMuteStates.current!.audio.setEnabled?.(false);
-          } else {
-            logger.debug(
-              `Found audio input ID ${deviceId} for name ${audioInput}`,
-            );
-            latestDevices.current!.audioInput.select(deviceId);
-            latestMuteStates.current!.audio.setEnabled?.(true);
-          }
-        }
-
-        if (videoInput === null) {
-          latestMuteStates.current!.video.setEnabled?.(false);
-        } else {
-          const deviceId = await findDeviceByName(
-            videoInput,
-            "videoinput",
-            devices,
-          );
-          if (!deviceId) {
-            logger.warn("Unknown video input: " + videoInput);
-            latestMuteStates.current!.video.setEnabled?.(false);
-          } else {
-            logger.debug(
-              `Found video input ID ${deviceId} for name ${videoInput}`,
-            );
-            latestDevices.current!.videoInput.select(deviceId);
-            latestMuteStates.current!.video.setEnabled?.(true);
-          }
-        }
-
-        enterRTCSession(rtcSession);
-
-        PosthogAnalytics.instance.eventCallEnded.cacheStartCall(new Date());
-        // we only have room sessions right now, so call ID is the emprty string - we use the room ID
-        PosthogAnalytics.instance.eventCallStarted.track(
-          rtcSession.room.roomId,
-        );
-
+        defaultDeviceSetup(ev.detail.data as unknown as JoinCallData);
+        enterRTCSession(rtcSession, perParticipantE2EE);
         await Promise.all([
           widget!.api.setAlwaysOnScreen(true),
           widget!.api.transport.reply(ev.detail, {}),
         ]);
       };
-
       widget.lazyActions.on(ElementWidgetActions.JoinCall, onJoin);
       return () => {
         widget!.lazyActions.off(ElementWidgetActions.JoinCall, onJoin);
       };
+    } else {
+      // if we don't use preload and only skipLobby we enter the rtc session right away
+      defaultDeviceSetup({ audioInput: null, videoInput: null });
+      enterRTCSession(rtcSession, perParticipantE2EE);
     }
-  }, [rtcSession, preload]);
+  }, [rtcSession, preload, skipLobby, perParticipantE2EE]);
 
   const [left, setLeft] = useState(false);
   const [leaveError, setLeaveError] = useState<Error | undefined>(undefined);
@@ -216,17 +222,6 @@ export const GroupCallView: FC<Props> = ({
       );
 
       await leaveRTCSession(rtcSession);
-      if (widget) {
-        // we need to wait until the callEnded event is tracked on posthog.
-        // Otherwise the iFrame gets killed before the callEnded event got tracked.
-        await new Promise((resolve) => window.setTimeout(resolve, 10)); // 10ms
-        widget.api.setAlwaysOnScreen(false);
-        PosthogAnalytics.instance.logout();
-
-        // we will always send the hangup event after the memberships have been updated
-        // calling leaveRTCSession.
-        widget.api.transport.send(ElementWidgetActions.HangupCall, {});
-      }
 
       if (
         !isPasswordlessUser &&
@@ -244,9 +239,8 @@ export const GroupCallView: FC<Props> = ({
       const onHangup = async (
         ev: CustomEvent<IWidgetApiRequest>,
       ): Promise<void> => {
-        leaveRTCSession(rtcSession);
         widget!.api.transport.reply(ev.detail, {});
-        widget!.api.setAlwaysOnScreen(false);
+        await leaveRTCSession(rtcSession);
       };
       widget.lazyActions.once(ElementWidgetActions.HangupCall, onHangup);
       return () => {
@@ -255,16 +249,21 @@ export const GroupCallView: FC<Props> = ({
     }
   }, [isJoined, rtcSession]);
 
-  const e2eeConfig = useMemo(
-    () => (e2eeSharedKey ? { sharedKey: e2eeSharedKey } : undefined),
-    [e2eeSharedKey],
-  );
+  const e2eeConfig = useMemo((): E2EEConfig => {
+    if (perParticipantE2EE) {
+      return { mode: E2eeType.PER_PARTICIPANT };
+    } else if (e2eeSharedKey) {
+      return { mode: E2eeType.SHARED_KEY, sharedKey: e2eeSharedKey };
+    } else {
+      return { mode: E2eeType.NONE };
+    }
+  }, [perParticipantE2EE, e2eeSharedKey]);
 
   const onReconnect = useCallback(() => {
     setLeft(false);
     setLeaveError(undefined);
-    enterRTCSession(rtcSession);
-  }, [rtcSession]);
+    enterRTCSession(rtcSession, perParticipantE2EE);
+  }, [rtcSession, perParticipantE2EE]);
 
   const joinRule = useJoinRule(rtcSession.room);
 
@@ -290,7 +289,7 @@ export const GroupCallView: FC<Props> = ({
 
   const { t } = useTranslation();
 
-  if (isRoomE2EE && !e2eeSharedKey) {
+  if (isRoomE2EE && !perParticipantE2EE && !e2eeSharedKey) {
     return (
       <ErrorView
         error={
@@ -380,7 +379,7 @@ export const GroupCallView: FC<Props> = ({
           client={client}
           matrixInfo={matrixInfo}
           muteStates={muteStates}
-          onEnter={(): void => enterRTCSession(rtcSession)}
+          onEnter={(): void => enterRTCSession(rtcSession, perParticipantE2EE)}
           confineToRoom={confineToRoom}
           hideHeader={hideHeader}
           participantCount={participantCount}

src/room/InCallView.module.css

@@ -98,3 +98,12 @@ limitations under the License.
     gap: var(--cpd-space-4x);
   }
 }
+
+.footerThin {
+  padding-top: var(--cpd-space-3x);
+  padding-bottom: var(--cpd-space-5x);
+}
+
+.footerHidden {
+  display: none;
+}

src/room/InCallView.tsx

@@ -41,6 +41,7 @@ import { useTranslation } from "react-i18next";
 import useMeasure from "react-use-measure";
 import { logger } from "matrix-js-sdk/src/logger";
 import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+import classNames from "classnames";
 
 import LogoMark from "../icons/LogoMark.svg?react";
 import LogoType from "../icons/LogoType.svg?react";
@@ -94,12 +95,13 @@ const POST_FOCUS_PARTICIPANT_UPDATE_DELAY_MS = 3000;
 
 export interface ActiveCallProps
   extends Omit<InCallViewProps, "livekitRoom" | "connState"> {
-  e2eeConfig?: E2EEConfig;
+  e2eeConfig: E2EEConfig;
 }
 
 export const ActiveCall: FC<ActiveCallProps> = (props) => {
   const sfuConfig = useOpenIDSFU(props.client, props.rtcSession);
   const { livekitRoom, connState } = useLiveKit(
+    props.rtcSession,
     props.muteStates,
     sfuConfig,
     props.e2eeConfig,
@@ -109,10 +111,6 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
     return null;
   }
 
-  if (props.e2eeConfig && !livekitRoom.isE2EEEnabled) {
-    livekitRoom.setE2EEEnabled(!!props.e2eeConfig);
-  }
-
   return (
     <RoomContext.Provider value={livekitRoom}>
       <InCallView {...props} livekitRoom={livekitRoom} connState={connState} />
@@ -177,7 +175,7 @@ export const InCallView: FC<InCallViewProps> = ({
 
   const [showConnectionStats] = useShowConnectionStats();
 
-  const { hideScreensharing } = useUrlParams();
+  const { hideScreensharing, showControls } = useUrlParams();
 
   const { isScreenShareEnabled, localParticipant } = useLocalParticipant({
     room: livekitRoom,
@@ -202,8 +200,12 @@ export const InCallView: FC<InCallViewProps> = ({
   );
 
   const onLeavePress = useCallback(() => {
+    // Disconnect from the room. We don't do this in onLeave because that's
+    // also called on an unintentional disconnect. Plus we don't have the
+    // livekit room in onLeave anyway.
+    livekitRoom.disconnect();
     onLeave();
-  }, [onLeave]);
+  }, [livekitRoom, onLeave]);
 
   useEffect(() => {
     widget?.api.transport.send(
@@ -387,7 +389,15 @@ export const InCallView: FC<InCallViewProps> = ({
       />,
     );
     footer = (
-      <div className={styles.footer}>
+      <div
+        className={classNames(
+          showControls
+            ? styles.footer
+            : hideHeader
+            ? [styles.footer, styles.footerHidden]
+            : [styles.footer, styles.footerThin],
+        )}
+      >
         {!mobile && !hideHeader && (
           <div className={styles.logo}>
             <LogoMark width={24} height={24} aria-hidden />
@@ -398,8 +408,8 @@ export const InCallView: FC<InCallViewProps> = ({
             />
           </div>
         )}
-        <div className={styles.buttons}>{buttons}</div>
-        {!mobile && !hideHeader && (
+        {showControls && <div className={styles.buttons}>{buttons}</div>}
+        {!mobile && !hideHeader && showControls && (
           <LayoutToggle
             className={styles.layout}
             layout={layout}
@@ -424,7 +434,7 @@ export const InCallView: FC<InCallViewProps> = ({
             />
           </LeftNav>
           <RightNav>
-            {!reducedControls && onShareClick !== null && (
+            {!reducedControls && showControls && onShareClick !== null && (
               <InviteButton onClick={onShareClick} />
             )}
           </RightNav>

src/room/LayoutToggle.tsx

@@ -17,8 +17,8 @@ limitations under the License.
 import { ChangeEvent, FC, useCallback, useId } from "react";
 import { useTranslation } from "react-i18next";
 import { Tooltip } from "@vector-im/compound-web";
-import SpotlightViewIcon from "@vector-im/compound-design-tokens/icons/spotlight-view.svg?react";
-import GridViewIcon from "@vector-im/compound-design-tokens/icons/grid-view.svg?react";
+import SpotlightIcon from "@vector-im/compound-design-tokens/icons/spotlight.svg?react";
+import GridIcon from "@vector-im/compound-design-tokens/icons/grid.svg?react";
 import classNames from "classnames";
 
 import styles from "./LayoutToggle.module.css";
@@ -54,7 +54,7 @@ export const LayoutToggle: FC<Props> = ({ layout, setLayout, className }) => {
       />
       <Tooltip label={t("Spotlight")}>
         <label htmlFor={spotlightId}>
-          <SpotlightViewIcon aria-label={t("Spotlight")} />
+          <SpotlightIcon aria-label={t("Spotlight")} />
         </label>
       </Tooltip>
       <input
@@ -67,7 +67,7 @@ export const LayoutToggle: FC<Props> = ({ layout, setLayout, className }) => {
       />
       <Tooltip label={t("Grid")}>
         <label htmlFor={gridId}>
-          <GridViewIcon aria-label={t("Grid")} />
+          <GridIcon aria-label={t("Grid")} />
         </label>
       </Tooltip>
     </div>

src/room/RoomPage.tsx

@@ -31,8 +31,14 @@ import { platform } from "../Platform";
 import { AppSelectionModal } from "./AppSelectionModal";
 
 export const RoomPage: FC = () => {
-  const { confineToRoom, appPrompt, preload, hideHeader, displayName } =
-    useUrlParams();
+  const {
+    confineToRoom,
+    appPrompt,
+    preload,
+    hideHeader,
+    displayName,
+    skipLobby,
+  } = useUrlParams();
 
   const { roomAlias, roomId, viaServers } = useRoomIdentifier();
 
@@ -78,10 +84,11 @@ export const RoomPage: FC = () => {
         isPasswordlessUser={passwordlessUser}
         confineToRoom={confineToRoom}
         preload={preload}
+        skipLobby={skipLobby}
         hideHeader={hideHeader}
       />
     ),
-    [client, passwordlessUser, confineToRoom, preload, hideHeader],
+    [client, passwordlessUser, confineToRoom, preload, hideHeader, skipLobby],
   );
 
   let content: ReactNode;

src/room/VideoPreview.tsx

@@ -25,12 +25,12 @@ import {
 } from "livekit-client";
 import classNames from "classnames";
 import { logger } from "matrix-js-sdk/src/logger";
+import { Glass } from "@vector-im/compound-web";
 
 import { Avatar } from "../Avatar";
 import styles from "./VideoPreview.module.css";
 import { useMediaDevices } from "../livekit/MediaDevicesContext";
 import { MuteStates } from "./MuteStates";
-import { Glass } from "../Glass";
 import { useMediaQuery } from "../useMediaQuery";
 
 export type MatrixInfo = {

src/rtcSessionHelpers.ts

@@ -19,6 +19,7 @@ import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 import { PosthogAnalytics } from "./analytics/PosthogAnalytics";
 import { LivekitFocus } from "./livekit/LivekitFocus";
 import { Config } from "./config/Config";
+import { ElementWidgetActions, WidgetHelpers, widget } from "./widget";
 
 function makeFocus(livekitAlias: string): LivekitFocus {
   const urlFromConf = Config.get().livekit!.livekit_service_url;
@@ -33,23 +34,43 @@ function makeFocus(livekitAlias: string): LivekitFocus {
   };
 }
 
-export function enterRTCSession(rtcSession: MatrixRTCSession): void {
+export function enterRTCSession(
+  rtcSession: MatrixRTCSession,
+  encryptMedia: boolean,
+): void {
   PosthogAnalytics.instance.eventCallEnded.cacheStartCall(new Date());
   PosthogAnalytics.instance.eventCallStarted.track(rtcSession.room.roomId);
 
   // This must be called before we start trying to join the call, as we need to
   // have started tracking by the time calls start getting created.
-  //groupCallOTelMembership?.onJoinCall();
+  // groupCallOTelMembership?.onJoinCall();
 
   // right now we assume everything is a room-scoped call
   const livekitAlias = rtcSession.room.roomId;
 
-  rtcSession.joinRoomSession([makeFocus(livekitAlias)]);
+  rtcSession.joinRoomSession([makeFocus(livekitAlias)], encryptMedia);
 }
 
+const widgetPostHangupProcedure = async (
+  widget: WidgetHelpers,
+): Promise<void> => {
+  // we need to wait until the callEnded event is tracked on posthog.
+  // Otherwise the iFrame gets killed before the callEnded event got tracked.
+  await new Promise((resolve) => window.setTimeout(resolve, 10)); // 10ms
+  widget.api.setAlwaysOnScreen(false);
+  PosthogAnalytics.instance.logout();
+
+  // We send the hangup event after the memberships have been updated
+  // calling leaveRTCSession.
+  // We need to wait because this makes the client hosting this widget killing the IFrame.
+  widget.api.transport.send(ElementWidgetActions.HangupCall, {});
+};
+
 export async function leaveRTCSession(
   rtcSession: MatrixRTCSession,
 ): Promise<void> {
-  //groupCallOTelMembership?.onLeaveCall();
   await rtcSession.leaveRoomSession();
+  if (widget) {
+    await widgetPostHangupProcedure(widget);
+  }
 }

src/widget.ts

@@ -57,7 +57,7 @@ export interface ScreenshareStartData {
   desktopCapturerSourceId: string;
 }
 
-interface WidgetHelpers {
+export interface WidgetHelpers {
   api: WidgetApi;
   lazyActions: LazyEventEmitter;
   client: Promise<MatrixClient>;
@@ -77,6 +77,8 @@ export const widget = ((): WidgetHelpers | null => {
       logger.info("Widget API is available");
       const api = new WidgetApi(widgetId, parentOrigin);
       api.requestCapability(MatrixCapabilities.AlwaysOnScreen);
+      api.requestCapabilityToSendEvent(EventType.CallEncryptionKeysPrefix);
+      api.requestCapabilityToReceiveEvent(EventType.CallEncryptionKeysPrefix);
 
       // Set up the lazy action emitter, but only for select actions that we
       // intend for the app to handle