Merge pull request #1896 from vector-im/dbkr/revert-1772

Revert per-sender keys

.eslintrc.cjs

@@ -36,7 +36,6 @@ module.exports = {
   rules: {
     "matrix-org/require-copyright-header": ["error", COPYRIGHT_HEADER],
     "jsx-a11y/media-has-caption": "off",
-    "deprecate/import": "off", // Disabled because it crashes the linter
     // We should use the js-sdk logger, never console directly.
     "no-console": ["error"],
   },

.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,10 +72,10 @@ 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@dedd61cf5d839122591f5027c89bf3ad27691d18
+        uses: docker/setup-buildx-action@6d5347c4025fdf2bb05167a2519cac535a14a408
 
       - name: Build and push Docker image
-        uses: docker/build-push-action@0f847266c302569530c95bfa228489494c43b002
+        uses: docker/build-push-action@fdf7f43ecf7c1a5c7afe936410233728a8c2d9c2
         with:
           context: .
           platforms: linux/amd64,linux/arm64

.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.0.7",
+    "@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#4ce837b20e638a185f9002b2388fbaf48975ee6e",
     "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/en-GB/app.json

@@ -36,11 +36,8 @@
   "Developer Settings": "Developer Settings",
   "Display name": "Display name",
   "Element Call Home": "Element Call Home",
-  "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)",
   "Encrypted": "Encrypted",
   "End call": "End call",
-  "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",

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/sv/app.json

@@ -1 +1,8 @@
-{}
+{
+  "{{count}} stars|one": "{{count}} stjärna",
+  "{{count}} stars|other": "{{count}} stjärnor",
+  "{{count, number}}|one": "{{count, number}}",
+  "{{count, number}}|other": "{{count, number}}",
+  "{{displayName}} is presenting": "{{displayName}} presenterar",
+  "{{displayName}}, your call has ended.": "{{displayName}}, ditt samtal har avslutats."
+}

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

@@ -1,23 +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.
-*/
-
-.e2eeBanner {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 12px;
-  font-size: var(--font-size-caption);
-}

src/E2EEBanner.tsx

@@ -1,40 +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 { Trans } from "react-i18next";
-import { FC } from "react";
-
-import { Banner } from "./Banner";
-import styles from "./E2EEBanner.module.css";
-import LockOffIcon from "./icons/LockOff.svg?react";
-import { useEnableE2EE } from "./settings/useSetting";
-
-export const E2EEBanner: FC = () => {
-  const [e2eeEnabled] = useEnableE2EE();
-  if (e2eeEnabled) return null;
-
-  return (
-    <Banner>
-      <div className={styles.e2eeBanner}>
-        <LockOffIcon width={24} height={24} />
-        <Trans>
-          Element Call is temporarily not end-to-end encrypted while we test
-          scalability.
-        </Trans>
-      </div>
-    </Banner>
-  );
-};

src/Glass.module.css

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

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,12 @@ interface UrlParams {
    * E2EE password
    */
   password: string | null;
+  /**
+   * 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 +205,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 +217,7 @@ export const getUrlParams = (
     fontScale: Number.isNaN(fontScale) ? null : fontScale,
     analyticsID: parser.getParam("analyticsID"),
     allowIceFallback: parser.getFlagParam("allowIceFallback"),
+    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/sharedKeyManagement.ts

@@ -16,8 +16,7 @@ limitations under the License.
 
 import { useEffect, useMemo } from "react";
 
-import { useEnableE2EE } from "../settings/useSetting";
-import { useLocalStorage } from "../useLocalStorage";
+import { setLocalStorageItem, useLocalStorage } from "../useLocalStorage";
 import { useClient } from "../ClientContext";
 import { useUrlParams } from "../UrlParams";
 import { widget } from "../widget";
@@ -25,39 +24,52 @@ import { widget } from "../widget";
 export const getRoomSharedKeyLocalStorageKey = (roomId: string): string =>
   `room-shared-key-${roomId}`;
 
-const useInternalRoomSharedKey = (
-  roomId: string,
-): [string | null, (value: string) => void] => {
-  const key = useMemo(() => getRoomSharedKeyLocalStorageKey(roomId), [roomId]);
-  const [e2eeEnabled] = useEnableE2EE();
-  const [roomSharedKey, setRoomSharedKey] = useLocalStorage(key);
+const useInternalRoomSharedKey = (roomId: string): string | null => {
+  const key = getRoomSharedKeyLocalStorageKey(roomId);
+  const roomSharedKey = useLocalStorage(key)[0];
 
-  return [e2eeEnabled ? roomSharedKey : null, setRoomSharedKey];
+  return roomSharedKey;
 };
 
-const useKeyFromUrl = (roomId: string): string | null => {
+/**
+ * Extracts the room password from the URL if one is present, saving it in localstorage
+ * and returning it in a tuple with the corresponding room ID from the URL.
+ * @returns A tuple of the roomId and password from the URL if the URL has both,
+ *          otherwise [undefined, undefined]
+ */
+const useKeyFromUrl = (): [string, string] | [undefined, undefined] => {
   const urlParams = useUrlParams();
-  const [e2eeSharedKey, setE2EESharedKey] = useInternalRoomSharedKey(roomId);
 
   useEffect(() => {
-    if (!urlParams.password) return;
-    if (urlParams.password === "") return;
-    if (urlParams.password === e2eeSharedKey) return;
+    if (!urlParams.password || !urlParams.roomId) return;
+    if (!urlParams.roomId) return;
 
-    setE2EESharedKey(urlParams.password);
-  }, [urlParams, e2eeSharedKey, setE2EESharedKey]);
+    setLocalStorageItem(
+      // We set the Item by only using data from the url. This way we
+      // make sure, we always have matching pairs in the LocalStorage,
+      // as they occur in the call links.
+      getRoomSharedKeyLocalStorageKey(urlParams.roomId),
+      urlParams.password,
+    );
+  }, [urlParams]);
 
-  return urlParams.password ?? null;
+  return urlParams.roomId && urlParams.password
+    ? [urlParams.roomId, urlParams.password]
+    : [undefined, undefined];
 };
 
-export const useRoomSharedKey = (roomId: string): string | null => {
+export const useRoomSharedKey = (roomId: string): string | undefined => {
   // make sure we've extracted the key from the URL first
   // (and we still need to take the value it returns because
   // the effect won't run in time for it to save to localstorage in
   // time for us to read it out again).
-  const passwordFormUrl = useKeyFromUrl(roomId);
+  const [urlRoomId, passwordFormUrl] = useKeyFromUrl();
 
-  return useInternalRoomSharedKey(roomId)[0] ?? passwordFormUrl;
+  const storedPassword = useInternalRoomSharedKey(roomId);
+
+  if (storedPassword) return storedPassword;
+  if (urlRoomId === roomId) return passwordFormUrl;
+  return undefined;
 };
 
 export const useIsRoomE2EE = (roomId: string): boolean | null => {

src/home/RegisteredView.tsx

@@ -38,9 +38,8 @@ import { UserMenuContainer } from "../UserMenuContainer";
 import { JoinExistingCallModal } from "./JoinExistingCallModal";
 import { Caption } from "../typography/Typography";
 import { Form } from "../form/Form";
-import { useEnableE2EE, useOptInAnalytics } from "../settings/useSetting";
+import { useOptInAnalytics } from "../settings/useSetting";
 import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
-import { E2EEBanner } from "../E2EEBanner";
 
 interface Props {
   client: MatrixClient;
@@ -58,7 +57,6 @@ export const RegisteredView: FC<Props> = ({ client }) => {
     () => setJoinExistingCallModalOpen(false),
     [setJoinExistingCallModalOpen],
   );
-  const [e2eeEnabled] = useEnableE2EE();
 
   const onSubmit: FormEventHandler<HTMLFormElement> = useCallback(
     (e: FormEvent) => {
@@ -74,11 +72,7 @@ export const RegisteredView: FC<Props> = ({ client }) => {
         setError(undefined);
         setLoading(true);
 
-        const createRoomResult = await createRoom(
-          client,
-          roomName,
-          e2eeEnabled ?? false,
-        );
+        const createRoomResult = await createRoom(client, roomName, true);
 
         history.push(
           getRelativeRoomUrl(
@@ -102,7 +96,7 @@ export const RegisteredView: FC<Props> = ({ client }) => {
         }
       });
     },
-    [client, history, setJoinExistingCallModalOpen, e2eeEnabled],
+    [client, history, setJoinExistingCallModalOpen],
   );
 
   const recentRooms = useGroupCallRooms(client);
@@ -156,7 +150,6 @@ export const RegisteredView: FC<Props> = ({ client }) => {
                 <AnalyticsNotice />
               </Caption>
             )}
-            <E2EEBanner />
             {error && (
               <FieldRow className={styles.fieldRow}>
                 <ErrorMessage error={error} />

src/home/UnauthenticatedView.tsx

@@ -41,9 +41,8 @@ import styles from "./UnauthenticatedView.module.css";
 import commonStyles from "./common.module.css";
 import { generateRandomName } from "../auth/generateRandomName";
 import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
-import { useEnableE2EE, useOptInAnalytics } from "../settings/useSetting";
+import { useOptInAnalytics } from "../settings/useSetting";
 import { Config } from "../config/Config";
-import { E2EEBanner } from "../E2EEBanner";
 
 export const UnauthenticatedView: FC = () => {
   const { setClient } = useClient();
@@ -63,8 +62,6 @@ export const UnauthenticatedView: FC = () => {
   const history = useHistory();
   const { t } = useTranslation();
 
-  const [e2eeEnabled] = useEnableE2EE();
-
   const onSubmit: FormEventHandler<HTMLFormElement> = useCallback(
     (e) => {
       e.preventDefault();
@@ -87,11 +84,7 @@ export const UnauthenticatedView: FC = () => {
 
         let createRoomResult;
         try {
-          createRoomResult = await createRoom(
-            client,
-            roomName,
-            e2eeEnabled ?? false,
-          );
+          createRoomResult = await createRoom(client, roomName, true);
         } catch (error) {
           if (!setClient) {
             throw error;
@@ -143,7 +136,6 @@ export const UnauthenticatedView: FC = () => {
       history,
       setJoinExistingCallModalOpen,
       setClient,
-      e2eeEnabled,
     ],
   );
 
@@ -201,7 +193,6 @@ export const UnauthenticatedView: FC = () => {
                 </Link>
               </Trans>
             </Caption>
-            <E2EEBanner />
             {error && (
               <FieldRow>
                 <ErrorMessage error={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

@@ -19,9 +19,11 @@ import {
   ConnectionState,
   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";
 
@@ -60,6 +62,17 @@ async function doConnect(
   // doesn't publish it until you unmute. We want to publish it from the start so we're
   // always capturing audio: it helps keep bluetooth headsets in the right mode and
   // mobile browsers to know we're doing a call.
+  if (livekitRoom!.localParticipant.getTrack(Track.Source.Microphone)) {
+    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;
+  }
+
+  logger.info("Pre-creating microphone track");
   const audioTracks = await livekitRoom!.localParticipant.createTracks({
     audio: audioOptions,
   });
@@ -69,6 +82,14 @@ async function doConnect(
   }
   if (!audioEnabled) await audioTracks[0].mute();
 
+  // 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!",
+    );
+    return;
+  }
+  logger.info("Publishing pre-created mic track");
   await livekitRoom?.localParticipant.publishTrack(audioTracks[0]);
 }
 

src/livekit/useLiveKit.ts

@@ -127,7 +127,7 @@ export function useLiveKit(
 
   const connectionState = useECConnectionState(
     {
-      deviceId: initialDevices.current.audioOutput.selectedId,
+      deviceId: initialDevices.current.audioInput.selectedId,
     },
     initialMuteStates.current.audio.enabled,
     room,
@@ -154,52 +154,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;
-          try {
-            await participant.setMicrophoneEnabled(buttonEnabled.current.audio);
-          } catch (e) {
-            logger.error("Failed to sync audio mute state with LiveKit", e);
+
+      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 {
+            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, 20));
+              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.
-          syncMuteStateAudio();
+              syncMuteState(iterCount + 1, type);
+            } else {
+              throw new Error(
+                "track with new mute state could not be published",
+              );
             }
-      };
-      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);
+            logger.error(
+              "Failed to sync audio mute state with LiveKit (will retry to sync in 1s):",
+              e,
+            );
+            setTimeout(() => syncMuteState(iterCount + 1, type), 1000);
           }
-          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/room/GroupCallView.tsx

@@ -40,7 +40,6 @@ import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMembership
 import { enterRTCSession, leaveRTCSession } from "../rtcSessionHelpers";
 import { useMatrixRTCSessionJoinState } from "../useMatrixRTCSessionJoinState";
 import { useIsRoomE2EE, useRoomSharedKey } from "../e2ee/sharedKeyManagement";
-import { useEnableE2EE } from "../settings/useSetting";
 import { useRoomAvatar } from "./useRoomAvatar";
 import { useRoomName } from "./useRoomName";
 import { useJoinRule } from "./useJoinRule";
@@ -57,6 +56,7 @@ interface Props {
   isPasswordlessUser: boolean;
   confineToRoom: boolean;
   preload: boolean;
+  skipLobby: boolean;
   hideHeader: boolean;
   rtcSession: MatrixRTCSession;
 }
@@ -66,6 +66,7 @@ export const GroupCallView: FC<Props> = ({
   isPasswordlessUser,
   confineToRoom,
   preload,
+  skipLobby,
   hideHeader,
   rtcSession,
 }) => {
@@ -123,20 +124,18 @@ export const GroupCallView: FC<Props> = ({
   latestMuteStates.current = muteStates;
 
   useEffect(() => {
-    if (widget && preload) {
-      // In preload mode, wait for a join action before entering
-      const onJoin = async (
-        ev: CustomEvent<IWidgetApiRequest>,
+    // 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 } = ev.detail
-          .data as unknown as JoinCallData;
-
+      const { audioInput, videoInput } = requestedDeviceData;
       if (audioInput === null) {
         latestMuteStates.current!.audio.setEnabled?.(false);
       } else {
@@ -176,27 +175,29 @@ export const GroupCallView: FC<Props> = ({
           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> => {
+        defaultDeviceSetup(ev.detail.data as unknown as JoinCallData);
         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,
-        );
-
         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);
     }
-  }, [rtcSession, preload]);
+  }, [rtcSession, preload, skipLobby]);
 
   const [left, setLeft] = useState(false);
   const [leaveError, setLeaveError] = useState<Error | undefined>(undefined);
@@ -217,17 +218,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 &&
@@ -245,9 +235,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 () => {
@@ -256,8 +245,6 @@ export const GroupCallView: FC<Props> = ({
     }
   }, [isJoined, rtcSession]);
 
-  const [e2eeEnabled] = useEnableE2EE();
-
   const e2eeConfig = useMemo(
     () => (e2eeSharedKey ? { sharedKey: e2eeSharedKey } : undefined),
     [e2eeSharedKey],
@@ -293,7 +280,7 @@ export const GroupCallView: FC<Props> = ({
 
   const { t } = useTranslation();
 
-  if (e2eeEnabled && isRoomE2EE && !e2eeSharedKey) {
+  if (isRoomE2EE && !e2eeSharedKey) {
     return (
       <ErrorView
         error={
@@ -317,8 +304,6 @@ export const GroupCallView: FC<Props> = ({
         </Link>
       </FullScreenView>
     );
-  } else if (!e2eeEnabled && isRoomE2EE) {
-    return <ErrorView error={new Error("You need to enable E2EE to join.")} />;
   }
 
   const shareModal = (

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";
@@ -87,9 +88,6 @@ import {
 import { useOpenIDSFU } from "../livekit/openIDSFU";
 
 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
-// There is currently a bug in Safari our our code with cloning and sending MediaStreams
-// or with getUsermedia and getDisplaymedia being used within the same session.
-// For now we can disable screensharing in Safari.
 const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 
 // How long we wait after a focus switch before showing the real participant list again
@@ -180,7 +178,7 @@ export const InCallView: FC<InCallViewProps> = ({
 
   const [showConnectionStats] = useShowConnectionStats();
 
-  const { hideScreensharing } = useUrlParams();
+  const { hideScreensharing, showControls } = useUrlParams();
 
   const { isScreenShareEnabled, localParticipant } = useLocalParticipant({
     room: livekitRoom,
@@ -369,7 +367,7 @@ export const InCallView: FC<InCallViewProps> = ({
     );
 
     if (!reducedControls) {
-      if (canScreenshare && !hideScreensharing && !isSafari) {
+      if (canScreenshare && !hideScreensharing) {
         buttons.push(
           <ScreenshareButton
             key="3"
@@ -390,7 +388,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 />
@@ -401,8 +407,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}
@@ -427,7 +433,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/room/useActiveFocus.ts

@@ -20,6 +20,7 @@ import {
 } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 import { useCallback, useEffect, useState } from "react";
 import { deepCompare } from "matrix-js-sdk/src/utils";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import { LivekitFocus } from "../livekit/LivekitFocus";
 
@@ -27,7 +28,16 @@ function getActiveFocus(
   rtcSession: MatrixRTCSession,
 ): LivekitFocus | undefined {
   const oldestMembership = rtcSession.getOldestMembership();
-  return oldestMembership?.getActiveFoci()[0] as LivekitFocus;
+  const focus = oldestMembership?.getActiveFoci()[0] as LivekitFocus;
+
+  if (focus) {
+    logger.info(
+      `Got active focus for call from ${oldestMembership?.sender}/${oldestMembership?.deviceId}`,
+      focus,
+    );
+  }
+
+  return focus;
 }
 
 /**

src/room/useLoadGroupCall.ts

@@ -23,7 +23,6 @@ import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 
 import type { Room } from "matrix-js-sdk/src/models/room";
 import type { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
-import { useEnableE2EE } from "../settings/useSetting";
 
 export type GroupCallLoaded = {
   kind: "loaded";
@@ -57,8 +56,6 @@ export const useLoadGroupCall = (
   const { t } = useTranslation();
   const [state, setState] = useState<GroupCallStatus>({ kind: "loading" });
 
-  const [e2eeEnabled] = useEnableE2EE();
-
   useEffect(() => {
     const fetchOrCreateRoom = async (): Promise<Room> => {
       let room: Room | null = null;
@@ -129,7 +126,7 @@ export const useLoadGroupCall = (
       .then(fetchOrCreateGroupCall)
       .then((rtcSession) => setState({ kind: "loaded", rtcSession }))
       .catch((error) => setState({ kind: "failed", error }));
-  }, [client, roomIdOrAlias, viaServers, t, e2eeEnabled]);
+  }, [client, roomIdOrAlias, viaServers, t]);
 
   return state;
 };

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;
@@ -47,9 +48,26 @@ export function enterRTCSession(rtcSession: MatrixRTCSession): void {
   rtcSession.joinRoomSession([makeFocus(livekitAlias)]);
 }
 
+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/settings/SettingsModal.tsx

@@ -33,7 +33,6 @@ import {
   useOptInAnalytics,
   useDeveloperSettingsTab,
   useShowConnectionStats,
-  useEnableE2EE,
   isFirefox,
 } from "./useSetting";
 import { FieldRow, InputField } from "../input/Input";
@@ -64,7 +63,6 @@ export const SettingsModal: FC<Props> = (props) => {
     useDeveloperSettingsTab();
   const [showConnectionStats, setShowConnectionStats] =
     useShowConnectionStats();
-  const [enableE2EE, setEnableE2EE] = useEnableE2EE();
 
   // Generate a `SelectInput` with a list of devices for a given device kind.
   const generateDeviceSelection = (
@@ -243,23 +241,6 @@ export const SettingsModal: FC<Props> = (props) => {
           }
         />
       </FieldRow>
-      <FieldRow>
-        <InputField
-          id="enableE2EE"
-          name="end-to-end-encryption"
-          label={t("Enable end-to-end encryption (password protected calls)")}
-          description={
-            !setEnableE2EE &&
-            t("End-to-end encryption isn't supported on your browser.")
-          }
-          disabled={!setEnableE2EE}
-          type="checkbox"
-          checked={enableE2EE ?? undefined}
-          onChange={(e: ChangeEvent<HTMLInputElement>): void =>
-            setEnableE2EE?.(e.target.checked)
-          }
-        />
-      </FieldRow>
     </TabItem>
   );
 

src/settings/useSetting.ts

@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 import { useCallback, useMemo } from "react";
-import { isE2EESupported } from "livekit-client";
 
 import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import {
@@ -91,16 +90,6 @@ export const useOptInAnalytics = (): DisableableSetting<boolean | null> => {
   return [false, null];
 };
 
-export const useEnableE2EE = (): DisableableSetting<boolean | null> => {
-  const settingVal = useSetting<boolean | null>(
-    "enable-end-to-end-encryption",
-    true,
-  );
-  if (isE2EESupported()) return settingVal;
-
-  return [false, null];
-};
-
 export const useDeveloperSettingsTab = (): Setting<boolean> =>
   useSetting("developer-settings-tab", false);
 

src/widget.ts

@@ -57,7 +57,7 @@ export interface ScreenshareStartData {
   desktopCapturerSourceId: string;
 }
 
-interface WidgetHelpers {
+export interface WidgetHelpers {
   api: WidgetApi;
   lazyActions: LazyEventEmitter;
   client: Promise<MatrixClient>;