Tidier syntax

Co-authored-by: Robin <robin@robin.town>

.env.example

@@ -10,19 +10,10 @@ LIVEKIT_SECRET="secret"
 # Used for determining the homeserver to use for short urls etc.
 # VITE_FALLBACK_STUN_ALLOWED=false
 
-# VITE_CUSTOM_THEME=true
-# VITE_THEME_ACCENT=#0dbd8b
-# VITE_THEME_ACCENT_20=#0dbd8b33
-# VITE_THEME_ALERT=#ff5b55
-# VITE_THEME_ALERT_20=#ff5b5533
-# VITE_THEME_LINKS=#0086e6
-# VITE_THEME_PRIMARY_CONTENT=#ffffff
-# VITE_THEME_SECONDARY_CONTENT=#a9b2bc
-# VITE_THEME_TERTIARY_CONTENT=#8e99a4
-# VITE_THEME_TERTIARY_CONTENT_20=#8e99a433
-# VITE_THEME_QUATERNARY_CONTENT=#6f7882
-# VITE_THEME_QUINARY_CONTENT=#394049
-# VITE_THEME_SYSTEM=#21262c
-# VITE_THEME_BACKGROUND=#15191e
-# VITE_THEME_BACKGROUND_85=#15191ed9
-# VITE_THEME_SUBTLE_PRIMARY=#26282D
+# CSS to be injected into the page for the purpose of custom theming.
+# Generally, writing a custom theme involves overriding Compound design tokens,
+# which are documented here:
+# https://compound.element.io/?path=/docs/foundations-design-tokens--docs
+# https://compound.element.io/?path=/docs/tokens-color-palettes--docs
+# https://compound.element.io/?path=/docs/tokens-semantic-colors--docs
+# VITE_CUSTOM_CSS=".cpd-theme-dark.cpd-theme-dark { --cpd-color-theme-bg: #101317; }"

.github/workflows/build.yaml

@@ -23,6 +23,7 @@ jobs:
           SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
           SENTRY_URL: ${{ secrets.SENTRY_URL }}
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          VITE_APP_VERSION: ${{ github.sha }}
           NODE_OPTIONS: "--max-old-space-size=4096"
       - name: Upload Artifact
         uses: actions/upload-artifact@v2

.github/workflows/netlify-fullmesh.yaml

@@ -28,7 +28,7 @@ jobs:
           ref: ${{ github.event.workflow_run.head_sha }}
 
       - name: "Download artifact"
-        uses: actions/github-script@v3.1.0
+        uses: actions/github-script@v3.2.0
         with:
           script: |
             const artifacts = await github.actions.listWorkflowRunArtifacts({
@@ -60,7 +60,7 @@ jobs:
 
       - name: Deploy to Netlify
         id: netlify
-        uses: nwtgck/actions-netlify@v1.2.3
+        uses: nwtgck/actions-netlify@v1.2.4
         with:
           publish-dir: dist
           deploy-message: "Deploy from GitHub Actions"

.github/workflows/netlify-livekit.yaml

@@ -28,7 +28,7 @@ jobs:
           ref: ${{ github.event.workflow_run.head_sha }}
 
       - name: "Download artifact"
-        uses: actions/github-script@v3.1.0
+        uses: actions/github-script@v3.2.0
         with:
           script: |
             const artifacts = await github.actions.listWorkflowRunArtifacts({
@@ -60,7 +60,7 @@ jobs:
 
       - name: Deploy to Netlify
         id: netlify
-        uses: nwtgck/actions-netlify@v1.2.3
+        uses: nwtgck/actions-netlify@v1.2.4
         with:
           publish-dir: dist
           deploy-message: "Deploy from GitHub Actions"

.github/workflows/netlify-pr.yaml

@@ -6,6 +6,7 @@ on:
       - completed
     branches-ignore:
       - "main"
+      - "livekit"
 jobs:
   deploy:
     if: github.event.workflow_run.conclusion == 'success' && github.event.workflow_run.event == 'pull_request'

.github/workflows/publish.yaml

@@ -3,6 +3,8 @@ name: Build & publish images to the package registry for tags
 on:
   release:
     types: [published]
+  push:
+    branches: [livekit]
 
 env:
   REGISTRY: ghcr.io
@@ -16,11 +18,15 @@ jobs:
       contents: write # required to upload release asset
       packages: write
     steps:
+      - name: Get current time
+        id: current-time
+        run: echo "unix_time=$(date +'%s')" >> $GITHUB_OUTPUT
+
       - name: Check it out
         uses: actions/checkout@v2
 
       - name: Log in to container registry
-        uses: docker/login-action@f054a8b539a109f9f41c372932f1ae047eff08c9
+        uses: docker/login-action@cf8514a65188af1d4f94f8c28a7a4153af1088ce
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}
@@ -39,31 +45,37 @@ jobs:
           SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
           SENTRY_URL: ${{ secrets.SENTRY_URL }}
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-          VITE_APP_VERSION: ${{ github.event.release.tag_name }}
+          VITE_APP_VERSION: ${{ github.event.release.tag_name || github.sha }}
 
       - name: Create Tarball
         env:
-          GITHUB_TAG_NAME: ${{ github.event.release.tag_name }}
+          TARBALL_VERSION: ${{ github.event.release.tag_name || github.sha }}
         run: |
-          tar --numeric-owner --transform "s/dist/element-call-${GITHUB_TAG_NAME}/" -cvzf element-call-${GITHUB_TAG_NAME}.tar.gz dist
+          tar --numeric-owner --transform "s/dist/element-call-${TARBALL_VERSION}/" -cvzf element-call-${TARBALL_VERSION}.tar.gz dist
+
       - name: Upload
-        uses: alexellis/upload-assets@0.4.0
+        uses: actions/upload-artifact@65d862660abb392b8c4a3d1195a2108db131dd05
         env:
           GITHUB_TOKEN: ${{ github.token }}
         with:
-          asset_paths: '["element-call-${{ github.event.release.tag_name }}.tar.gz"]'
+          path: "./element-call-*.tar.gz"
 
       - name: Extract metadata (tags, labels) for Docker
         id: meta
-        uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38
+        uses: docker/metadata-action@0f8c876bafbf5dbce05c36682ec68e9a0274a48a
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=sha,format=short,event=branch
+            type=semver,pattern=v{{version}}
+            type=raw,value=latest-ci,enable={{is_default_branch}}
+            type=raw,value=latest-ci_${{steps.current-time.outputs.unix_time}},enable={{is_default_branch}}
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@dc7b9719a96d48369863986a06765841d7ea23f6
+        uses: docker/setup-buildx-action@885d1462b80bc1c1c7f0b00334ad271f09369c55
 
       - name: Build and push Docker image
-        uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
+        uses: docker/build-push-action@9311bf5263ae5b36f3ec67aff768790c6e2344ad
         with:
           context: .
           platforms: linux/amd64,linux/arm64

README.md

@@ -9,7 +9,7 @@ For prior version of the Element Call that relied solely on full-mesh logic, che
 
 ![A demo of Element Call with six people](demo.jpg)
 
-To try it out, visit our hosted version at [call.element.io](https://call.element.io). You can also find the latest development version continuously deployed to [element-call.netlify.app](https://element-call.netlify.app).
+To try it out, visit our hosted version at [call.element.io](https://call.element.io). You can also find the latest development version continuously deployed to [call.element.dev](https://call.element.dev/).
 
 ## Host it yourself
 

config/element_io_preview.json

@@ -1,8 +1,8 @@
 {
   "default_server_config": {
     "m.homeserver": {
-      "base_url": "https://call.ems.host",
-      "server_name": "call.ems.host"
+      "base_url": "https://call-unstable.ems.host",
+      "server_name": "call-unstable.ems.host"
     }
   },
   "livekit": {

package.json

@@ -20,14 +20,14 @@
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.3.1",
-    "@livekit/components-react": "^1.0.7",
+    "@livekit/components-react": "^1.1.0",
     "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.14.tgz",
     "@opentelemetry/api": "^1.4.0",
     "@opentelemetry/context-zone": "^1.9.1",
     "@opentelemetry/exporter-jaeger": "^1.9.1",
-    "@opentelemetry/exporter-trace-otlp-http": "^0.35.1",
-    "@opentelemetry/instrumentation-document-load": "^0.31.1",
-    "@opentelemetry/instrumentation-user-interaction": "^0.32.1",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.41.0",
+    "@opentelemetry/instrumentation-document-load": "^0.33.0",
+    "@opentelemetry/instrumentation-user-interaction": "^0.33.0",
     "@opentelemetry/sdk-trace-web": "^1.9.1",
     "@react-aria/button": "^3.3.4",
     "@react-aria/dialog": "^3.1.4",
@@ -46,10 +46,9 @@
     "@react-stately/tree": "^3.2.0",
     "@sentry/react": "^6.13.3",
     "@sentry/tracing": "^6.13.3",
-    "@types/grecaptcha": "^3.0.4",
-    "@types/react-router-dom": "^5.3.3",
-    "@types/sdp-transform": "^2.4.5",
     "@use-gesture/react": "^10.2.11",
+    "@vector-im/compound-design-tokens": "^0.0.5",
+    "@vector-im/compound-web": "^0.2.15",
     "@vitejs/plugin-basic-ssl": "^1.0.1",
     "@vitejs/plugin-react": "^4.0.1",
     "classnames": "^2.3.1",
@@ -58,11 +57,11 @@
     "i18next": "^21.10.0",
     "i18next-browser-languagedetector": "^6.1.8",
     "i18next-http-backend": "^1.4.4",
-    "livekit-client": "1.12.0",
+    "livekit-client": "^1.12.3",
     "lodash": "^4.17.21",
     "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#b698217445318f453e0b1086364a33113eaa85d9",
     "matrix-widget-api": "^1.3.1",
-    "mermaid": "^8.13.8",
+    "mermaid": "^9.0.0",
     "normalize.css": "^8.0.1",
     "pako": "^2.0.4",
     "postcss-preset-env": "^7",
@@ -78,20 +77,27 @@
     "sdp-transform": "^2.14.1",
     "tinyqueue": "^2.0.3",
     "unique-names-generator": "^4.6.0",
-    "uuid": "9",
-    "@types/uuid": "9",
-    "@types/content-type": "^1.1.5"
+    "uuid": "9"
   },
   "devDependencies": {
     "@babel/core": "^7.16.5",
+    "@react-spring/rafz": "^9.7.3",
     "@sentry/vite-plugin": "^0.3.0",
     "@storybook/react": "^6.5.0-alpha.5",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
+    "@types/content-type": "^1.1.5",
+    "@types/d3": "^7.4.0",
+    "@types/dom-screen-wake-lock": "^1.0.1",
+    "@types/dompurify": "^3.0.2",
+    "@types/grecaptcha": "^3.0.4",
     "@types/node": "^18.13.0",
+    "@types/react-router-dom": "^5.3.3",
     "@types/request": "^2.48.8",
-    "@typescript-eslint/eslint-plugin": "^5.52.0",
-    "@typescript-eslint/parser": "^5.52.0",
+    "@types/sdp-transform": "^2.4.5",
+    "@types/uuid": "9",
+    "@typescript-eslint/eslint-plugin": "^6.1.0",
+    "@typescript-eslint/parser": "^6.1.0",
     "babel-loader": "^8.2.3",
     "babel-plugin-transform-vite-meta-env": "^1.0.3",
     "eslint": "^8.14.0",
@@ -110,14 +116,13 @@
     "prettier": "^2.6.2",
     "sass": "^1.42.1",
     "storybook-builder-vite": "^0.1.12",
-    "typescript": "^4.9.5",
-    "typescript-strict-plugin": "^2.0.1",
+    "typescript": "^5.1.6",
     "vite": "^4.2.0",
     "vite-plugin-html-template": "^1.1.0",
     "vite-plugin-svgr": "^3.2.0"
   },
   "jest": {
-    "testEnvironment": "jsdom",
+    "testEnvironment": "./test/environment.ts",
     "testMatch": [
       "<rootDir>/test/**/*-test.[jt]s?(x)"
     ],

public/index.html

@@ -13,7 +13,7 @@
     </script>
   </head>
 
-  <body>
+  <body class="cpd-theme-dark">
     <div id="root"></div>
   </body>
 </html>

public/locales/bg/app.json

@@ -71,7 +71,6 @@
   "Stop sharing screen": "Спри споделянето на екрана",
   "Submit feedback": "Изпрати обратна връзка",
   "Take me Home": "Отиди в Начало",
-  "Thanks! We'll get right on it.": "Благодарим! Веднага ще се заемем.",
   "This call already exists, would you like to join?": "Този разговор вече съществува, искате ли да се присъедините?",
   "Turn off camera": "Изключи камерата",
   "Turn on camera": "Включи камерата",

public/locales/cs/app.json

@@ -23,7 +23,6 @@
   "Turn on camera": "Zapnout kameru",
   "Turn off camera": "Vypnout kameru",
   "This call already exists, would you like to join?": "Tento hovor již existuje, chcete se připojit?",
-  "Thanks! We'll get right on it.": "Děkujeme! Hned se na to vrhneme.",
   "Take me Home": "Domovská obrazovka",
   "Submit feedback": "Dát feedback",
   "Stop sharing screen": "Zastavit sdílení obrazovek",

public/locales/de/app.json

@@ -70,7 +70,6 @@
   "Stop sharing screen": "Beenden der Bildschirmfreigabe",
   "Submit feedback": "Rückmeldung geben",
   "Take me Home": "Zurück zur Startseite",
-  "Thanks! We'll get right on it.": "Vielen Dank! Wir werden uns sofort darum kümmern.",
   "This call already exists, would you like to join?": "Dieser Aufruf existiert bereits, möchtest Du teilnehmen?",
   "Turn off camera": "Kamera ausschalten",
   "Turn on camera": "Kamera einschalten",
@@ -116,5 +115,13 @@
   "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."
+  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Element Call ist temporär nicht Ende-zu-Ende-verschlüsselt, während wir die Skalierbarkeit testen.",
+  "Connectivity to the server has been lost.": "Die Verbindung zum Server wurde getrennt.",
+  "Enable end-to-end encryption (password protected calls)": "Ende-zu-Ende-Verschlüsselung aktivieren (Passwort geschützte Anrufe)",
+  "Password (if none, E2EE is disabled)": "Passwort (falls leer, wird E2EE deaktiviert)",
+  "End-to-end encryption isn't supported on your browser.": "Ende-zu-Ende-Verschlüsselung wird in deinem Browser nicht unterstützt.",
+  "Thanks!": "Danke!",
+  "You were disconnected from the call": "Deine Verbindung wurde getrennt",
+  "Reconnect": "Erneut verbinden",
+  "Retry sending logs": "Protokolle erneut senden"
 }

public/locales/el/app.json

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

public/locales/en-GB/app.json

@@ -25,6 +25,7 @@
   "Change layout": "Change layout",
   "Close": "Close",
   "Confirm password": "Confirm password",
+  "Connectivity to the server has been lost.": "Connectivity to the server has been lost.",
   "Copied!": "Copied!",
   "Copy": "Copy",
   "Copy and share this call link": "Copy and share this call link",
@@ -38,6 +39,9 @@
   "Download debug logs": "Download debug logs",
   "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)",
+  "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",
@@ -58,15 +62,15 @@
   "Join call": "Join call",
   "Join call now": "Join call now",
   "Join existing call?": "Join existing call?",
-  "Leave": "Leave",
   "Loading…": "Loading…",
   "Local volume": "Local volume",
   "Logging in…": "Logging in…",
   "Login": "Login",
   "Login to your account": "Login to your account",
   "Microphone": "Microphone",
+  "Microphone off": "Microphone off",
+  "Microphone on": "Microphone on",
   "More": "More",
-  "Mute microphone": "Mute microphone",
   "No": "No",
   "Not now, return to home screen": "Not now, return to home screen",
   "Not registered yet? <2>Create an account</2>": "Not registered yet? <2>Create an account</2>",
@@ -76,9 +80,11 @@
   "Profile": "Profile",
   "Recaptcha dismissed": "Recaptcha dismissed",
   "Recaptcha not loaded": "Recaptcha not loaded",
+  "Reconnect": "Reconnect",
   "Register": "Register",
   "Registering…": "Registering…",
   "Remove": "Remove",
+  "Retry sending logs": "Retry sending logs",
   "Return to home screen": "Return to home screen",
   "Select an option": "Select an option",
   "Send debug logs": "Send debug logs",
@@ -86,35 +92,36 @@
   "Sending…": "Sending…",
   "Settings": "Settings",
   "Share screen": "Share screen",
+  "Sharing screen": "Sharing screen",
   "Show call inspector": "Show call inspector",
   "Show connection stats": "Show connection stats",
   "Sign in": "Sign in",
   "Sign out": "Sign out",
   "Speaker": "Speaker",
   "Spotlight": "Spotlight",
-  "Stop sharing screen": "Stop sharing screen",
   "Submit": "Submit",
   "Submit feedback": "Submit feedback",
   "Submitting…": "Submitting…",
   "Take me Home": "Take me Home",
   "Thanks, we received your feedback!": "Thanks, we received your feedback!",
-  "Thanks! We'll get right on it.": "Thanks! We'll get right on it.",
+  "Thanks!": "Thanks!",
   "This call already exists, would you like to join?": "This call already exists, would you like to join?",
+  "This call is not end-to-end encrypted.": "This call is not end-to-end encrypted.",
   "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>": "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>",
-  "Turn off camera": "Turn off camera",
-  "Turn on camera": "Turn on camera",
-  "Unmute microphone": "Unmute microphone",
   "User menu": "User menu",
   "Username": "Username",
   "Version: {{version}}": "Version: {{version}}",
   "Video": "Video",
   "Video call": "Video call",
   "Video call name": "Video call name",
+  "Video off": "Video off",
+  "Video on": "Video on",
   "Waiting for other participants…": "Waiting for other participants…",
   "Walkie-talkie call": "Walkie-talkie call",
   "Walkie-talkie call name": "Walkie-talkie call name",
   "WebRTC is not supported or is being blocked in this browser.": "WebRTC is not supported or is being blocked in this browser.",
   "Yes, join call": "Yes, join call",
+  "You were disconnected from the call": "You were disconnected from the call",
   "Your feedback": "Your feedback",
   "Your recent calls": "Your recent calls"
 }

public/locales/es/app.json

@@ -19,7 +19,6 @@
   "Unmute microphone": "Desilenciar el micrófono",
   "Turn on camera": "Encender la cámara",
   "Turn off camera": "Apagar la cámara",
-  "Thanks! We'll get right on it.": "¡Gracias! Nos encargaremos de ello.",
   "Take me Home": "Volver al inicio",
   "Submit feedback": "Enviar comentarios",
   "Stop sharing screen": "Dejar de compartir pantalla",

public/locales/et/app.json

@@ -84,7 +84,6 @@
   "Version: {{version}}": "Versioon: {{version}}",
   "Username": "Kasutajanimi",
   "This call already exists, would you like to join?": "See kõne on juba olemas, kas soovid liituda?",
-  "Thanks! We'll get right on it.": "Tänud! Tegeleme sellega esimesel võimalusel.",
   "Unmute microphone": "Aktiveeri mikrofon",
   "User menu": "Kasutajamenüü",
   "Yes, join call": "Jah, liitu kõnega",
@@ -116,5 +115,13 @@
   "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."
+  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Seni kuni me testime skaleeritavust, siis Element Call ajutiselt pole läbivalt krüptitud.",
+  "Connectivity to the server has been lost.": "Võrguühendus serveriga on katkenud.",
+  "Retry sending logs": "Proovi uuesti logisid saata",
+  "You were disconnected from the call": "Sinu ühendus kõnega katkes",
+  "Reconnect": "Ühenda uuesti",
+  "Thanks!": "Tänud!",
+  "End-to-end encryption isn't supported on your browser.": "Sinu brauser ei toeta läbivat krüptimist.",
+  "Enable end-to-end encryption (password protected calls)": "Võta kasutusele läbiv krüptimine (salasõnaga kaitstud kõned)",
+  "Password (if none, E2EE is disabled)": "Salasõna (tühja väärtuse puhul läbivat krüptimist ei kasutata)"
 }

public/locales/fa/app.json

@@ -87,7 +87,6 @@
   "User menu": "فهرست کاربر",
   "Unmute microphone": "ناخموشی میکروفون",
   "This call already exists, would you like to join?": "این تماس از قبل وجود دارد، می‌خواهید بپیوندید؟",
-  "Thanks! We'll get right on it.": "با تشکر! ما به درستی آن را انجام خواهیم داد.",
   "Submit feedback": "بازخورد ارائه دهید",
   "Stop sharing screen": "توقف اشتراک‌گذاری صفحه نمایش",
   "Element Call Home": "خانهٔ تماس المنت",

public/locales/fr/app.json

@@ -67,7 +67,6 @@
   "Stop sharing screen": "Arrêter le partage d’écran",
   "Submit feedback": "Envoyer des retours",
   "Take me Home": "Retouner à l’accueil",
-  "Thanks! We'll get right on it.": "Merci ! Nous allons nous y attaquer.",
   "This call already exists, would you like to join?": "Cet appel existe déjà, voulez-vous le rejoindre ?",
   "Fetching group call timed out.": "Échec de connexion à l’appel de groupe dans le temps imparti.",
   "{{names}}, {{name}}": "{{names}}, {{name}}",
@@ -116,5 +115,13 @@
   "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é."
+  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Element Call n’est temporairement plus chiffré de bout en bout le temps de tester l’extensibilité.",
+  "Reconnect": "Se reconnecter",
+  "Retry sending logs": "Réessayer d’envoyer les journaux",
+  "Thanks!": "Merci !",
+  "You were disconnected from the call": "Vous avez été déconnecté de l’appel",
+  "Connectivity to the server has been lost.": "La connexion avec le serveur a été perdue.",
+  "End-to-end encryption isn't supported on your browser.": "Le chiffrement de bout-en-bout n’est pas pris en charge par votre navigateur.",
+  "Password (if none, E2EE is disabled)": "Mot de passe (si aucun, le chiffrement E2EE est désactivé)",
+  "Enable end-to-end encryption (password protected calls)": "Activer le chiffrement de bout-en-bout (appels protégés par mot de passe)"
 }

public/locales/id/app.json

@@ -71,7 +71,6 @@
   "Stop sharing screen": "Berhenti membagikan layar",
   "Submit feedback": "Kirim masukan",
   "Take me Home": "Bawa saya ke Beranda",
-  "Thanks! We'll get right on it.": "Terima kasih! Kami akan melihatnya.",
   "This call already exists, would you like to join?": "Panggilan ini sudah ada, apakah Anda ingin bergabung?",
   "Turn off camera": "Matikan kamera",
   "Turn on camera": "Nyalakan kamera",
@@ -116,5 +115,13 @@
   "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."
+  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Element Call sementara tidak dienkripsi secara ujung ke ujung selagi kami menguji skalabilitas.",
+  "Connectivity to the server has been lost.": "Koneksi ke server telah hilang.",
+  "Enable end-to-end encryption (password protected calls)": "Aktifkan enkripsi ujung ke ujung (panggilan terlindungi oleh kata sandi)",
+  "End-to-end encryption isn't supported on your browser.": "Enkripsi ujung ke ujung tidak didukung di peramban Anda.",
+  "Password (if none, E2EE is disabled)": "Kata sandi (jika tidak ada, enkripsi akan dinonaktifkan)",
+  "Retry sending logs": "Kirim ulang catatan",
+  "You were disconnected from the call": "Anda terputus dari panggilan",
+  "Reconnect": "Hubungkan ulang",
+  "Thanks!": "Terima kasih!"
 }

public/locales/lv/app.json

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

public/locales/pl/app.json

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

public/locales/ru/app.json

@@ -5,7 +5,6 @@
   "{{names}}, {{name}}": "{{names}}, {{name}}",
   "Waiting for other participants…": "Ожидание других участников…",
   "This call already exists, would you like to join?": "Этот звонок уже существует, хотите присоединиться?",
-  "Thanks! We'll get right on it.": "Спасибо! Мы учтём ваш отзыв.",
   "Submit feedback": "Отправить отзыв",
   "Sending debug logs…": "Отправка журнала отладки…",
   "Select an option": "Выберите вариант",

public/locales/sk/app.json

@@ -5,7 +5,6 @@
   "Fetching group call timed out.": "Vypršal čas načítania skupinového volania.",
   "Element Call Home": "Domov Element Call",
   "Waiting for other participants…": "Čaká sa na ďalších účastníkov…",
-  "Thanks! We'll get right on it.": "Vďaka! Hneď sa do toho pustíme.",
   "Take me Home": "Zober ma domov",
   "Submit feedback": "Odoslať spätnú väzbu",
   "Stop sharing screen": "Zastaviť zdieľanie obrazovky",
@@ -116,5 +115,13 @@
   "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ť."
+  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Element Call nie je dočasne šifrovaný, kým testujeme škálovateľnosť.",
+  "Connectivity to the server has been lost.": "Spojenie so serverom sa stratilo.",
+  "Retry sending logs": "Opakovať odoslanie záznamov",
+  "Reconnect": "Znovu pripojiť",
+  "Thanks!": "Ďakujeme!",
+  "You were disconnected from the call": "Boli ste odpojení z hovoru",
+  "Enable end-to-end encryption (password protected calls)": "Povoliť end-to-end šifrovanie (hovory chránené heslom)",
+  "End-to-end encryption isn't supported on your browser.": "End-to-end šifrovanie nie je vo vašom prehliadači podporované.",
+  "Password (if none, E2EE is disabled)": "Heslo (ak nie je, šifrovanie je vypnuté)"
 }

public/locales/tr/app.json

@@ -65,7 +65,6 @@
   "Stop sharing screen": "Ekran paylaşmayı terk et",
   "Submit feedback": "Geri bildirim ver",
   "Take me Home": "Ev ekranına gir",
-  "Thanks! We'll get right on it.": "Sağol! Bununla ilgileneceğiz.",
   "This call already exists, would you like to join?": "Bu arama zaten var, katılmak ister misiniz?",
   "{{names}}, {{name}}": "{{names}}, {{name}}",
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Hesap oluştur</0> yahut <2>Konuk olarak gir</2>",

public/locales/uk/app.json

@@ -16,7 +16,6 @@
   "Turn on camera": "Увімкнути камеру",
   "Turn off camera": "Вимкнути камеру",
   "This call already exists, would you like to join?": "Цей виклик уже існує, бажаєте приєднатися?",
-  "Thanks! We'll get right on it.": "Дякуємо! Ми зараз же візьмемося за це.",
   "Take me Home": "Перейти до Домівки",
   "Submit feedback": "Надіслати відгук",
   "Stop sharing screen": "Припинити показ екрана",
@@ -69,7 +68,7 @@
   "Fetching group call timed out.": "Вичерпано час очікування групового виклику.",
   "Exit full screen": "Вийти з повноекранного режиму",
   "Download debug logs": "Завантажити журнали налагодження",
-  "Display name": "Показуване ім'я",
+  "Display name": "Псевдонім",
   "Developer": "Розробнику",
   "Details": "Подробиці",
   "Debug log request": "Запит журналу налагодження",
@@ -116,5 +115,13 @@
   "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 тимчасово не захищаються наскрізним шифруванням, поки ми тестуємо масштабованість."
+  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Виклики Element тимчасово не захищаються наскрізним шифруванням, поки ми тестуємо масштабованість.",
+  "Connectivity to the server has been lost.": "Втрачено зв'язок з сервером.",
+  "Reconnect": "Під'єднати повторно",
+  "Retry sending logs": "Повторити надсилання журналів",
+  "You were disconnected from the call": "Вас від'єднано від виклику",
+  "Thanks!": "Дякуємо!",
+  "Enable end-to-end encryption (password protected calls)": "Увімкнути наскрізне шифрування (захищені паролем виклики)",
+  "End-to-end encryption isn't supported on your browser.": "Наскрізне шифрування не підтримується вашим переглядачем.",
+  "Password (if none, E2EE is disabled)": "Пароль (якщо немає, наскрізне шифрування вимкнено)"
 }

public/locales/zh-Hans/app.json

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

public/locales/zh-Hant/app.json

@@ -23,7 +23,6 @@
   "Turn on camera": "開啟相機",
   "Turn off camera": "關閉相機",
   "This call already exists, would you like to join?": "通話已經開始，請問您要加入嗎？",
-  "Thanks! We'll get right on it.": "謝謝您！我們會盡快處理。",
   "Take me Home": "帶我回主畫面",
   "Submit feedback": "遞交回覆",
   "Stop sharing screen": "停止分享螢幕畫面",
@@ -116,5 +115,13 @@
   "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 暫時未進行端到端加密。"
+  "Element Call is temporarily not end-to-end encrypted while we test scalability.": "在我們測試可擴展性時，Element Call 暫時未進行端到端加密。",
+  "Connectivity to the server has been lost.": "到伺服器的連線已遺失。",
+  "Reconnect": "重新連線",
+  "Retry sending logs": "重試傳送紀錄檔",
+  "Thanks!": "感謝！",
+  "You were disconnected from the call": "您已從通話斷線",
+  "Enable end-to-end encryption (password protected calls)": "啟用端到端加密（密碼保護通話）",
+  "End-to-end encryption isn't supported on your browser.": "您的瀏覽器不支援端到端加密。",
+  "Password (if none, E2EE is disabled)": "密碼（若無，就會停用端到端加密）"
 }

renovate.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": ["config:base"],
+  "packageRules": [
+    {
+      "description": "Disable renoavte for packages we want to monitor ourselves",
+      "matchPackagePatterns": ["matrix-js-sdk"],
+      "enabled": false
+    }
+  ]
+}

src/App.tsx

@@ -29,7 +29,9 @@ import { usePageFocusStyle } from "./usePageFocusStyle";
 import { SequenceDiagramViewerPage } from "./SequenceDiagramViewerPage";
 import { InspectorContextProvider } from "./room/GroupCallInspector";
 import { CrashView, LoadingView } from "./FullScreenView";
+import { DisconnectedBanner } from "./DisconnectedBanner";
 import { Initializer } from "./initializer";
+import { MediaDevicesProvider } from "./livekit/MediaDevicesContext";
 
 const SentryRoute = Sentry.withSentryRouting(Route);
 
@@ -57,29 +59,32 @@ export default function App({ history }: AppProps) {
       {loaded ? (
         <Suspense fallback={null}>
           <ClientProvider>
-            <InspectorContextProvider>
-              <Sentry.ErrorBoundary fallback={errorPage}>
-                <OverlayProvider>
-                  <Switch>
-                    <SentryRoute exact path="/">
-                      <HomePage />
-                    </SentryRoute>
-                    <SentryRoute exact path="/login">
-                      <LoginPage />
-                    </SentryRoute>
-                    <SentryRoute exact path="/register">
-                      <RegisterPage />
-                    </SentryRoute>
-                    <SentryRoute path="/inspector">
-                      <SequenceDiagramViewerPage />
-                    </SentryRoute>
-                    <SentryRoute path="*">
-                      <RoomPage />
-                    </SentryRoute>
-                  </Switch>
-                </OverlayProvider>
-              </Sentry.ErrorBoundary>
-            </InspectorContextProvider>
+            <MediaDevicesProvider>
+              <InspectorContextProvider>
+                <Sentry.ErrorBoundary fallback={errorPage}>
+                  <OverlayProvider>
+                    <DisconnectedBanner />
+                    <Switch>
+                      <SentryRoute exact path="/">
+                        <HomePage />
+                      </SentryRoute>
+                      <SentryRoute exact path="/login">
+                        <LoginPage />
+                      </SentryRoute>
+                      <SentryRoute exact path="/register">
+                        <RegisterPage />
+                      </SentryRoute>
+                      <SentryRoute path="/inspector">
+                        <SequenceDiagramViewerPage />
+                      </SentryRoute>
+                      <SentryRoute path="*">
+                        <RoomPage />
+                      </SentryRoute>
+                    </Switch>
+                  </OverlayProvider>
+                </Sentry.ErrorBoundary>
+              </InspectorContextProvider>
+            </MediaDevicesProvider>
           </ClientProvider>
         </Suspense>
       ) : (

src/Avatar.module.css

@@ -16,7 +16,7 @@ limitations under the License.
 
 .avatar {
   position: relative;
-  color: var(--primary-content);
+  color: var(--stopgap-color-on-solid-accent);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -33,7 +33,7 @@ limitations under the License.
 }
 
 .avatar svg * {
-  fill: var(--primary-content);
+  fill: var(--cpd-color-text-primary);
 }
 
 .avatar span {

src/Banner.module.css

@@ -18,5 +18,5 @@ limitations under the License.
   flex: 1;
   border-radius: 8px;
   padding: 16px;
-  background-color: var(--subtle-primary);
+  background-color: var(--cpd-color-bg-subtle-primary);
 }

src/ClientContext.tsx

@@ -25,9 +25,10 @@ import {
   useMemo,
 } from "react";
 import { useHistory } from "react-router-dom";
-import { MatrixClient } from "matrix-js-sdk/src/client";
+import { ClientEvent, MatrixClient } from "matrix-js-sdk/src/client";
 import { logger } from "matrix-js-sdk/src/logger";
 import { useTranslation } from "react-i18next";
+import { ISyncStateData, SyncState } from "matrix-js-sdk/src/sync";
 
 import { ErrorView } from "./FullScreenView";
 import {
@@ -56,6 +57,9 @@ export type ClientState = ValidClientState | ErrorState;
 export type ValidClientState = {
   state: "valid";
   authenticated?: AuthenticatedClient;
+  // 'Disconnected' rather than 'connected' because it tracks specifically
+  // whether the client is supposed to be connected but is not
+  disconnected: boolean;
   setClient: (params?: SetClientParams) => void;
 };
 
@@ -149,8 +153,9 @@ interface Props {
 export const ClientProvider: FC<Props> = ({ children }) => {
   const history = useHistory();
 
+  // null = signed out, undefined = loading
   const [initClientState, setInitClientState] = useState<
-    InitResult | undefined
+    InitResult | null | undefined
   >(undefined);
 
   const initializing = useRef(false);
@@ -162,14 +167,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
     initializing.current = true;
 
     loadClient()
-      .then((maybeClient) => {
-        if (!maybeClient) {
-          logger.error("Failed to initialize client");
-          return;
-        }
-
-        setInitClientState(maybeClient);
-      })
+      .then(setInitClientState)
       .catch((err) => logger.error(err))
       .finally(() => (initializing.current = false));
   }, []);
@@ -220,7 +218,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
         });
       } else {
         clearSession();
-        setInitClientState(undefined);
+        setInitClientState(null);
       }
     },
     [initClientState?.client]
@@ -235,7 +233,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
     await client.logout(true);
     await client.clearStores();
     clearSession();
-    setInitClientState(undefined);
+    setInitClientState(null);
     history.push("/");
     PosthogAnalytics.instance.setRegistrationType(RegistrationType.Guest);
   }, [history, initClientState?.client]);
@@ -264,23 +262,46 @@ export const ClientProvider: FC<Props> = ({ children }) => {
     }, [initClientState?.client, setAlreadyOpenedErr, t])
   );
 
-  const state: ClientState = useMemo(() => {
+  const [isDisconnected, setIsDisconnected] = useState(false);
+
+  const state: ClientState | undefined = useMemo(() => {
     if (alreadyOpenedErr) {
       return { state: "error", error: alreadyOpenedErr };
     }
 
-    let authenticated = undefined;
-    if (initClientState) {
-      authenticated = {
-        client: initClientState.client,
-        isPasswordlessUser: initClientState.passwordlessUser,
-        changePassword,
-        logout,
-      };
-    }
+    if (initClientState === undefined) return undefined;
 
-    return { state: "valid", authenticated, setClient };
-  }, [alreadyOpenedErr, changePassword, initClientState, logout, setClient]);
+    const authenticated =
+      initClientState === null
+        ? undefined
+        : {
+            client: initClientState.client,
+            isPasswordlessUser: initClientState.passwordlessUser,
+            changePassword,
+            logout,
+          };
+
+    return {
+      state: "valid",
+      authenticated,
+      setClient,
+      disconnected: isDisconnected,
+    };
+  }, [
+    alreadyOpenedErr,
+    changePassword,
+    initClientState,
+    logout,
+    setClient,
+    isDisconnected,
+  ]);
+
+  const onSync = useCallback(
+    (state: SyncState, _old: SyncState | null, data?: ISyncStateData) => {
+      setIsDisconnected(clientIsDisconnected(state, data));
+    },
+    []
+  );
 
   useEffect(() => {
     if (!initClientState) {
@@ -292,7 +313,17 @@ export const ClientProvider: FC<Props> = ({ children }) => {
 
     if (PosthogAnalytics.hasInstance())
       PosthogAnalytics.instance.onLoginStatusChanged();
-  }, [initClientState]);
+
+    if (initClientState.client) {
+      initClientState.client.on(ClientEvent.Sync, onSync);
+    }
+
+    return () => {
+      if (initClientState.client) {
+        initClientState.client.removeListener(ClientEvent.Sync, onSync);
+      }
+    };
+  }, [initClientState, onSync]);
 
   if (alreadyOpenedErr) {
     return <ErrorView error={alreadyOpenedErr} />;
@@ -308,7 +339,7 @@ type InitResult = {
   passwordlessUser: boolean;
 };
 
-async function loadClient(): Promise<InitResult> {
+async function loadClient(): Promise<InitResult | null> {
   if (widget) {
     // We're inside a widget, so let's engage *matryoshka mode*
     logger.log("Using a matryoshka client");
@@ -322,7 +353,8 @@ async function loadClient(): Promise<InitResult> {
     try {
       const session = loadSession();
       if (!session) {
-        throw new Error("No session stored");
+        logger.log("No session stored; continuing without a client");
+        return null;
       }
 
       logger.log("Using a standalone client");
@@ -387,3 +419,8 @@ const loadSession = (): Session | undefined => {
 
   return JSON.parse(data);
 };
+
+const clientIsDisconnected = (
+  syncState: SyncState,
+  syncData?: ISyncStateData
+) => syncState === "ERROR" && syncData?.error?.name === "ConnectionError";

src/DisconnectedBanner.module.css

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

src/DisconnectedBanner.tsx

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

src/E2EEBanner.tsx

@@ -19,8 +19,12 @@ import { Trans } from "react-i18next";
 import { Banner } from "./Banner";
 import styles from "./E2EEBanner.module.css";
 import { ReactComponent as LockOffIcon } from "./icons/LockOff.svg";
+import { useEnableE2EE } from "./settings/useSetting";
 
 export const E2EEBanner = () => {
+  const [e2eeEnabled] = useEnableE2EE();
+  if (e2eeEnabled) return null;
+
   return (
     <Banner>
       <div className={styles.e2eeBanner}>

src/E2EELock.module.css

@@ -24,5 +24,5 @@ limitations under the License.
   margin: 8px;
 
   border-radius: 100%;
-  background-color: var(--subtle-primary);
+  background-color: var(--cpd-color-bg-subtle-primary);
 }

src/E2EELock.tsx

@@ -26,10 +26,7 @@ import { TooltipTrigger } from "./Tooltip";
 export const E2EELock = () => {
   const { t } = useTranslation();
   const tooltip = useCallback(
-    () =>
-      t(
-        "Element Call is temporarily not end-to-end encrypted while we test scalability."
-      ),
+    () => t("This call is not end-to-end encrypted."),
     [t]
   );
 

src/Facepile.module.css

@@ -34,7 +34,7 @@ limitations under the License.
 .facepile .avatar {
   position: absolute;
   top: 0;
-  border: 1px solid var(--system);
+  border: 1px solid var(--cpd-color-bg-canvas-default);
 }
 
 .facepile.md .avatar {

src/FullScreenView.tsx

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

src/Header.module.css

@@ -82,27 +82,6 @@ limitations under the License.
   stroke: white;
 }
 
-.backButton {
-  background: transparent;
-  border: none;
-  display: flex;
-  color: var(--primary-content);
-  cursor: pointer;
-  align-items: center;
-}
-
-.backButton h3 {
-  margin: 0;
-}
-
-.backButton > * {
-  margin-right: 12px;
-}
-
-.backButton > :last-child {
-  margin-right: 0;
-}
-
 .userName {
   font-weight: 600;
   margin-right: 8px;
@@ -111,15 +90,6 @@ limitations under the License.
   flex-shrink: 1;
 }
 
-.signOutButton {
-  background: transparent;
-  border: none;
-  color: rgb(255, 75, 85);
-  cursor: pointer;
-  font-weight: 600;
-  flex-shrink: 0;
-}
-
 .versionMismatchWarning {
   padding-left: 15px;
 }
@@ -134,7 +104,7 @@ limitations under the License.
   mask-image: url("./icons/AlertTriangleFilled.svg");
   mask-repeat: no-repeat;
   mask-size: contain;
-  background-color: var(--alert);
+  background-color: var(--cpd-color-icon-critical-primary);
   padding-right: 5px;
 }
 

src/ListBox.module.css

@@ -21,8 +21,8 @@ limitations under the License.
   overflow-y: auto;
   list-style: none;
   background-color: transparent;
-  border: 1px solid var(--quinary-content);
-  background-color: var(--background);
+  border: 1px solid var(--cpd-color-border-interactive-secondary);
+  background-color: var(--cpd-color-bg-canvas-default);
   border-radius: 8px;
 }
 
@@ -31,7 +31,7 @@ limitations under the License.
   align-items: center;
   justify-content: space-between;
   background-color: transparent;
-  color: var(--primary-content);
+  color: var(--cpd-color-text-primary);
   padding: 8px 16px;
   outline: none;
   cursor: pointer;
@@ -44,6 +44,6 @@ limitations under the License.
 }
 
 .option.disabled {
-  color: var(--quaternary-content);
-  background-color: var(--bgColor3);
+  color: var(--cpd-color-text-disabled);
+  background-color: var(--stopgap-bgColor3);
 }

src/Menu.module.css

@@ -27,7 +27,7 @@ limitations under the License.
   display: flex;
   align-items: center;
   padding: 0 12px;
-  color: var(--primary-content);
+  color: var(--cpd-color-text-primary);
   font-size: var(--font-size-body);
   text-overflow: ellipsis;
   overflow: hidden;
@@ -44,7 +44,11 @@ limitations under the License.
 
 .menuItem.focused,
 .menuItem:hover {
-  background-color: var(--quinary-content);
+  background-color: var(--cpd-color-bg-action-secondary-hovered);
+}
+
+.menuItem:active {
+  background-color: var(--cpd-color-bg-action-secondary-pressed);
 }
 
 .menuItem.focused:first-child,
@@ -65,5 +69,5 @@ limitations under the License.
 }
 
 .checkIcon * {
-  stroke: var(--primary-content);
+  stroke: var(--cpd-color-text-primary);
 }

src/Menu.tsx

@@ -25,7 +25,7 @@ import { Node } from "@react-types/shared";
 import styles from "./Menu.module.css";
 
 interface MenuProps<T> extends AriaMenuOptions<T> {
-  className?: String;
+  className?: string;
   onClose: () => void;
   onAction: (value: Key) => void;
   label?: string;

src/Modal.module.css

@@ -28,7 +28,7 @@ limitations under the License.
 }
 
 .modal {
-  background: #21262c;
+  background: var(--cpd-color-bg-subtle-secondary);
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
   border-radius: 8px;
   max-width: 90vw;

src/Tooltip.module.css

@@ -15,12 +15,12 @@ limitations under the License.
 */
 
 .tooltip {
-  background-color: var(--system);
+  background-color: var(--cpd-color-bg-subtle-secondary);
   flex-direction: row;
   justify-content: center;
   align-items: center;
   padding: 10px;
-  color: var(--primary-content);
+  color: var(--cpd-color-text-primary);
   border-radius: 8px;
   max-width: 135px;
   width: max-content;

src/UrlParams.ts

@@ -19,6 +19,8 @@ import { useLocation } from "react-router-dom";
 
 import { Config } from "./config/Config";
 
+export const PASSWORD_STRING = "password=";
+
 interface UrlParams {
   roomAlias: string | null;
   roomId: string | null;
@@ -86,6 +88,10 @@ interface UrlParams {
    * user's homeserver doesn't provide any.
    */
   allowIceFallback: boolean;
+  /**
+   * E2EE password
+   */
+  password: string | null;
 }
 
 /**
@@ -102,12 +108,15 @@ export const getUrlParams = (
   pathname = window.location.pathname,
   hash = window.location.hash
 ): UrlParams => {
-  let roomAlias: string | undefined;
+  // This is legacy code - we're moving away from using aliases
+  let roomAlias: string | null = null;
   if (!ignoreRoomAlias) {
-    if (hash === "") {
+    // Here we handle the beginning of the alias and make sure it starts with a
+    // "#"
+    if (hash === "" || hash.startsWith("#?")) {
       roomAlias = pathname.substring(1); // Strip the "/"
 
-      // Delete "/room/" and "?", if present
+      // Delete "/room/", if present
       if (roomAlias.startsWith("room/")) {
         roomAlias = roomAlias.substring("room/".length);
       }
@@ -119,9 +128,17 @@ export const getUrlParams = (
       roomAlias = hash;
     }
 
-    // Add server part, if not present
-    if (!roomAlias.includes(":")) {
-      roomAlias = `${roomAlias}:${Config.defaultServerName()}`;
+    // Delete "?" and what comes afterwards
+    roomAlias = roomAlias.split("?")[0];
+
+    if (roomAlias.length <= 1) {
+      // Make roomAlias is null, if it only is a "#"
+      roomAlias = null;
+    } else {
+      // Add server part, if not present
+      if (!roomAlias.includes(":")) {
+        roomAlias = `${roomAlias}:${Config.defaultServerName()}`;
+      }
     }
   }
 
@@ -145,9 +162,18 @@ export const getUrlParams = (
 
   const fontScale = parseFloat(getParam("fontScale") ?? "");
 
+  // Make sure roomId is valid
+  let roomId: string | null = getParam("roomId");
+  if (!roomId?.startsWith("!")) {
+    roomId = null;
+  } else if (!roomId.includes("")) {
+    roomId = null;
+  }
+
   return {
-    roomAlias: !roomAlias || roomAlias.includes("!") ? null : roomAlias,
-    roomId: getParam("roomId"),
+    roomAlias,
+    roomId,
+    password: getParam("password"),
     viaServers: getAllParams("via"),
     isEmbedded: hasParam("embed"),
     preload: hasParam("preload"),

src/UserMenu.module.css

@@ -17,10 +17,12 @@ limitations under the License.
 .menuIcon {
   width: 24px;
   height: 24px;
+
+  flex-shrink: 0;
 }
 
 .userButton svg * {
-  fill: var(--primary-content);
+  fill: var(--cpd-color-icon-primary);
 }
 
 .avatar {

src/analytics/PosthogAnalytics.ts

@@ -20,7 +20,7 @@ import { MatrixClient } from "matrix-js-sdk";
 import { Buffer } from "buffer";
 
 import { widget } from "../widget";
-import { getSetting, setSetting, settingsBus } from "../settings/useSetting";
+import { getSetting, setSetting, getSettingKey } from "../settings/useSetting";
 import {
   CallEndedTracker,
   CallStartedTracker,
@@ -30,9 +30,11 @@ import {
   MuteMicrophoneTracker,
   UndecryptableToDeviceEventTracker,
   QualitySurveyEventTracker,
+  CallDisconnectedEventTracker,
 } from "./PosthogEvents";
 import { Config } from "../config/Config";
 import { getUrlParams } from "../UrlParams";
+import { localStorageBus } from "../useLocalStorage";
 
 /* Posthog analytics tracking.
  *
@@ -412,7 +414,7 @@ export class PosthogAnalytics {
     //  * When the user changes their preferences on this device
     // Note that for new accounts, pseudonymousAnalyticsOptIn won't be set, so updateAnonymityFromSettings
     // won't be called (i.e. this.anonymity will be left as the default, until the setting changes)
-    settingsBus.on("opt-in-analytics", (optInAnalytics) => {
+    localStorageBus.on(getSettingKey("opt-in-analytics"), (optInAnalytics) => {
       this.updateAnonymityAndIdentifyUser(optInAnalytics);
     });
   }
@@ -437,4 +439,5 @@ export class PosthogAnalytics {
   public eventMuteCamera = new MuteCameraTracker();
   public eventUndecryptableToDevice = new UndecryptableToDeviceEventTracker();
   public eventQualitySurvey = new QualitySurveyEventTracker();
+  public eventCallDisconnected = new CallDisconnectedEventTracker();
 }

src/analytics/PosthogEvents.ts

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

src/auth/LoginPage.module.css

@@ -81,7 +81,7 @@ limitations under the License.
 }
 
 .authLinks a {
-  color: var(--accent);
+  color: var(--cpd-color-text-action-accent);
   text-decoration: none;
   font-weight: normal;
 }

src/button/Button.module.css

@@ -46,8 +46,8 @@ limitations under the License.
 }
 
 .button {
-  color: var(--primary-content);
-  background-color: var(--accent);
+  color: var(--stopgap-color-on-solid-accent);
+  background-color: var(--cpd-color-text-action-accent);
 }
 
 .button:focus,
@@ -62,7 +62,8 @@ limitations under the License.
 }
 
 .toolbarButton:disabled {
-  opacity: 0.55;
+  background-color: var(--cpd-color-bg-action-primary-disabled);
+  box-shadow: none;
 }
 
 .toolbarButton,
@@ -70,72 +71,76 @@ limitations under the License.
   width: 50px;
   height: 50px;
   border-radius: 50px;
-  background-color: var(--system);
-}
-
-.toolbarButton:hover,
-.toolbarButtonSecondary:hover {
-  background-color: var(--quinary-content);
+  background-color: var(--cpd-color-bg-canvas-default);
+  color: var(--cpd-color-icon-primary);
+  border: 1px solid var(--cpd-color-gray-400);
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
 }
 
 .toolbarButton.on,
 .toolbarButton.off {
-  background-color: var(--primary-content);
+  background-color: var(--cpd-color-bg-action-primary-rest);
+  color: var(--cpd-color-icon-on-solid-primary);
 }
 
 .toolbarButtonSecondary.on {
-  background-color: var(--accent);
+  background-color: var(--cpd-color-text-success-primary);
+}
+
+.toolbarButton:active,
+.toolbarButtonSecondary:active {
+  background-color: var(--cpd-color-bg-subtle-primary);
+  border: none;
+  box-shadow: none;
+}
+
+.toolbarButton.on:active,
+.toolbarButton.off:active {
+  background-color: var(--cpd-color-bg-action-primary-pressed);
 }
 
 .iconButton:not(.stroke) svg * {
-  fill: var(--primary-content);
+  fill: var(--cpd-color-bg-action-primary-rest);
 }
 
-.iconButton:not(.stroke):hover svg * {
-  fill: var(--accent);
+.iconButton:not(.stroke):tertiary svg * {
+  fill: var(--cpd-color-icon-accent-tertiary);
 }
 
 .iconButton.on:not(.stroke) svg * {
-  fill: var(--accent);
+  fill: var(--cpd-color-icon-accent-tertiary);
 }
 
 .iconButton.on.stroke svg * {
-  stroke: var(--accent);
+  stroke: var(--cpd-color-icon-accent-tertiary);
 }
 
-.hangupButton,
-.hangupButton:hover {
-  background-color: var(--alert);
+.hangupButton {
+  background-color: var(--cpd-color-bg-critical-primary);
+  border-color: var(--cpd-color-border-critical-subtle);
+  color: var(--stopgap-color-on-solid-accent);
 }
 
-.toolbarButton.on svg * {
-  fill: var(--accent);
-}
-
-.toolbarButton.off svg * {
-  fill: #21262c;
-}
-
-.toolbarButtonSecondary.on svg * {
-  fill: var(--primary-content);
+.hangupButton:active {
+  background-color: var(--cpd-color-bg-critical-pressed);
 }
 
 .secondary,
 .copyButton {
-  color: var(--accent);
-  border: 2px solid var(--accent);
+  color: var(--cpd-color-text-action-accent);
+  border: 2px solid var(--cpd-color-text-action-accent);
   background-color: transparent;
 }
 
 .secondaryHangup {
-  color: var(--alert);
-  border: 2px solid var(--alert);
+  color: var(--cpd-color-text-critical-primary);
+  border: 2px solid var(--cpd-color-border-critical-primary);
   background-color: transparent;
 }
 
 .copyButton.secondaryCopy {
-  color: var(--primary-content);
-  border-color: var(--primary-content);
+  color: var(--cpd-color-text-primary);
+  border-color: var(--cpd-color-border-interactive-primary);
 }
 
 .copyButton {
@@ -158,12 +163,12 @@ limitations under the License.
 }
 
 .copyButton:not(.on) svg * {
-  fill: var(--accent);
+  fill: var(--cpd-color-icon-accent-tertiary);
 }
 
 .copyButton.on {
   border-color: transparent;
-  background-color: var(--accent);
+  background-color: var(--cpd-color-text-action-accent);
   color: white;
 }
 
@@ -172,32 +177,28 @@ limitations under the License.
 }
 
 .copyButton.secondaryCopy:not(.on) svg * {
-  fill: var(--primary-content);
+  fill: var(--cpd-color-bg-action-primary-rest);
 }
 
 .iconCopyButton svg * {
-  fill: var(--tertiary-content);
-}
-
-.iconCopyButton:hover svg * {
-  fill: var(--accent);
+  fill: var(--cpd-color-icon-secondary);
 }
 
 .iconCopyButton.on svg *,
 .iconCopyButton.on:hover svg * {
   fill: transparent;
-  stroke: var(--accent);
+  stroke: var(--cpd-color-text-action-accent);
 }
 
 .dropdownButton {
-  color: var(--primary-content);
+  color: var(--cpd-color-text-primary);
   padding: 2px 8px;
   border-radius: 8px;
 }
 
-.dropdownButton:hover,
+.dropdownButton:active,
 .dropdownButton.on {
-  background-color: var(--quinary-content);
+  background-color: var(--cpd-color-bg-action-secondary-pressed);
 }
 
 .dropdownButton svg {
@@ -205,7 +206,7 @@ limitations under the License.
 }
 
 .dropdownButton svg * {
-  fill: var(--primary-content);
+  fill: var(--cpd-color-icon-primary);
 }
 
 .lg {
@@ -215,6 +216,36 @@ limitations under the License.
 .linkButton {
   background-color: transparent;
   border: none;
-  color: var(--accent);
+  color: var(--cpd-color-text-action-accent);
   cursor: pointer;
 }
+
+@media (hover: hover) {
+  .toolbarButton:hover,
+  .toolbarButtonSecondary:hover {
+    background-color: var(--cpd-color-bg-subtle-primary);
+    border: none;
+    box-shadow: none;
+  }
+
+  .toolbarButton.on:hover,
+  .toolbarButton.off:hover {
+    background-color: var(--cpd-color-bg-action-primary-hovered);
+  }
+
+  .iconButton:not(.stroke):hover svg * {
+    fill: var(--cpd-color-icon-accent-tertiary);
+  }
+
+  .hangupButton:hover {
+    background-color: var(--cpd-color-bg-critical-hovered);
+  }
+
+  .iconCopyButton:hover svg * {
+    fill: var(--cpd-color-icon-accent-tertiary);
+  }
+
+  .dropdownButton:hover {
+    background-color: var(--cpd-color-bg-action-secondary-hovered);
+  }
+}

src/button/Button.tsx

@@ -19,17 +19,18 @@ import classNames from "classnames";
 import { useButton } from "@react-aria/button";
 import { mergeProps, useObjectRef } from "@react-aria/utils";
 import { useTranslation } from "react-i18next";
+import { Tooltip } from "@vector-im/compound-web";
+import { ReactComponent as MicOnSolidIcon } from "@vector-im/compound-design-tokens/icons/mic-on-solid.svg";
+import { ReactComponent as MicOffSolidIcon } from "@vector-im/compound-design-tokens/icons/mic-off-solid.svg";
+import { ReactComponent as VideoCallIcon } from "@vector-im/compound-design-tokens/icons/video-call.svg";
+import { ReactComponent as VideoCallOffIcon } from "@vector-im/compound-design-tokens/icons/video-call-off.svg";
+import { ReactComponent as EndCallIcon } from "@vector-im/compound-design-tokens/icons/end-call.svg";
+import { ReactComponent as ShareScreenSolidIcon } from "@vector-im/compound-design-tokens/icons/share-screen-solid.svg";
+import { ReactComponent as SettingsSolidIcon } from "@vector-im/compound-design-tokens/icons/settings-solid.svg";
+import { ReactComponent as UserAddSolidIcon } from "@vector-im/compound-design-tokens/icons/user-add-solid.svg";
+import { ReactComponent as ChevronDownIcon } from "@vector-im/compound-design-tokens/icons/chevron-down.svg";
 
 import styles from "./Button.module.css";
-import { ReactComponent as MicIcon } from "../icons/Mic.svg";
-import { ReactComponent as MuteMicIcon } from "../icons/MuteMic.svg";
-import { ReactComponent as VideoIcon } from "../icons/Video.svg";
-import { ReactComponent as DisableVideoIcon } from "../icons/DisableVideo.svg";
-import { ReactComponent as HangupIcon } from "../icons/Hangup.svg";
-import { ReactComponent as ScreenshareIcon } from "../icons/Screenshare.svg";
-import { ReactComponent as SettingsIcon } from "../icons/Settings.svg";
-import { ReactComponent as AddUserIcon } from "../icons/AddUser.svg";
-import { ReactComponent as ArrowDownIcon } from "../icons/ArrowDown.svg";
 import { ReactComponent as Fullscreen } from "../icons/Fullscreen.svg";
 import { ReactComponent as FullscreenExit } from "../icons/FullscreenExit.svg";
 import { TooltipTrigger } from "../Tooltip";
@@ -129,7 +130,7 @@ export const Button = forwardRef<HTMLButtonElement, Props>(
       >
         <>
           {children}
-          {variant === "dropdown" && <ArrowDownIcon />}
+          {variant === "dropdown" && <ChevronDownIcon />}
         </>
       </button>
     );
@@ -147,13 +148,11 @@ export function MicButton({
   const { t } = useTranslation();
 
   return (
-    <TooltipTrigger
-      tooltip={() => (muted ? t("Unmute microphone") : t("Mute microphone"))}
-    >
-      <Button variant="toolbar" {...rest} off={muted}>
-        {muted ? <MuteMicIcon /> : <MicIcon />}
+    <Tooltip label={muted ? t("Microphone off") : t("Microphone on")}>
+      <Button variant="toolbar" {...rest} on={!muted}>
+        {muted ? <MicOffSolidIcon /> : <MicOnSolidIcon />}
       </Button>
-    </TooltipTrigger>
+    </Tooltip>
   );
 }
 
@@ -168,13 +167,11 @@ export function VideoButton({
   const { t } = useTranslation();
 
   return (
-    <TooltipTrigger
-      tooltip={() => (muted ? t("Turn on camera") : t("Turn off camera"))}
-    >
-      <Button variant="toolbar" {...rest} off={muted}>
-        {muted ? <DisableVideoIcon /> : <VideoIcon />}
+    <Tooltip label={muted ? t("Video off") : t("Video on")}>
+      <Button variant="toolbar" {...rest} on={!muted}>
+        {muted ? <VideoCallOffIcon /> : <VideoCallIcon />}
       </Button>
-    </TooltipTrigger>
+    </Tooltip>
   );
 }
 
@@ -191,13 +188,11 @@ export function ScreenshareButton({
   const { t } = useTranslation();
 
   return (
-    <TooltipTrigger
-      tooltip={() => (enabled ? t("Stop sharing screen") : t("Share screen"))}
-    >
-      <Button variant="toolbarSecondary" {...rest} on={enabled}>
-        <ScreenshareIcon />
+    <Tooltip label={enabled ? t("Sharing screen") : t("Share screen")}>
+      <Button variant="toolbar" {...rest} on={enabled}>
+        <ShareScreenSolidIcon />
       </Button>
-    </TooltipTrigger>
+    </Tooltip>
   );
 }
 
@@ -210,18 +205,17 @@ export function HangupButton({
   [index: string]: unknown;
 }) {
   const { t } = useTranslation();
-  const tooltip = useCallback(() => t("Leave"), [t]);
 
   return (
-    <TooltipTrigger tooltip={tooltip}>
+    <Tooltip label={t("End call")}>
       <Button
         variant="toolbar"
         className={classNames(styles.hangupButton, className)}
         {...rest}
       >
-        <HangupIcon />
+        <EndCallIcon />
       </Button>
-    </TooltipTrigger>
+    </Tooltip>
   );
 }
 
@@ -234,14 +228,13 @@ export function SettingsButton({
   [index: string]: unknown;
 }) {
   const { t } = useTranslation();
-  const tooltip = useCallback(() => t("Settings"), [t]);
 
   return (
-    <TooltipTrigger tooltip={tooltip}>
+    <Tooltip label={t("Settings")}>
       <Button variant="toolbar" {...rest}>
-        <SettingsIcon width={20} height={20} />
+        <SettingsSolidIcon />
       </Button>
-    </TooltipTrigger>
+    </Tooltip>
   );
 }
 
@@ -256,14 +249,13 @@ export function InviteButton({
   [index: string]: unknown;
 }) {
   const { t } = useTranslation();
-  const tooltip = useCallback(() => t("Invite"), [t]);
 
   return (
-    <TooltipTrigger tooltip={tooltip}>
+    <Tooltip label={t("Invite")}>
       <Button variant={variant} {...rest}>
-        <AddUserIcon />
+        <UserAddSolidIcon />
       </Button>
-    </TooltipTrigger>
+    </Tooltip>
   );
 }
 

src/e2ee/sharedKeyManagement.ts

@@ -0,0 +1,85 @@
+/*
+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 { useEffect, useMemo } from "react";
+
+import { useEnableE2EE } from "../settings/useSetting";
+import { useLocalStorage } from "../useLocalStorage";
+import { useClient } from "../ClientContext";
+import { PASSWORD_STRING, useUrlParams } from "../UrlParams";
+
+export const getRoomSharedKeyLocalStorageKey = (roomId: string): string =>
+  `room-shared-key-${roomId}`;
+
+export const useInternalRoomSharedKey = (
+  roomId: string
+): [string | null, (value: string) => void] => {
+  const key = useMemo(() => getRoomSharedKeyLocalStorageKey(roomId), [roomId]);
+  const [e2eeEnabled] = useEnableE2EE();
+  const [roomSharedKey, setRoomSharedKey] = useLocalStorage(key);
+
+  return [e2eeEnabled ? roomSharedKey : null, setRoomSharedKey];
+};
+
+export const useRoomSharedKey = (roomId: string): string | null => {
+  return useInternalRoomSharedKey(roomId)[0];
+};
+
+export const useManageRoomSharedKey = (roomId: string): string | null => {
+  const { password } = useUrlParams();
+  const [e2eeSharedKey, setE2EESharedKey] = useInternalRoomSharedKey(roomId);
+
+  useEffect(() => {
+    if (!password) return;
+    if (password === "") return;
+    if (password === e2eeSharedKey) return;
+
+    setE2EESharedKey(password);
+  }, [password, e2eeSharedKey, setE2EESharedKey]);
+
+  useEffect(() => {
+    const hash = location.hash;
+
+    if (!hash.includes("?")) return;
+    if (!hash.includes(PASSWORD_STRING)) return;
+    if (password !== e2eeSharedKey) return;
+
+    const [hashStart, passwordStart] = hash.split(PASSWORD_STRING);
+    const hashEnd = passwordStart.split("&")[1];
+
+    location.replace((hashStart ?? "") + (hashEnd ?? ""));
+  }, [password, e2eeSharedKey]);
+
+  return e2eeSharedKey;
+};
+
+export const useIsRoomE2EE = (roomId: string): boolean | null => {
+  const { isEmbedded } = useUrlParams();
+  const client = useClient();
+  const room = useMemo(
+    () => client.client?.getRoom(roomId) ?? null,
+    [roomId, client.client]
+  );
+  const isE2EE = useMemo(() => {
+    if (isEmbedded) {
+      return false;
+    } else {
+      return room ? !room?.getCanonicalAlias() : null;
+    }
+  }, [isEmbedded, room]);
+
+  return isE2EE;
+};

src/home/CallList.module.css

@@ -26,7 +26,7 @@ limitations under the License.
 .callTile {
   height: 95px;
   padding: 12px;
-  background-color: var(--system);
+  background-color: var(--cpd-color-bg-subtle-secondary);
   border-radius: 8px;
   overflow: hidden;
   box-sizing: border-box;
@@ -52,7 +52,7 @@ limitations under the License.
   flex-direction: column;
   flex: 1;
   padding: 0 16px;
-  color: var(--primary-content);
+  color: var(--cpd-color-text-primary);
   min-width: 0;
 }
 

src/home/CallList.tsx

@@ -23,8 +23,9 @@ import { Facepile } from "../Facepile";
 import { Avatar, Size } from "../Avatar";
 import styles from "./CallList.module.css";
 import { getRoomUrl } from "../matrix-utils";
-import { Body, Caption } from "../typography/Typography";
+import { Body } from "../typography/Typography";
 import { GroupCallRoom } from "./useGroupCallRooms";
+import { useRoomSharedKey } from "../e2ee/sharedKeyManagement";
 
 interface CallListProps {
   rooms: GroupCallRoom[];
@@ -35,13 +36,13 @@ export function CallList({ rooms, client, disableFacepile }: CallListProps) {
   return (
     <>
       <div className={styles.callList}>
-        {rooms.map(({ roomAlias, roomName, avatarUrl, participants }) => (
+        {rooms.map(({ room, roomAlias, roomName, avatarUrl, participants }) => (
           <CallTile
             key={roomAlias}
             client={client}
             name={roomName}
             avatarUrl={avatarUrl}
-            roomAlias={roomAlias}
+            roomId={room.roomId}
             participants={participants}
             disableFacepile={disableFacepile}
           />
@@ -59,7 +60,7 @@ export function CallList({ rooms, client, disableFacepile }: CallListProps) {
 interface CallTileProps {
   name: string;
   avatarUrl: string;
-  roomAlias: string;
+  roomId: string;
   participants: RoomMember[];
   client: MatrixClient;
   disableFacepile?: boolean;
@@ -67,17 +68,16 @@ interface CallTileProps {
 function CallTile({
   name,
   avatarUrl,
-  roomAlias,
+  roomId,
   participants,
   client,
   disableFacepile,
 }: CallTileProps) {
+  const roomSharedKey = useRoomSharedKey(roomId);
+
   return (
     <div className={styles.callTile}>
-      <Link
-        to={`/${roomAlias.substring(1).split(":")[0]}`}
-        className={styles.callTileLink}
-      >
+      <Link to={`/room/#?roomId=${roomId}`} className={styles.callTileLink}>
         <Avatar
           size={Size.LG}
           bgKey={name}
@@ -89,7 +89,6 @@ function CallTile({
           <Body overflowEllipsis fontWeight="semiBold">
             {name}
           </Body>
-          <Caption overflowEllipsis>{getRoomUrl(roomAlias)}</Caption>
           {participants && !disableFacepile && (
             <Facepile
               className={styles.facePile}
@@ -103,7 +102,7 @@ function CallTile({
       <CopyButton
         className={styles.copyButton}
         variant="icon"
-        value={getRoomUrl(roomAlias)}
+        value={getRoomUrl(roomId, roomSharedKey ?? undefined)}
       />
     </div>
   );

src/home/RegisteredView.module.css

@@ -39,5 +39,5 @@ limitations under the License.
 }
 
 .notice {
-  color: var(--secondary-content);
+  color: var(--cpd-color-text-secondary);
 }

src/home/RegisteredView.tsx

@@ -17,6 +17,7 @@ limitations under the License.
 import { useState, useCallback, FormEvent, FormEventHandler } from "react";
 import { useHistory } from "react-router-dom";
 import { MatrixClient } from "matrix-js-sdk/src/client";
+import { randomString } from "matrix-js-sdk/src/randomstring";
 import { useTranslation } from "react-i18next";
 
 import {
@@ -37,9 +38,11 @@ import { JoinExistingCallModal } from "./JoinExistingCallModal";
 import { Caption, Title } from "../typography/Typography";
 import { Form } from "../form/Form";
 import { CallType, CallTypeDropdown } from "./CallTypeDropdown";
-import { useOptInAnalytics } from "../settings/useSetting";
+import { useEnableE2EE, useOptInAnalytics } from "../settings/useSetting";
 import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
 import { E2EEBanner } from "../E2EEBanner";
+import { setLocalStorageItem } from "../useLocalStorage";
+import { getRoomSharedKeyLocalStorageKey } from "../e2ee/sharedKeyManagement";
 
 interface Props {
   client: MatrixClient;
@@ -54,6 +57,7 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
   const history = useHistory();
   const { t } = useTranslation();
   const { modalState, modalProps } = useModalTriggerState();
+  const [e2eeEnabled] = useEnableE2EE();
 
   const onSubmit: FormEventHandler<HTMLFormElement> = useCallback(
     (e: FormEvent) => {
@@ -70,16 +74,23 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
         setError(undefined);
         setLoading(true);
 
-        const [roomAlias] = await createRoom(client, roomName, ptt);
+        const roomId = (
+          await createRoom(client, roomName, ptt, e2eeEnabled ?? false)
+        )[1];
 
-        if (roomAlias) {
-          history.push(`/${roomAlias.substring(1).split(":")[0]}`);
+        if (e2eeEnabled) {
+          setLocalStorageItem(
+            getRoomSharedKeyLocalStorageKey(roomId),
+            randomString(32)
+          );
         }
+
+        history.push(`/room/#?roomId=${roomId}`);
       }
 
       submit().catch((error) => {
         if (error.errcode === "M_ROOM_IN_USE") {
-          setExistingRoomId(roomAliasLocalpartFromRoomName(roomName));
+          setExistingAlias(roomAliasLocalpartFromRoomName(roomName));
           setLoading(false);
           setError(undefined);
           modalState.open();
@@ -90,15 +101,15 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
         }
       });
     },
-    [client, history, modalState, callType]
+    [client, history, modalState, callType, e2eeEnabled]
   );
 
   const recentRooms = useGroupCallRooms(client);
 
-  const [existingRoomId, setExistingRoomId] = useState<string>();
+  const [existingAlias, setExistingAlias] = useState<string>();
   const onJoinExistingRoom = useCallback(() => {
-    history.push(`/${existingRoomId}`);
-  }, [history, existingRoomId]);
+    history.push(`/${existingAlias}`);
+  }, [history, existingAlias]);
 
   const callNameLabel =
     callType === CallType.Video

src/home/UnauthenticatedView.module.css

@@ -47,5 +47,5 @@ limitations under the License.
 }
 
 .notice {
-  color: var(--secondary-content);
+  color: var(--cpd-color-text-secondary);
 }

src/home/UnauthenticatedView.tsx

@@ -40,9 +40,11 @@ import styles from "./UnauthenticatedView.module.css";
 import commonStyles from "./common.module.css";
 import { generateRandomName } from "../auth/generateRandomName";
 import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
-import { useOptInAnalytics } from "../settings/useSetting";
+import { useEnableE2EE, useOptInAnalytics } from "../settings/useSetting";
 import { Config } from "../config/Config";
 import { E2EEBanner } from "../E2EEBanner";
+import { getRoomSharedKeyLocalStorageKey } from "../e2ee/sharedKeyManagement";
+import { setLocalStorageItem } from "../useLocalStorage";
 
 export const UnauthenticatedView: FC = () => {
   const { setClient } = useClient();
@@ -58,6 +60,8 @@ export const UnauthenticatedView: FC = () => {
   const history = useHistory();
   const { t } = useTranslation();
 
+  const [e2eeEnabled] = useEnableE2EE();
+
   const onSubmit: FormEventHandler<HTMLFormElement> = useCallback(
     (e) => {
       e.preventDefault();
@@ -79,9 +83,18 @@ export const UnauthenticatedView: FC = () => {
           true
         );
 
-        let roomAlias: string;
+        let roomId: string;
         try {
-          [roomAlias] = await createRoom(client, roomName, ptt);
+          roomId = (
+            await createRoom(client, roomName, ptt, e2eeEnabled ?? false)
+          )[1];
+
+          if (e2eeEnabled) {
+            setLocalStorageItem(
+              getRoomSharedKeyLocalStorageKey(roomId),
+              randomString(32)
+            );
+          }
         } catch (error) {
           if (!setClient) {
             throw error;
@@ -110,7 +123,7 @@ export const UnauthenticatedView: FC = () => {
         }
 
         setClient({ client, session });
-        history.push(`/${roomAlias.substring(1).split(":")[0]}`);
+        history.push(`/room/#?roomId=${roomId}`);
       }
 
       submit().catch((error) => {
@@ -120,7 +133,16 @@ export const UnauthenticatedView: FC = () => {
         reset();
       });
     },
-    [register, reset, execute, history, callType, modalState, setClient]
+    [
+      register,
+      reset,
+      execute,
+      history,
+      callType,
+      modalState,
+      setClient,
+      e2eeEnabled,
+    ]
   );
 
   const callNameLabel =

src/home/useGroupCallRooms.ts

@@ -89,8 +89,7 @@ export function useGroupCallRooms(client: MatrixClient): GroupCallRoom[] {
 
       const groupCalls = client.groupCallEventHandler.groupCalls.values();
       const rooms = Array.from(groupCalls).map((groupCall) => groupCall.room);
-      const filteredRooms = rooms.filter((r) => r.getCanonicalAlias()); // We don't display rooms without an alias
-      const sortedRooms = sortRooms(client, filteredRooms);
+      const sortedRooms = sortRooms(client, rooms);
       const items = sortedRooms.map((room) => {
         const groupCall = client.getGroupCallForRoom(room.roomId)!;
 

src/index.css

@@ -21,6 +21,8 @@ limitations under the License.
    (to avoid having to maintain a fork of Inter). */
 
 @import "normalize.css/normalize.css";
+@import "@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css";
+@import "@vector-im/compound-web/dist/style.css";
 
 :root {
   --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
@@ -37,22 +39,17 @@ limitations under the License.
   --font-size-title: calc(24px * var(--font-scale));
   --font-size-headline: calc(32px * var(--font-scale));
 
-  --accent: #0dbd8b;
-  --accent-20: #0dbd8b33;
-  --alert: #ff5b55;
-  --alert-20: #ff5b5533;
-  --links: #0086e6;
-  --primary-content: #ffffff;
-  --secondary-content: #a9b2bc;
-  --tertiary-content: #8e99a4;
-  --tertiary-content-20: #8e99a433;
-  --quaternary-content: #6f7882;
-  --quinary-content: #394049;
-  --system: #21262c;
-  --background: #15191e;
-  --background-85: rgba(23, 25, 28, 0.85);
-  --bgColor3: #444; /* This isn't found anywhere in the designs or Compound */
-  --subtle-primary: #26282d;
+  --cpd-color-border-accent: var(--cpd-color-green-1100);
+  /* These colors are needed during the transitionary period between the old and
+  new Compound design systems, but should be removed ASAP */
+  --stopgap-color-on-solid-accent: var(--cpd-color-bg-canvas-default);
+  --stopgap-background-85: rgba(255, 255, 255, 0.85);
+  --stopgap-bgColor3: #444;
+}
+
+.cpd-theme-dark {
+  --stopgap-color-on-solid-accent: var(--cpd-color-text-primary);
+  --stopgap-background-85: rgba(16, 19, 23, 0.85);
 }
 
 @font-face {
@@ -136,8 +133,8 @@ limitations under the License.
 }
 
 body {
-  background-color: var(--background);
-  color: var(--primary-content);
+  background-color: var(--cpd-color-bg-canvas-default);
+  color: var(--cpd-color-text-primary);
   color-scheme: dark;
   margin: 0;
   font-family: var(--font-family);
@@ -204,7 +201,7 @@ p {
 }
 
 a {
-  color: var(--accent);
+  color: var(--cpd-color-text-action-accent);
   text-decoration: none;
 }
 
@@ -216,8 +213,8 @@ a:active {
 hr {
   width: calc(100% - 24px);
   border: none;
-  border-top: 1px solid var(--quinary-content);
-  color: var(--quaternary-content);
+  border-top: 1px solid var(--cpd-color-border-interactive-secondary);
+  color: var(--cpd-color-border-interactive-secondary);
   overflow: visible;
   text-align: center;
   height: 5px;

src/initializer.tsx

@@ -45,6 +45,12 @@ class DependencyLoadStates {
 
 export class Initializer {
   private static internalInstance: Initializer;
+  private isInitialized = false;
+
+  public static isInitialized(): boolean {
+    return Initializer.internalInstance?.isInitialized;
+  }
+
   public static initBeforeReact() {
     // this maybe also needs to return a promise in the future,
     // if we have to do async inits before showing the loading screen
@@ -81,62 +87,10 @@ export class Initializer {
       });
 
     // Custom Themeing
-    if (import.meta.env.VITE_CUSTOM_THEME) {
-      const style = document.documentElement.style;
-      style.setProperty(
-        "--accent",
-        import.meta.env.VITE_THEME_ACCENT as string
-      );
-      style.setProperty(
-        "--accent-20",
-        import.meta.env.VITE_THEME_ACCENT_20 as string
-      );
-      style.setProperty("--alert", import.meta.env.VITE_THEME_ALERT as string);
-      style.setProperty(
-        "--alert-20",
-        import.meta.env.VITE_THEME_ALERT_20 as string
-      );
-      style.setProperty("--links", import.meta.env.VITE_THEME_LINKS as string);
-      style.setProperty(
-        "--primary-content",
-        import.meta.env.VITE_THEME_PRIMARY_CONTENT as string
-      );
-      style.setProperty(
-        "--secondary-content",
-        import.meta.env.VITE_THEME_SECONDARY_CONTENT as string
-      );
-      style.setProperty(
-        "--tertiary-content",
-        import.meta.env.VITE_THEME_TERTIARY_CONTENT as string
-      );
-      style.setProperty(
-        "--tertiary-content-20",
-        import.meta.env.VITE_THEME_TERTIARY_CONTENT_20 as string
-      );
-      style.setProperty(
-        "--quaternary-content",
-        import.meta.env.VITE_THEME_QUATERNARY_CONTENT as string
-      );
-      style.setProperty(
-        "--quinary-content",
-        import.meta.env.VITE_THEME_QUINARY_CONTENT as string
-      );
-      style.setProperty(
-        "--system",
-        import.meta.env.VITE_THEME_SYSTEM as string
-      );
-      style.setProperty(
-        "--background",
-        import.meta.env.VITE_THEME_BACKGROUND as string
-      );
-      style.setProperty(
-        "--background-85",
-        import.meta.env.VITE_THEME_BACKGROUND_85 as string
-      );
-      style.setProperty(
-        "--subtle-primary",
-        import.meta.env.VITE_THEME_SUBTLE_PRIMARY as string
-      );
+    if (import.meta.env.VITE_CUSTOM_CSS) {
+      const style = document.createElement("style");
+      style.textContent = import.meta.env.VITE_CUSTOM_CSS;
+      document.head.appendChild(style);
     }
 
     // Custom fonts
@@ -227,6 +181,7 @@ export class Initializer {
     if (this.loadStates.allDepsAreLoaded()) {
       // resolve if there is no dependency that is not loaded
       resolve();
+      this.isInitialized = true;
     }
   }
 

src/input/AvatarInputField.module.css

@@ -42,7 +42,7 @@ limitations under the License.
   position: absolute;
   bottom: 11px;
   right: -4px;
-  background-color: var(--quinary-content);
+  background-color: var(--cpd-color-subtle-primary);
   width: 20px;
   height: 20px;
   border-radius: 10px;
@@ -53,7 +53,7 @@ limitations under the License.
 }
 
 .removeButton {
-  color: var(--accent);
+  color: var(--cpd-color-text-action-accent);
   font-size: var(--font-size-caption);
   padding: 6px 0;
 }

src/input/Input.module.css

@@ -42,7 +42,7 @@ limitations under the License.
 .inputField {
   border-radius: 4px;
   transition: border-color 0.25s;
-  border: 1px solid var(--quinary-content);
+  border: 1px solid var(--cpd-color-border-interactive-primary);
 }
 
 .inputField input,
@@ -52,8 +52,8 @@ limitations under the License.
   border: none;
   border-radius: 4px;
   padding: 12px 9px 10px 9px;
-  color: var(--primary-content);
-  background-color: var(--background);
+  color: var(--cpd-color-text-primary);
+  background-color: var(--cpd-color-bg-canvas-default);
   flex: 1;
   min-width: 0;
 }
@@ -61,7 +61,7 @@ limitations under the License.
 .inputField.disabled input,
 .inputField.disabled textarea,
 .inputField.disabled span {
-  color: var(--quaternary-content);
+  color: var(--cpd-color-text-disabled);
 }
 
 .inputField span {
@@ -81,13 +81,13 @@ limitations under the License.
 .inputField input:placeholder-shown:focus::placeholder,
 .inputField textarea:placeholder-shown:focus::placeholder {
   transition: color 0.25s ease-in 0.1s;
-  color: var(--quaternary-content);
+  color: var(--cpd-color-text-placeholder);
 }
 
 .inputField label {
   transition: font-size 0.25s ease-out 0.1s, color 0.25s ease-out 0.1s,
     top 0.25s ease-out 0.1s, background-color 0.25s ease-out 0.1s;
-  color: var(--tertiary-content);
+  color: var(--cpd-color-text-secondary);
   background-color: transparent;
   font-size: var(--font-size-body);
   position: absolute;
@@ -103,7 +103,7 @@ limitations under the License.
 }
 
 .inputField:focus-within {
-  border-color: var(--links);
+  border-color: var(--cpd-color-text-link-external);
 }
 
 .inputField input:focus,
@@ -117,7 +117,7 @@ limitations under the License.
 .inputField textarea:focus + label,
 .inputField textarea:not(:placeholder-shown) + label,
 .inputField.prefix textarea + label {
-  background-color: var(--system);
+  background-color: var(--cpd-color-bg-canvas-default);
   transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
     top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
   font-size: var(--font-size-micro);
@@ -128,7 +128,7 @@ limitations under the License.
 
 .inputField input:focus + label,
 .inputField textarea:focus + label {
-  color: var(--links);
+  color: var(--cpd-color-border-focused);
 }
 
 .checkboxField {
@@ -169,11 +169,11 @@ limitations under the License.
 
 .checkboxField.disabled,
 .checkboxField.disabled .description {
-  color: var(--quinary-content);
+  color: var(--cpd-color-text-disabled);
 }
 
 .checkboxField.disabled .checkbox {
-  border-color: var(--quinary-content);
+  border-color: var(--cpd-color-border-disabled);
 }
 
 .checkbox svg {
@@ -181,12 +181,12 @@ limitations under the License.
 }
 
 .checkbox svg * {
-  stroke: var(--primary-content);
+  stroke: var(--stopgap-color-on-solid-accent);
 }
 
 .checkboxField input[type="checkbox"]:checked + label > .checkbox {
-  background: var(--accent);
-  border-color: var(--accent);
+  background: var(--cpd-color-text-action-accent);
+  border-color: var(--cpd-color-text-action-accent);
 }
 
 .checkboxField input[type="checkbox"]:checked + label > .checkbox svg {
@@ -194,18 +194,18 @@ limitations under the License.
 }
 
 .checkboxField:focus-within .checkbox {
-  border: 1.5px solid var(--links) !important;
+  border: 1.5px solid var(--cpd-color-text-link-external) !important;
 }
 
 .errorMessage {
   margin: 0;
   font-size: var(--font-size-caption);
-  color: var(--alert);
+  color: var(--cpd-color-text-critical-primary);
   font-weight: 600;
 }
 
 .description {
-  color: var(--secondary-content);
+  color: var(--cpd-color-text-secondary);
   margin-left: 26px;
   width: 100%; /* Ensure that it breaks onto the next row */
 }

src/input/SelectInput.module.css

@@ -31,11 +31,11 @@ limitations under the License.
   align-items: center;
   justify-content: space-between;
   padding: 0 12px;
-  background-color: var(--background);
+  background-color: var(--cpd-color-bg-canvas-default);
   border-radius: 8px;
-  border: 1px solid var(--quinary-content);
+  border: 1px solid var(--cpd-color-border-interactive-primary);
   font-size: var(--font-size-body);
-  color: var(--primary-content);
+  color: var(--cpd-color-text-primary);
   height: 40px;
   max-width: 100%;
   width: 100%;

src/livekit/MediaDevicesContext.tsx

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

src/livekit/options.ts

@@ -11,7 +11,9 @@ import {
 const defaultLiveKitPublishOptions: TrackPublishDefaults = {
   audioPreset: AudioPresets.music,
   dtx: true,
-  red: true,
+  // disable red because the livekit server strips out red packets for clients
+  // that don't support it (firefox) but of course that doesn't work with e2ee.
+  red: false,
   forceStereo: false,
   simulcast: true,
   videoSimulcastLayers: [VideoPresets.h180, VideoPresets.h360] as VideoPreset[],

src/livekit/useLiveKit.ts

@@ -1,46 +1,153 @@
-import { Room, RoomOptions, setLogLevel } from "livekit-client";
-import { useLiveKitRoom } from "@livekit/components-react";
-import { useMemo } from "react";
+/*
+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 {
+  ConnectionState,
+  E2EEOptions,
+  ExternalE2EEKeyProvider,
+  Room,
+  RoomOptions,
+  setLogLevel,
+} from "livekit-client";
+import { useConnectionState, useLiveKitRoom } from "@livekit/components-react";
+import { useEffect, useMemo, useRef } from "react";
+import E2EEWorker from "livekit-client/e2ee-worker?worker";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import { defaultLiveKitOptions } from "./options";
 import { SFUConfig } from "./openIDSFU";
+import { MuteStates } from "../room/MuteStates";
+import {
+  MediaDevice,
+  MediaDevices,
+  useMediaDevices,
+} from "./MediaDevicesContext";
 
-export type UserChoices = {
-  audio?: DeviceChoices;
-  video?: DeviceChoices;
-};
-
-export type DeviceChoices = {
-  selectedId: string;
-  enabled: boolean;
+export type E2EEConfig = {
+  sharedKey: string;
 };
 
 setLogLevel("debug");
 
 export function useLiveKit(
-  userChoices: UserChoices,
-  sfuConfig?: SFUConfig
+  muteStates: MuteStates,
+  sfuConfig?: SFUConfig,
+  e2eeConfig?: E2EEConfig
 ): Room | undefined {
-  const roomOptions = useMemo((): RoomOptions => {
-    const options = defaultLiveKitOptions;
-    options.videoCaptureDefaults = {
-      ...options.videoCaptureDefaults,
-      deviceId: userChoices.video?.selectedId,
-    };
-    options.audioCaptureDefaults = {
-      ...options.audioCaptureDefaults,
-      deviceId: userChoices.audio?.selectedId,
-    };
-    return options;
-  }, [userChoices.video, userChoices.audio]);
+  const e2eeOptions = useMemo(() => {
+    if (!e2eeConfig?.sharedKey) return undefined;
 
+    return {
+      keyProvider: new ExternalE2EEKeyProvider(),
+      worker: new E2EEWorker(),
+    } as E2EEOptions;
+  }, [e2eeConfig]);
+
+  useEffect(() => {
+    if (!e2eeConfig?.sharedKey || !e2eeOptions) return;
+
+    (e2eeOptions.keyProvider as ExternalE2EEKeyProvider).setKey(
+      e2eeConfig?.sharedKey
+    );
+  }, [e2eeOptions, e2eeConfig?.sharedKey]);
+
+  const initialMuteStates = useRef<MuteStates>(muteStates);
+  const devices = useMediaDevices();
+  const initialDevices = useRef<MediaDevices>(devices);
+
+  const roomOptions = useMemo(
+    (): RoomOptions => ({
+      ...defaultLiveKitOptions,
+      videoCaptureDefaults: {
+        ...defaultLiveKitOptions.videoCaptureDefaults,
+        deviceId: initialDevices.current.videoInput.selectedId,
+      },
+      audioCaptureDefaults: {
+        ...defaultLiveKitOptions.audioCaptureDefaults,
+        deviceId: initialDevices.current.audioInput.selectedId,
+      },
+      // XXX Setting the audio output here doesn't seem to do anything… a bug in
+      // LiveKit?
+      audioOutput: {
+        deviceId: initialDevices.current.audioOutput.selectedId,
+      },
+      e2ee: e2eeOptions,
+    }),
+    [e2eeOptions]
+  );
+
+  // We have to create the room manually here due to a bug inside
+  // @livekit/components-react. JSON.stringify() is used in deps of a
+  // useEffect() with an argument that references itself, if E2EE is enabled
+  const roomWithoutProps = useMemo(() => new Room(roomOptions), [roomOptions]);
   const { room } = useLiveKitRoom({
     token: sfuConfig?.jwt,
     serverUrl: sfuConfig?.url,
-    audio: userChoices.audio?.enabled ?? false,
-    video: userChoices.video?.enabled ?? false,
-    options: roomOptions,
+    audio: initialMuteStates.current.audio.enabled,
+    video: initialMuteStates.current.video.enabled,
+    room: roomWithoutProps,
   });
 
+  const connectionState = useConnectionState(roomWithoutProps);
+
+  useEffect(() => {
+    // Sync the requested mute states with LiveKit's mute states. We do it this
+    // way around rather than using LiveKit as the source of truth, so that the
+    // states can be consistent throughout the lobby and loading screens.
+    // It's important that we only do this in the connected state, because
+    // LiveKit's internal mute states aren't consistent during connection setup,
+    // and setting tracks to be enabled during this time causes errors.
+    if (room !== undefined && connectionState === ConnectionState.Connected) {
+      const participant = room.localParticipant;
+      if (participant.isMicrophoneEnabled !== muteStates.audio.enabled) {
+        participant
+          .setMicrophoneEnabled(muteStates.audio.enabled)
+          .catch((e) =>
+            logger.error("Failed to sync audio mute state with LiveKit", e)
+          );
+      }
+      if (participant.isCameraEnabled !== muteStates.video.enabled) {
+        participant
+          .setCameraEnabled(muteStates.video.enabled)
+          .catch((e) =>
+            logger.error("Failed to sync video mute state with LiveKit", e)
+          );
+      }
+    }
+  }, [room, muteStates, connectionState]);
+
+  useEffect(() => {
+    // Sync the requested devices with LiveKit's devices
+    if (room !== undefined && connectionState === ConnectionState.Connected) {
+      const syncDevice = (kind: MediaDeviceKind, device: MediaDevice) => {
+        const id = device.selectedId;
+        if (id !== undefined && room.getActiveDevice(kind) !== id) {
+          room
+            .switchActiveDevice(kind, id)
+            .catch((e) =>
+              logger.error(`Failed to sync ${kind} device with LiveKit`, e)
+            );
+        }
+      };
+
+      syncDevice("audioinput", devices.audioInput);
+      syncDevice("audiooutput", devices.audioOutput);
+      syncDevice("videoinput", devices.videoInput);
+    }
+  }, [room, devices, connectionState]);
+
   return room;
 }

src/livekit/useMediaDevicesSwitcher.ts

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

src/matrix-utils.ts

@@ -32,7 +32,7 @@ import {
 import type { MatrixClient } from "matrix-js-sdk/src/client";
 import type { Room } from "matrix-js-sdk/src/models/room";
 import IndexedDBWorker from "./IndexedDBWorker?worker";
-import { getUrlParams } from "./UrlParams";
+import { getUrlParams, PASSWORD_STRING } from "./UrlParams";
 import { loadOlm } from "./olm";
 import { Config } from "./config/Config";
 
@@ -60,11 +60,11 @@ function waitForSync(client: MatrixClient) {
       data?: ISyncStateData
     ) => {
       if (state === "PREPARED") {
+        client.removeListener(ClientEvent.Sync, onSync);
         resolve();
-        client.removeListener(ClientEvent.Sync, onSync);
       } else if (state === "ERROR") {
-        reject(data?.error);
         client.removeListener(ClientEvent.Sync, onSync);
+        reject(data?.error);
       }
     };
     client.on(ClientEvent.Sync, onSync);
@@ -273,14 +273,15 @@ export function isLocalRoomId(roomId: string, client: MatrixClient): boolean {
 export async function createRoom(
   client: MatrixClient,
   name: string,
-  ptt: boolean
+  ptt: boolean,
+  e2ee: boolean
 ): Promise<[string, string]> {
   logger.log(`Creating room for group call`);
   const createPromise = client.createRoom({
     visibility: Visibility.Private,
     preset: Preset.PublicChat,
     name,
-    room_alias_name: roomAliasLocalpartFromRoomName(name),
+    room_alias_name: e2ee ? undefined : roomAliasLocalpartFromRoomName(name),
     power_level_content_override: {
       invite: 100,
       kick: 100,
@@ -342,15 +343,16 @@ export async function createRoom(
   return [fullAliasFromRoomName(name, client), result.room_id];
 }
 
-// Returns a URL to that will load Element Call with the given room
-export function getRoomUrl(roomIdOrAlias: string): string {
-  if (roomIdOrAlias.startsWith("#")) {
-    return `${window.location.protocol}//${window.location.host}/${
-      roomIdOrAlias.substring(1).split(":")[0]
-    }`;
-  } else {
-    return `${window.location.protocol}//${window.location.host}/room?roomId=${roomIdOrAlias}`;
-  }
+/**
+ * Returns a URL to that will load Element Call with the given room
+ * @param roomId of the room
+ * @param password
+ * @returns
+ */
+export function getRoomUrl(roomId: string, password?: string): string {
+  return `${window.location.protocol}//${
+    window.location.host
+  }/room/#?roomId=${roomId}${password ? "&" + PASSWORD_STRING + password : ""}`;
 }
 
 export function getAvatarUrl(

src/popover/Popover.module.css

@@ -18,7 +18,7 @@ limitations under the License.
   display: flex;
   flex-direction: column;
   width: 194px;
-  background: var(--system);
+  background: var(--cpd-color-bg-subtle-secondary);
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   border-radius: 8px;
 }

src/room/CallEndedView.module.css

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

src/room/CallEndedView.tsx

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

src/room/GroupCallInspector.module.css

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 .inspector {
-  background-color: var(--system);
+  background-color: var(--cpd-color-bg-subtle-secondary);
 }
 
 .scrollContainer {
@@ -36,6 +36,6 @@ limitations under the License.
 
 .sequenceDiagramViewer :global(.messageText) {
   font-size: var(--font-size-caption);
-  fill: var(--primary-content) !important;
-  stroke: var(--primary-content) !important;
+  fill: var(--cpd-color-text-primary) !important;
+  stroke: var(--cpd-color-text-primary) !important;
 }

src/room/GroupCallView.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useHistory } from "react-router-dom";
 import { GroupCall, GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
 import { MatrixClient } from "matrix-js-sdk/src/client";
@@ -32,10 +32,17 @@ import { CallEndedView } from "./CallEndedView";
 import { useSentryGroupCallHandler } from "./useSentryGroupCallHandler";
 import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { useProfile } from "../profile/useProfile";
-import { UserChoices } from "../livekit/useLiveKit";
 import { findDeviceByName } from "../media-utils";
 import { OpenIDLoader } from "../livekit/OpenIDLoader";
 import { ActiveCall } from "./InCallView";
+import { Config } from "../config/Config";
+import { MuteStates, useMuteStates } from "./MuteStates";
+import { useMediaDevices, MediaDevices } from "../livekit/MediaDevicesContext";
+import {
+  useManageRoomSharedKey,
+  useIsRoomE2EE,
+} from "../e2ee/sharedKeyManagement";
+import { useEnableE2EE } from "../settings/useSetting";
 
 declare global {
   interface Window {
@@ -70,6 +77,9 @@ export function GroupCallView({
     otelGroupCallMembership,
   } = useGroupCall(groupCall, client);
 
+  const e2eeSharedKey = useManageRoomSharedKey(groupCall.room.roomId);
+  const isRoomE2EE = useIsRoomE2EE(groupCall.room.roomId);
+
   const { t } = useTranslation();
 
   useEffect(() => {
@@ -86,20 +96,34 @@ export function GroupCallView({
       avatarUrl: avatarUrl!,
       roomId: groupCall.room.roomId,
       roomName: groupCall.room.name,
+      roomAlias: groupCall.room.getCanonicalAlias(),
     };
   }, [displayName, avatarUrl, groupCall]);
 
+  const deviceContext = useMediaDevices();
+  const latestDevices = useRef<MediaDevices>();
+  latestDevices.current = deviceContext;
+
+  const muteStates = useMuteStates(participants.size);
+  const latestMuteStates = useRef<MuteStates>();
+  latestMuteStates.current = muteStates;
+
   useEffect(() => {
     if (widget && preload) {
       // In preload mode, wait for a join action before entering
       const onJoin = async (ev: CustomEvent<IWidgetApiRequest>) => {
-        const devices = await Room.getLocalDevices();
+        // XXX: I think this is broken currently - LiveKit *won't* request
+        // permissions and give you device names unless you specify a kind, but
+        // here we want all kinds of devices. This needs a fix in livekit-client
+        // for the following name-matching logic to do anything useful.
+        const devices = await Room.getLocalDevices(undefined, true);
 
         const { audioInput, videoInput } = ev.detail
           .data as unknown as JoinCallData;
-        const newChoices = {} as UserChoices;
 
-        if (audioInput !== null) {
+        if (audioInput === null) {
+          latestMuteStates.current!.audio.setEnabled?.(false);
+        } else {
           const deviceId = await findDeviceByName(
             audioInput,
             "audioinput",
@@ -107,15 +131,19 @@ export function GroupCallView({
           );
           if (!deviceId) {
             logger.warn("Unknown audio input: " + audioInput);
+            latestMuteStates.current!.audio.setEnabled?.(false);
           } else {
             logger.debug(
               `Found audio input ID ${deviceId} for name ${audioInput}`
             );
-            newChoices.audio = { selectedId: deviceId, enabled: true };
+            latestDevices.current!.audioInput.select(deviceId);
+            latestMuteStates.current!.audio.setEnabled?.(true);
           }
         }
 
-        if (videoInput !== null) {
+        if (videoInput === null) {
+          latestMuteStates.current!.video.setEnabled?.(false);
+        } else {
           const deviceId = await findDeviceByName(
             videoInput,
             "videoinput",
@@ -123,15 +151,16 @@ export function GroupCallView({
           );
           if (!deviceId) {
             logger.warn("Unknown video input: " + videoInput);
+            latestMuteStates.current!.video.setEnabled?.(false);
           } else {
             logger.debug(
               `Found video input ID ${deviceId} for name ${videoInput}`
             );
-            newChoices.video = { selectedId: deviceId, enabled: true };
+            latestDevices.current!.videoInput.select(deviceId);
+            latestMuteStates.current!.video.setEnabled?.(true);
           }
         }
 
-        setUserChoices(newChoices);
         await enter();
 
         PosthogAnalytics.instance.eventCallEnded.cacheStartCall(new Date());
@@ -163,42 +192,47 @@ export function GroupCallView({
   useSentryGroupCallHandler(groupCall);
 
   const [left, setLeft] = useState(false);
+  const [leaveError, setLeaveError] = useState<Error | undefined>(undefined);
   const history = useHistory();
 
-  const onLeave = useCallback(async () => {
-    setLeft(true);
+  const onLeave = useCallback(
+    async (leaveError?: Error) => {
+      setLeaveError(leaveError);
+      setLeft(true);
 
-    let participantCount = 0;
-    for (const deviceMap of groupCall.participants.values()) {
-      participantCount += deviceMap.size;
-    }
+      let participantCount = 0;
+      for (const deviceMap of groupCall.participants.values()) {
+        participantCount += deviceMap.size;
+      }
 
-    // In embedded/widget mode the iFrame will be killed right after the call ended prohibiting the posthog event from getting sent,
-    // therefore we want the event to be sent instantly without getting queued/batched.
-    const sendInstantly = !!widget;
-    PosthogAnalytics.instance.eventCallEnded.track(
-      groupCall.groupCallId,
-      participantCount,
-      sendInstantly
-    );
+      // In embedded/widget mode the iFrame will be killed right after the call ended prohibiting the posthog event from getting sent,
+      // therefore we want the event to be sent instantly without getting queued/batched.
+      const sendInstantly = !!widget;
+      PosthogAnalytics.instance.eventCallEnded.track(
+        groupCall.groupCallId,
+        participantCount,
+        sendInstantly
+      );
 
-    leave();
-    if (widget) {
-      // we need to wait until the callEnded event is tracked. 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();
-      widget.api.transport.send(ElementWidgetActions.HangupCall, {});
-    }
+      leave();
+      if (widget) {
+        // we need to wait until the callEnded event is tracked. 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();
+        widget.api.transport.send(ElementWidgetActions.HangupCall, {});
+      }
 
-    if (
-      !isPasswordlessUser &&
-      !isEmbedded &&
-      !PosthogAnalytics.instance.isEnabled()
-    ) {
-      history.push("/");
-    }
-  }, [groupCall, leave, isPasswordlessUser, isEmbedded, history]);
+      if (
+        !isPasswordlessUser &&
+        !isEmbedded &&
+        !PosthogAnalytics.instance.isEnabled()
+      ) {
+        history.push("/");
+      }
+    },
+    [groupCall, leave, isPasswordlessUser, isEmbedded, history]
+  );
 
   useEffect(() => {
     if (widget && state === GroupCallState.Entered) {
@@ -214,13 +248,44 @@ export function GroupCallView({
     }
   }, [groupCall, state, leave]);
 
-  const [userChoices, setUserChoices] = useState<UserChoices | undefined>(
-    undefined
+  const [e2eeEnabled] = useEnableE2EE();
+
+  const e2eeConfig = useMemo(
+    () => (e2eeSharedKey ? { sharedKey: e2eeSharedKey } : undefined),
+    [e2eeSharedKey]
   );
 
+  const onReconnect = useCallback(() => {
+    setLeft(false);
+    setLeaveError(undefined);
+    groupCall.enter();
+  }, [groupCall]);
+
+  if (e2eeEnabled && isRoomE2EE && !e2eeSharedKey) {
+    return (
+      <ErrorView
+        error={
+          new Error(
+            "No E2EE key provided: please make sure the URL you're using to join this call has been retrieved using the in-app button."
+          )
+        }
+      />
+    );
+  }
+
+  if (!e2eeEnabled && isRoomE2EE) {
+    return <ErrorView error={new Error("You need to enable E2EE to join.")} />;
+  }
+
+  const livekitServiceURL =
+    groupCall.livekitServiceURL ?? Config.get().livekit?.livekit_service_url;
+  if (!livekitServiceURL) {
+    return <ErrorView error={new Error("No livekit_service_url defined")} />;
+  }
+
   if (error) {
     return <ErrorView error={error} />;
-  } else if (state === GroupCallState.Entered && userChoices) {
+  } else if (state === GroupCallState.Entered) {
     return (
       <OpenIDLoader
         client={client}
@@ -234,7 +299,8 @@ export function GroupCallView({
           onLeave={onLeave}
           unencryptedEventsFromUsers={unencryptedEventsFromUsers}
           hideHeader={hideHeader}
-          userChoices={userChoices}
+          muteStates={muteStates}
+          e2eeConfig={e2eeConfig}
           otelGroupCallMembership={otelGroupCallMembership}
         />
       </OpenIDLoader>
@@ -248,13 +314,16 @@ export function GroupCallView({
     // submitting anything.
     if (
       isPasswordlessUser ||
-      (PosthogAnalytics.instance.isEnabled() && !isEmbedded)
+      (PosthogAnalytics.instance.isEnabled() && !isEmbedded) ||
+      leaveError
     ) {
       return (
         <CallEndedView
           endedCallId={groupCall.groupCallId}
           client={client}
           isPasswordlessUser={isPasswordlessUser}
+          leaveError={leaveError}
+          reconnect={onReconnect}
         />
       );
     } else {
@@ -275,10 +344,8 @@ export function GroupCallView({
     return (
       <LobbyView
         matrixInfo={matrixInfo}
-        onEnter={(choices: UserChoices) => {
-          setUserChoices(choices);
-          enter();
-        }}
+        muteStates={muteStates}
+        onEnter={() => enter()}
         isEmbedded={isEmbedded}
         hideHeader={hideHeader}
       />

src/room/InCallView.module.css

@@ -52,30 +52,23 @@ limitations under the License.
   display: flex;
   justify-content: center;
   align-items: center;
+  gap: 12px;
   padding: var(--footerPadding) 0;
   /* TODO: Un-hardcode these colors */
   background: linear-gradient(
     360deg,
     #15191e 0%,
-    rgba(21, 25, 30, 0.9) 37%,
-    rgba(21, 25, 30, 0.8) 49.68%,
-    rgba(21, 25, 30, 0.7) 56.68%,
-    rgba(21, 25, 30, 0.427397) 72.92%,
-    rgba(21, 25, 30, 0.257534) 81.06%,
-    rgba(21, 25, 30, 0.136986) 87.29%,
-    rgba(21, 25, 30, 0.0658079) 92.4%,
-    rgba(21, 25, 30, 0) 100%
+    rgba(16, 19, 23, 0.9) 37%,
+    rgba(16, 19, 23, 0.8) 49.68%,
+    rgba(16, 19, 23, 0.7) 56.68%,
+    rgba(16, 19, 23, 0.427397) 72.92%,
+    rgba(16, 19, 23, 0.257534) 81.06%,
+    rgba(16, 19, 23, 0.136986) 87.29%,
+    rgba(16, 19, 23, 0.0658079) 92.4%,
+    rgba(16, 19, 23, 0) 100%
   );
 }
 
-.footer > * {
-  margin-right: 30px;
-}
-
-.footer > :last-child {
-  margin-right: 0px;
-}
-
 .maximised .footer {
   position: absolute;
   width: 100%;
@@ -84,12 +77,16 @@ limitations under the License.
 
 @media (min-height: 300px) {
   .inRoom {
-    --footerPadding: 24px;
+    --footerPadding: 40px;
   }
 }
 
 @media (min-width: 800px) {
   .inRoom {
-    --footerPadding: 32px;
+    --footerPadding: 60px;
+  }
+
+  .footer {
+    gap: 16px;
   }
 }

src/room/InCallView.tsx

@@ -24,7 +24,7 @@ import {
 } from "@livekit/components-react";
 import { usePreventScroll } from "@react-aria/overlays";
 import classNames from "classnames";
-import { Room, Track } from "livekit-client";
+import { DisconnectReason, Room, RoomEvent, Track } from "livekit-client";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
@@ -33,6 +33,8 @@ import { useTranslation } from "react-i18next";
 import useMeasure from "react-use-measure";
 import { OverlayTriggerState } from "@react-stately/overlays";
 import { JoinRule } from "matrix-js-sdk/src/@types/partials";
+import { logger } from "matrix-js-sdk/src/logger";
+import { RoomEventCallbacks } from "livekit-client/dist/src/room/Room";
 
 import type { IWidgetApiRequest } from "matrix-widget-api";
 import {
@@ -77,12 +79,16 @@ import { SettingsModal } from "../settings/SettingsModal";
 import { InviteModal } from "./InviteModal";
 import { useRageshakeRequestModal } from "../settings/submit-rageshake";
 import { RageshakeRequestModal } from "./RageshakeRequestModal";
-import { UserChoices, useLiveKit } from "../livekit/useLiveKit";
-import { useMediaDevicesSwitcher } from "../livekit/useMediaDevicesSwitcher";
+import { E2EEConfig, useLiveKit } from "../livekit/useLiveKit";
 import { useFullscreen } from "./useFullscreen";
 import { useLayoutStates } from "../video-grid/Layout";
 import { useSFUConfig } from "../livekit/OpenIDLoader";
 import { E2EELock } from "../E2EELock";
+import { useEventEmitterThree } from "../useEvents";
+import { useWakeLock } from "../useWakeLock";
+import { useMergedRefs } from "../useMergedRefs";
+import { MuteStates } from "./MuteStates";
+import { useIsRoomE2EE } from "../e2ee/sharedKeyManagement";
 
 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 // There is currently a bug in Safari our our code with cloning and sending MediaStreams
@@ -91,17 +97,21 @@ const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 
 export interface ActiveCallProps extends Omit<InCallViewProps, "livekitRoom"> {
-  userChoices: UserChoices;
+  e2eeConfig?: E2EEConfig;
 }
 
 export function ActiveCall(props: ActiveCallProps) {
   const sfuConfig = useSFUConfig();
-  const livekitRoom = useLiveKit(props.userChoices, sfuConfig);
+  const livekitRoom = useLiveKit(props.muteStates, sfuConfig, props.e2eeConfig);
 
   if (!livekitRoom) {
     return null;
   }
 
+  if (props.e2eeConfig && !livekitRoom.isE2EEEnabled) {
+    livekitRoom.setE2EEEnabled(!!props.e2eeConfig);
+  }
+
   return (
     <RoomContext.Provider value={livekitRoom}>
       <InCallView {...props} livekitRoom={livekitRoom} />
@@ -113,8 +123,9 @@ export interface InCallViewProps {
   client: MatrixClient;
   groupCall: GroupCall;
   livekitRoom: Room;
+  muteStates: MuteStates;
   participants: Map<RoomMember, Map<string, ParticipantInfo>>;
-  onLeave: () => void;
+  onLeave: (error?: Error) => void;
   unencryptedEventsFromUsers: Set<string>;
   hideHeader: boolean;
   otelGroupCallMembership?: OTelGroupCallMembership;
@@ -124,6 +135,7 @@ export function InCallView({
   client,
   groupCall,
   livekitRoom,
+  muteStates,
   participants,
   onLeave,
   unencryptedEventsFromUsers,
@@ -132,21 +144,15 @@ export function InCallView({
 }: InCallViewProps) {
   const { t } = useTranslation();
   usePreventScroll();
+  useWakeLock();
+
+  const isRoomE2EE = useIsRoomE2EE(groupCall.room.roomId);
 
   const containerRef1 = useRef<HTMLDivElement | null>(null);
   const [containerRef2, bounds] = useMeasure({ polyfill: ResizeObserver });
   const boundsValid = bounds.height > 0;
   // Merge the refs so they can attach to the same element
-  const containerRef = useCallback(
-    (el: HTMLDivElement) => {
-      containerRef1.current = el;
-      containerRef2(el);
-    },
-    [containerRef1, containerRef2]
-  );
-
-  // Managed media devices state coupled with an active room.
-  const roomMediaSwitcher = useMediaDevicesSwitcher(livekitRoom);
+  const containerRef = useMergedRefs(containerRef1, containerRef2);
 
   const screenSharingTracks = useTracks(
     [{ source: Track.Source.ScreenShare, withPlaceholder: false }],
@@ -163,19 +169,18 @@ export function InCallView({
 
   const { hideScreensharing } = useUrlParams();
 
-  const {
-    isMicrophoneEnabled,
-    isCameraEnabled,
-    isScreenShareEnabled,
-    localParticipant,
-  } = useLocalParticipant({ room: livekitRoom });
+  const { isScreenShareEnabled, localParticipant } = useLocalParticipant({
+    room: livekitRoom,
+  });
 
-  const toggleMicrophone = useCallback(async () => {
-    await localParticipant.setMicrophoneEnabled(!isMicrophoneEnabled);
-  }, [localParticipant, isMicrophoneEnabled]);
-  const toggleCamera = useCallback(async () => {
-    await localParticipant.setCameraEnabled(!isCameraEnabled);
-  }, [localParticipant, isCameraEnabled]);
+  const toggleMicrophone = useCallback(
+    () => muteStates.audio.setEnabled?.((e) => !e),
+    [muteStates]
+  );
+  const toggleCamera = useCallback(
+    () => muteStates.video.setEnabled?.((e) => !e),
+    [muteStates]
+  );
 
   const joinRule = useJoinRule(groupCall.room);
 
@@ -185,7 +190,28 @@ export function InCallView({
     containerRef1,
     toggleMicrophone,
     toggleCamera,
-    async (muted) => await localParticipant.setMicrophoneEnabled(!muted)
+    (muted) => muteStates.audio.setEnabled?.(!muted)
+  );
+
+  const onDisconnected = useCallback(
+    (reason?: DisconnectReason) => {
+      PosthogAnalytics.instance.eventCallDisconnected.track(reason);
+      logger.info("Disconnected from livekit call with reason ", reason);
+      onLeave(
+        new Error("Disconnected from LiveKit call with reason " + reason)
+      );
+    },
+    [onLeave]
+  );
+
+  const onLeavePress = useCallback(() => {
+    onLeave();
+  }, [onLeave]);
+
+  useEventEmitterThree<RoomEvent.Disconnected, RoomEventCallbacks>(
+    livekitRoom,
+    RoomEvent.Disconnected,
+    onDisconnected
   );
 
   useEffect(() => {
@@ -355,17 +381,19 @@ export function InCallView({
     const buttons: JSX.Element[] = [];
 
     buttons.push(
-      <MicButton
-        key="1"
-        muted={!isMicrophoneEnabled}
-        onPress={toggleMicrophone}
-        data-testid="incall_mute"
-      />,
       <VideoButton
         key="2"
-        muted={!isCameraEnabled}
+        muted={!muteStates.video.enabled}
         onPress={toggleCamera}
+        disabled={muteStates.video.setEnabled === null}
         data-testid="incall_videomute"
+      />,
+      <MicButton
+        key="1"
+        muted={!muteStates.audio.enabled}
+        onPress={toggleMicrophone}
+        disabled={muteStates.audio.setEnabled === null}
+        data-testid="incall_mute"
       />
     );
 
@@ -384,7 +412,7 @@ export function InCallView({
     }
 
     buttons.push(
-      <HangupButton key="6" onPress={onLeave} data-testid="incall_leave" />
+      <HangupButton key="6" onPress={onLeavePress} data-testid="incall_leave" />
     );
     footer = <div className={styles.footer}>{buttons}</div>;
   }
@@ -399,7 +427,7 @@ export function InCallView({
               users={unencryptedEventsFromUsers}
               room={groupCall.room}
             />
-            <E2EELock />
+            {!isRoomE2EE && <E2EELock />}
           </LeftNav>
           <RightNav>
             <GridLayoutMenu layout={layout} setLayout={setLayout} />
@@ -432,7 +460,6 @@ export function InCallView({
         <SettingsModal
           client={client}
           roomId={groupCall.room.roomId}
-          mediaDevicesSwitcher={roomMediaSwitcher}
           {...settingsModalProps}
         />
       )}

src/room/InviteModal.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2022 - 2023 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -21,6 +21,7 @@ import { Modal, ModalContent, ModalProps } from "../Modal";
 import { CopyButton } from "../button";
 import { getRoomUrl } from "../matrix-utils";
 import styles from "./InviteModal.module.css";
+import { useRoomSharedKey } from "../e2ee/sharedKeyManagement";
 
 interface Props extends Omit<ModalProps, "title" | "children"> {
   roomId: string;
@@ -28,6 +29,7 @@ interface Props extends Omit<ModalProps, "title" | "children"> {
 
 export const InviteModal: FC<Props> = ({ roomId, ...rest }) => {
   const { t } = useTranslation();
+  const roomSharedKey = useRoomSharedKey(roomId);
 
   return (
     <Modal
@@ -40,7 +42,7 @@ export const InviteModal: FC<Props> = ({ roomId, ...rest }) => {
         <p>{t("Copy and share this call link")}</p>
         <CopyButton
           className={styles.copyButton}
-          value={getRoomUrl(roomId)}
+          value={getRoomUrl(roomId, roomSharedKey ?? undefined)}
           data-testid="modal_inviteLink"
         />
       </ModalContent>

src/room/LobbyView.module.css

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

src/room/LobbyView.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { useRef, useEffect, useState } from "react";
+import { useRef, useEffect, FC } from "react";
 import { Trans, useTranslation } from "react-i18next";
 
 import styles from "./LobbyView.module.css";
@@ -25,18 +25,26 @@ import { UserMenuContainer } from "../UserMenuContainer";
 import { Body, Link } from "../typography/Typography";
 import { useLocationNavigation } from "../useLocationNavigation";
 import { MatrixInfo, VideoPreview } from "./VideoPreview";
-import { UserChoices } from "../livekit/useLiveKit";
+import { MuteStates } from "./MuteStates";
+import { useRoomSharedKey } from "../e2ee/sharedKeyManagement";
 
 interface Props {
   matrixInfo: MatrixInfo;
-
-  onEnter: (userChoices: UserChoices) => void;
+  muteStates: MuteStates;
+  onEnter: () => void;
   isEmbedded: boolean;
   hideHeader: boolean;
 }
 
-export function LobbyView(props: Props) {
+export const LobbyView: FC<Props> = ({
+  matrixInfo,
+  muteStates,
+  onEnter,
+  isEmbedded,
+  hideHeader,
+}) => {
   const { t } = useTranslation();
+  const roomSharedKey = useRoomSharedKey(matrixInfo.roomId);
   useLocationNavigation();
 
   const joinCallButtonRef = useRef<HTMLButtonElement>(null);
@@ -46,16 +54,12 @@ export function LobbyView(props: Props) {
     }
   }, [joinCallButtonRef]);
 
-  const [userChoices, setUserChoices] = useState<UserChoices | undefined>(
-    undefined
-  );
-
   return (
     <div className={styles.room}>
-      {!props.hideHeader && (
+      {!hideHeader && (
         <Header>
           <LeftNav>
-            <RoomHeaderInfo roomName={props.matrixInfo.roomName} />
+            <RoomHeaderInfo roomName={matrixInfo.roomName} />
           </LeftNav>
           <RightNav>
             <UserMenuContainer />
@@ -64,16 +68,13 @@ export function LobbyView(props: Props) {
       )}
       <div className={styles.joinRoom}>
         <div className={styles.joinRoomContent}>
-          <VideoPreview
-            matrixInfo={props.matrixInfo}
-            onUserChoicesChanged={setUserChoices}
-          />
+          <VideoPreview matrixInfo={matrixInfo} muteStates={muteStates} />
           <Trans>
             <Button
               ref={joinCallButtonRef}
               className={styles.copyButton}
               size="lg"
-              onPress={() => props.onEnter(userChoices!)}
+              onPress={() => onEnter()}
               data-testid="lobby_joinCall"
             >
               Join call now
@@ -81,7 +82,7 @@ export function LobbyView(props: Props) {
             <Body>Or</Body>
             <CopyButton
               variant="secondaryCopy"
-              value={getRoomUrl(props.matrixInfo.roomId)}
+              value={getRoomUrl(matrixInfo.roomId, roomSharedKey ?? undefined)}
               className={styles.copyButton}
               copiedMessage={t("Call link copied")}
               data-testid="lobby_inviteLink"
@@ -90,7 +91,7 @@ export function LobbyView(props: Props) {
             </CopyButton>
           </Trans>
         </div>
-        {!props.isEmbedded && (
+        {!isEmbedded && (
           <Body className={styles.joinRoomFooter}>
             <Link color="primary" to="/">
               {t("Take me Home")}
@@ -100,4 +101,4 @@ export function LobbyView(props: Props) {
       </div>
     </div>
   );
-}
+};

src/room/MuteStates.ts

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

src/room/RoomPage.tsx

@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 import { FC, useEffect, useState, useCallback } from "react";
-import { useTranslation } from "react-i18next";
 
 import type { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
 import { useClientLegacy } from "../ClientContext";
@@ -25,12 +24,10 @@ import { GroupCallLoader } from "./GroupCallLoader";
 import { GroupCallView } from "./GroupCallView";
 import { useUrlParams } from "../UrlParams";
 import { useRegisterPasswordlessUser } from "../auth/useRegisterPasswordlessUser";
-import { translatedError } from "../TranslatedError";
 import { useOptInAnalytics } from "../settings/useSetting";
+import { HomePage } from "../home/HomePage";
 
 export const RoomPage: FC = () => {
-  const { t } = useTranslation();
-
   const {
     roomAlias,
     roomId,
@@ -42,7 +39,9 @@ export const RoomPage: FC = () => {
     displayName,
   } = useUrlParams();
   const roomIdOrAlias = roomId ?? roomAlias;
-  if (!roomIdOrAlias) throw translatedError("No room specified", t);
+  if (!roomIdOrAlias) {
+    console.error("No room specified");
+  }
 
   const [optInAnalytics, setOptInAnalytics] = useOptInAnalytics();
   const { registerPasswordlessUser } = useRegisterPasswordlessUser();
@@ -99,6 +98,10 @@ export const RoomPage: FC = () => {
     return <RoomAuthView />;
   }
 
+  if (!roomIdOrAlias) {
+    return <HomePage />;
+  }
+
   return (
     <GroupCallLoader
       client={client}

src/room/VideoPreview.module.css

@@ -20,7 +20,7 @@ limitations under the License.
   height: 50vh;
   border-radius: 24px;
   overflow: hidden;
-  background-color: var(--bgColor3);
+  background-color: var(--stopgap-bgColor3);
   margin: 20px;
 }
 
@@ -41,7 +41,7 @@ limitations under the License.
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: var(--bgColor3);
+  background-color: var(--stopgap-bgColor3);
 }
 
 .cameraPermissions {
@@ -62,7 +62,7 @@ limitations under the License.
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: rgba(23, 25, 28, 0.9);
+  background-color: var(--stopgap-background-85);
 }
 
 .previewButtons > * {

src/room/VideoPreview.tsx

@@ -14,12 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useState, useEffect, useCallback, useRef } from "react";
+import { useEffect, useCallback, useMemo, useRef, FC } from "react";
 import useMeasure from "react-use-measure";
 import { ResizeObserver } from "@juggle/resize-observer";
 import { OverlayTriggerState } from "@react-stately/overlays";
 import { usePreviewTracks } from "@livekit/components-react";
-import { LocalAudioTrack, LocalVideoTrack, Track } from "livekit-client";
+import {
+  CreateLocalTracksOptions,
+  LocalVideoTrack,
+  Track,
+} from "livekit-client";
 
 import { MicButton, SettingsButton, VideoButton } from "../button";
 import { Avatar } from "../Avatar";
@@ -27,23 +31,23 @@ import styles from "./VideoPreview.module.css";
 import { useModalTriggerState } from "../Modal";
 import { SettingsModal } from "../settings/SettingsModal";
 import { useClient } from "../ClientContext";
-import { useMediaDevicesSwitcher } from "../livekit/useMediaDevicesSwitcher";
-import { UserChoices } from "../livekit/useLiveKit";
-import { useDefaultDevices } from "../settings/useSetting";
+import { useMediaDevices } from "../livekit/MediaDevicesContext";
+import { MuteStates } from "./MuteStates";
 
 export type MatrixInfo = {
   displayName: string;
   avatarUrl: string;
   roomId: string;
   roomName: string;
+  roomAlias: string | null;
 };
 
 interface Props {
   matrixInfo: MatrixInfo;
-  onUserChoicesChanged: (choices: UserChoices) => void;
+  muteStates: MuteStates;
 }
 
-export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) {
+export const VideoPreview: FC<Props> = ({ matrixInfo, muteStates }) => {
   const { client } = useClient();
   const [previewRef, previewBounds] = useMeasure({ polyfill: ResizeObserver });
 
@@ -62,90 +66,46 @@ export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) {
     settingsModalState.open();
   }, [settingsModalState]);
 
-  // Create local media tracks.
-  const [videoEnabled, setVideoEnabled] = useState<boolean>(true);
-  const [audioEnabled, setAudioEnabled] = useState<boolean>(true);
+  const devices = useMediaDevices();
+
+  // Capture the audio options as they were when we first mounted, because
+  // we're not doing anything with the audio anyway so we don't need to
+  // re-open the devices when they change (see below).
+  const initialAudioOptions = useRef<CreateLocalTracksOptions["audio"]>();
+  initialAudioOptions.current ??= muteStates.audio.enabled && {
+    deviceId: devices.audioInput.selectedId,
+  };
 
-  // The settings are updated as soon as the device changes. We wrap the settings value in a ref to store their initial value.
-  // Not changing the device options prohibits the usePreviewTracks hook to recreate the tracks.
-  const initialDefaultDevices = useRef(useDefaultDevices()[0]);
   const tracks = usePreviewTracks(
     {
-      audio: { deviceId: initialDefaultDevices.current.audioinput },
-      video: { deviceId: initialDefaultDevices.current.videoinput },
+      // The only reason we request audio here is to get the audio permission
+      // request over with at the same time. But changing the audio settings
+      // shouldn't cause this hook to recreate the track, which is why we
+      // reference the initial values here.
+      // We also pass in a clone because livekit mutates the object passed in,
+      // which would cause the devices to be re-opened on the next render.
+      audio: Object.assign({}, initialAudioOptions.current),
+      video: muteStates.video.enabled && {
+        deviceId: devices.videoInput.selectedId,
+      },
     },
     (error) => {
       console.error("Error while creating preview Tracks:", error);
     }
   );
-  const videoTrack = React.useMemo(
+  const videoTrack = useMemo(
     () =>
-      tracks?.filter((t) => t.kind === Track.Kind.Video)[0] as LocalVideoTrack,
-    [tracks]
-  );
-  const audioTrack = React.useMemo(
-    () =>
-      tracks?.filter((t) => t.kind === Track.Kind.Audio)[0] as LocalAudioTrack,
+      tracks?.find((t) => t.kind === Track.Kind.Video) as
+        | LocalVideoTrack
+        | undefined,
     [tracks]
   );
 
-  // Only let the MediaDeviceSwitcher request permissions if a video track is already available.
-  // Otherwise we would end up asking for permissions in usePreviewTracks and in useMediaDevicesSwitcher.
-  const requestPermissions = !!audioTrack && !!videoTrack;
-  const mediaSwitcher = useMediaDevicesSwitcher(
-    undefined,
-    { videoTrack, audioTrack },
-    requestPermissions
-  );
-  const { videoIn, audioIn } = mediaSwitcher;
-
-  const videoEl = React.useRef(null);
-
-  useEffect(() => {
-    // Effect to update the settings
-    onUserChoicesChanged({
-      video: {
-        selectedId: videoIn.selectedId,
-        enabled: videoEnabled,
-      },
-      audio: {
-        selectedId: audioIn.selectedId,
-        enabled: audioEnabled,
-      },
-    });
-  }, [
-    onUserChoicesChanged,
-    videoIn.selectedId,
-    videoEnabled,
-    audioIn.selectedId,
-    audioEnabled,
-    videoTrack,
-    audioTrack,
-  ]);
-
-  useEffect(() => {
-    // Effect to update the initial device selection for the ui elements based on the current preview track.
-    if (!videoIn.selectedId || videoIn.selectedId == "") {
-      videoTrack?.getDeviceId().then((videoId) => {
-        videoIn.setSelected(videoId ?? "default");
-      });
-    }
-    if (!audioIn.selectedId || audioIn.selectedId == "") {
-      audioTrack?.getDeviceId().then((audioId) => {
-        // getDeviceId() can return undefined for audio devices. This happens if
-        // the devices list uses "default" as the device id for the current
-        // device and the device set on the track also uses the deviceId
-        // "default". Check `normalizeDeviceId` in  `getDeviceId` for more
-        // details.
-        audioIn.setSelected(audioId ?? "default");
-      });
-    }
-  }, [videoIn, audioIn, videoTrack, audioTrack]);
+  const videoEl = useRef<HTMLVideoElement | null>(null);
 
   useEffect(() => {
     // Effect to connect the videoTrack with the video element.
     if (videoEl.current) {
-      videoTrack?.unmute();
       videoTrack?.attach(videoEl.current);
     }
     return () => {
@@ -153,20 +113,20 @@ export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) {
     };
   }, [videoTrack]);
 
-  useEffect(() => {
-    // Effect to mute/unmute video track. (This has to be done, so that the hardware camera indicator does not confuse the user)
-    if (videoTrack && videoEnabled) {
-      videoTrack?.unmute();
-    } else if (videoTrack) {
-      videoTrack?.mute();
-    }
-  }, [videoEnabled, videoTrack]);
+  const onAudioPress = useCallback(
+    () => muteStates.audio.setEnabled?.((e) => !e),
+    [muteStates]
+  );
+  const onVideoPress = useCallback(
+    () => muteStates.video.setEnabled?.((e) => !e),
+    [muteStates]
+  );
 
   return (
     <div className={styles.preview} ref={previewRef}>
       <video ref={videoEl} muted playsInline disablePictureInPicture />
       <>
-        {(videoTrack ? !videoEnabled : true) && (
+        {!muteStates.video.enabled && (
           <div className={styles.avatarContainer}>
             <Avatar
               size={(previewBounds.height - 66) / 2}
@@ -176,26 +136,22 @@ export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) {
           </div>
         )}
         <div className={styles.previewButtons}>
-          <MicButton
-            muted={!audioEnabled}
-            onPress={() => setAudioEnabled(!audioEnabled)}
-            disabled={!audioTrack}
-          />
           <VideoButton
-            muted={!videoEnabled}
-            onPress={() => setVideoEnabled(!videoEnabled)}
-            disabled={!videoTrack}
+            muted={!muteStates.video.enabled}
+            onPress={onVideoPress}
+            disabled={muteStates.video.setEnabled === null}
+          />
+          <MicButton
+            muted={!muteStates.audio.enabled}
+            onPress={onAudioPress}
+            disabled={muteStates.audio.setEnabled === null}
           />
           <SettingsButton onPress={openSettings} />
         </div>
       </>
       {settingsModalState.isOpen && client && (
-        <SettingsModal
-          client={client}
-          mediaDevicesSwitcher={mediaSwitcher}
-          {...settingsModalProps}
-        />
+        <SettingsModal client={client} {...settingsModalProps} />
       )}
     </div>
   );
-}
+};

src/room/useGroupCall.ts

@@ -171,7 +171,7 @@ export function useGroupCall(
     isScreensharing: false,
     screenshareFeeds: [],
     requestingScreenshare: false,
-    participants: new Map(),
+    participants: getParticipants(groupCall),
     hasLocalParticipant: false,
   });
 

src/room/useLoadGroupCall.ts

@@ -25,12 +25,16 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { ClientEvent, MatrixClient } from "matrix-js-sdk/src/client";
 import { SyncState } from "matrix-js-sdk/src/sync";
 import { useTranslation } from "react-i18next";
+import { randomString } from "matrix-js-sdk/src/randomstring";
 
 import type { Room } from "matrix-js-sdk/src/models/room";
 import type { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
+import { setLocalStorageItem } from "../useLocalStorage";
 import { isLocalRoomId, createRoom, roomNameFromRoomId } from "../matrix-utils";
 import { translatedError } from "../TranslatedError";
 import { widget } from "../widget";
+import { useEnableE2EE } from "../settings/useSetting";
+import { getRoomSharedKeyLocalStorageKey } from "../e2ee/sharedKeyManagement";
 
 const STATS_COLLECT_INTERVAL_TIME_MS = 10000;
 
@@ -67,6 +71,8 @@ export const useLoadGroupCall = (
   const { t } = useTranslation();
   const [state, setState] = useState<GroupCallStatus>({ kind: "loading" });
 
+  const [e2eeEnabled] = useEnableE2EE();
+
   useEffect(() => {
     const fetchOrCreateRoom = async (): Promise<Room> => {
       try {
@@ -104,8 +110,17 @@ export const useLoadGroupCall = (
           const [, roomId] = await createRoom(
             client,
             roomNameFromRoomId(roomIdOrAlias),
-            createPtt
+            createPtt,
+            e2eeEnabled ?? false
           );
+
+          if (e2eeEnabled) {
+            setLocalStorageItem(
+              getRoomSharedKeyLocalStorageKey(roomId),
+              randomString(32)
+            );
+          }
+
           // likewise, wait for the room
           await client.waitUntilRoomReadyForGroupCalls(roomId);
           return client.getRoom(roomId)!;
@@ -194,7 +209,7 @@ export const useLoadGroupCall = (
       .then(fetchOrCreateGroupCall)
       .then((groupCall) => setState({ kind: "loaded", groupCall }))
       .catch((error) => setState({ kind: "failed", error }));
-  }, [client, roomIdOrAlias, viaServers, createPtt, t]);
+  }, [client, roomIdOrAlias, viaServers, createPtt, t, e2eeEnabled]);
 
   return state;
 };

src/settings/RageshakeButton.module.css

@@ -0,0 +1,21 @@
+/*
+Copyright 2022 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.rageshakeControl {
+  height: 50px;
+  text-align: center;
+  vertical-align: middle;
+}

src/settings/RageshakeButton.tsx

@@ -0,0 +1,67 @@
+/*
+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 { useTranslation } from "react-i18next";
+import { useCallback } from "react";
+
+import { Button } from "../button";
+import { Config } from "../config/Config";
+import styles from "./RageshakeButton.module.css";
+import { useSubmitRageshake } from "./submit-rageshake";
+
+interface Props {
+  description: string;
+}
+
+export const RageshakeButton = ({ description }: Props) => {
+  const { submitRageshake, sending, sent, error } = useSubmitRageshake();
+  const { t } = useTranslation();
+
+  const sendDebugLogs = useCallback(() => {
+    submitRageshake({
+      description,
+      sendLogs: true,
+    });
+  }, [submitRageshake, description]);
+
+  if (!Config.get().rageshake?.submit_url) return null;
+
+  let logsComponent: JSX.Element | null = null;
+  if (sending) {
+    logsComponent = <span>{t("Sending…")}</span>;
+  } else if (sent) {
+    logsComponent = <div>{t("Thanks!")}</div>;
+  } else {
+    let caption = t("Send debug logs");
+    if (error) {
+      caption = t("Retry sending logs");
+    }
+
+    logsComponent = (
+      <Button
+        size="lg"
+        variant="default"
+        onPress={sendDebugLogs}
+        className={styles.wideButton}
+        disabled={sending}
+      >
+        {caption}
+      </Button>
+    );
+  }
+
+  return <div className={styles.rageshakeControl}>{logsComponent}</div>;
+};

src/settings/SettingsModal.module.css

@@ -20,7 +20,7 @@ limitations under the License.
 }
 
 .settingsModal p {
-  color: var(--secondary-content);
+  color: var(--cpd-color-text-secondary);
 }
 
 .tabContainer {

src/settings/SettingsModal.tsx

@@ -34,6 +34,7 @@ import {
   useOptInAnalytics,
   useDeveloperSettingsTab,
   useShowConnectionStats,
+  useEnableE2EE,
 } from "./useSetting";
 import { FieldRow, InputField } from "../input/Input";
 import { Button } from "../button";
@@ -42,14 +43,14 @@ import { Body, Caption } from "../typography/Typography";
 import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
 import { ProfileSettingsTab } from "./ProfileSettingsTab";
 import { FeedbackSettingsTab } from "./FeedbackSettingsTab";
-import {
-  MediaDevices,
-  MediaDevicesState,
-} from "../livekit/useMediaDevicesSwitcher";
 import { useUrlParams } from "../UrlParams";
+import {
+  useMediaDevices,
+  MediaDevice,
+  useMediaDeviceNames,
+} from "../livekit/MediaDevicesContext";
 
 interface Props {
-  mediaDevicesSwitcher?: MediaDevicesState;
   isOpen: boolean;
   client: MatrixClient;
   roomId?: string;
@@ -68,11 +69,12 @@ export const SettingsModal = (props: Props) => {
     useDeveloperSettingsTab();
   const [showConnectionStats, setShowConnectionStats] =
     useShowConnectionStats();
+  const [enableE2EE, setEnableE2EE] = useEnableE2EE();
 
   const downloadDebugLog = useDownloadDebugLog();
 
   // Generate a `SelectInput` with a list of devices for a given device kind.
-  const generateDeviceSelection = (devices: MediaDevices, caption: string) => {
+  const generateDeviceSelection = (devices: MediaDevice, caption: string) => {
     if (devices.available.length == 0) return null;
 
     return (
@@ -83,7 +85,7 @@ export const SettingsModal = (props: Props) => {
             ? "default"
             : devices.selectedId
         }
-        onSelectionChange={(id) => devices.setSelected(id.toString())}
+        onSelectionChange={(id) => devices.select(id.toString())}
       >
         {devices.available.map(({ deviceId, label }, index) => (
           <Item key={deviceId}>
@@ -116,7 +118,8 @@ export const SettingsModal = (props: Props) => {
     </Caption>
   );
 
-  const devices = props.mediaDevicesSwitcher;
+  const devices = useMediaDevices();
+  useMediaDeviceNames(devices);
 
   const audioTab = (
     <TabItem
@@ -128,8 +131,8 @@ export const SettingsModal = (props: Props) => {
         </>
       }
     >
-      {devices && generateDeviceSelection(devices.audioIn, t("Microphone"))}
-      {devices && generateDeviceSelection(devices.audioOut, t("Speaker"))}
+      {generateDeviceSelection(devices.audioInput, t("Microphone"))}
+      {generateDeviceSelection(devices.audioOutput, t("Speaker"))}
     </TabItem>
   );
 
@@ -143,7 +146,7 @@ export const SettingsModal = (props: Props) => {
         </>
       }
     >
-      {devices && generateDeviceSelection(devices.videoIn, t("Camera"))}
+      {generateDeviceSelection(devices.videoInput, t("Camera"))}
     </TabItem>
   );
 
@@ -255,14 +258,30 @@ export const SettingsModal = (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>) =>
+            setEnableE2EE?.(e.target.checked)
+          }
+        />
+      </FieldRow>
       <FieldRow>
         <Button onPress={downloadDebugLog}>{t("Download debug logs")}</Button>
       </FieldRow>
     </TabItem>
   );
 
-  const tabs: JSX.Element[] = [];
-  tabs.push(audioTab, videoTab);
+  const tabs = [audioTab, videoTab];
   if (!isEmbedded) tabs.push(profileTab);
   tabs.push(feedbackTab, moreTab);
   if (developerSettingsTab) tabs.push(developerTab);

src/settings/submit-rageshake.ts

@@ -54,7 +54,7 @@ export function useSubmitRageshake(): {
 
   // The value of the context is the whole tuple returned from setState,
   // so we just want the current state.
-  const [inspectorState] = useContext(InspectorContext);
+  const [inspectorState] = useContext(InspectorContext) ?? [];
 
   const [{ sending, sent, error }, setState] = useState<{
     sending: boolean;

src/settings/useSetting.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2022 - 2023 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,58 +14,49 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { EventEmitter } from "events";
-import { useMemo, useState, useEffect, useCallback } from "react";
+import { useCallback, useMemo } from "react";
+import { isE2EESupported } from "livekit-client";
 
 import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
+import {
+  getLocalStorageItem,
+  setLocalStorageItem,
+  useLocalStorage,
+} from "../useLocalStorage";
 
 type Setting<T> = [T, (value: T) => void];
 type DisableableSetting<T> = [T, ((value: T) => void) | null];
 
-// Bus to notify other useSetting consumers when a setting is changed
-export const settingsBus = new EventEmitter();
-
-const getSettingKey = (name: string): string => {
+export const getSettingKey = (name: string): string => {
   return `matrix-setting-${name}`;
 };
 // Like useState, but reads from and persists the value to localStorage
-const useSetting = <T>(name: string, defaultValue: T): Setting<T> => {
+export const useSetting = <T>(name: string, defaultValue: T): Setting<T> => {
   const key = useMemo(() => getSettingKey(name), [name]);
 
-  const [value, setValue] = useState<T>(() => {
-    const item = localStorage.getItem(key);
-    return item == null ? defaultValue : JSON.parse(item);
-  });
+  const [item, setItem] = useLocalStorage(key);
 
-  useEffect(() => {
-    settingsBus.on(name, setValue);
-    return () => {
-      settingsBus.off(name, setValue);
-    };
-  }, [name, setValue]);
+  const value = useMemo(
+    () => (item == null ? defaultValue : JSON.parse(item)),
+    [item, defaultValue]
+  );
+  const setValue = useCallback(
+    (value: T) => {
+      setItem(JSON.stringify(value));
+    },
+    [setItem]
+  );
 
-  return [
-    value,
-    useCallback(
-      (newValue: T) => {
-        setValue(newValue);
-        localStorage.setItem(key, JSON.stringify(newValue));
-        settingsBus.emit(name, newValue);
-      },
-      [name, key, setValue]
-    ),
-  ];
+  return [value, setValue];
 };
 
 export const getSetting = <T>(name: string, defaultValue: T): T => {
-  const item = localStorage.getItem(getSettingKey(name));
+  const item = getLocalStorageItem(getSettingKey(name));
   return item === null ? defaultValue : JSON.parse(item);
 };
 
-export const setSetting = <T>(name: string, newValue: T) => {
-  localStorage.setItem(getSettingKey(name), JSON.stringify(newValue));
-  settingsBus.emit(name, newValue);
-};
+export const setSetting = <T>(name: string, newValue: T) =>
+  setLocalStorageItem(getSettingKey(name), JSON.stringify(newValue));
 
 const canEnableSpatialAudio = () => {
   const { userAgent } = navigator;
@@ -98,15 +89,25 @@ 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 = () =>
   useSetting("developer-settings-tab", false);
 
 export const useShowConnectionStats = () =>
   useSetting("show-connection-stats", false);
 
-export const useDefaultDevices = () =>
-  useSetting("defaultDevices", {
-    audioinput: "",
-    videoinput: "",
-    audiooutput: "",
-  });
+export const useAudioInput = () =>
+  useSetting<string | undefined>("audio-input", undefined);
+export const useAudioOutput = () =>
+  useSetting<string | undefined>("audio-output", undefined);
+export const useVideoInput = () =>
+  useSetting<string | undefined>("video-input", undefined);

src/tabs/Tabs.module.css

@@ -44,12 +44,12 @@ limitations under the License.
 }
 
 .tab > * {
-  color: var(--secondary-content);
+  color: var(--cpd-color-text-secondary);
   margin: 0 8px 0 0;
 }
 
 .tab svg * {
-  fill: var(--secondary-content);
+  fill: var(--cpd-color-text-secondary);
 }
 
 .tab > :last-child {
@@ -57,15 +57,15 @@ limitations under the License.
 }
 
 .tab.selected {
-  background-color: var(--accent);
+  background-color: var(--cpd-color-text-action-accent);
 }
 
 .tab.selected * {
-  color: var(--primary-content);
+  color: var(--stopgap-color-on-solid-accent);
 }
 
 .tab.selected svg * {
-  fill: var(--primary-content);
+  fill: var(--stopgap-color-on-solid-accent);
 }
 
 .tab.disabled {

src/typography/Typography.module.css

@@ -37,7 +37,7 @@ limitations under the License.
 }
 
 .link {
-  color: var(--links);
+  color: var(--cpd-color-text-link-external);
 }
 
 .link:hover {
@@ -46,7 +46,7 @@ limitations under the License.
 }
 
 .primary {
-  color: var(--accent);
+  color: var(--cpd-color-text-action-accent);
 }
 
 .overflowEllipsis {

src/useEvents.ts

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import { useEffect } from "react";
+import EventEmitter, { EventMap } from "typed-emitter";
 
 import type {
   Listener,
@@ -59,3 +60,20 @@ export const useTypedEventEmitter = <
     };
   }, [emitter, eventType, listener]);
 };
+
+// Shortcut for registering a listener on an eventemitter3 EventEmitter (ie. what the LiveKit SDK uses)
+export const useEventEmitterThree = <
+  EventType extends keyof T,
+  T extends EventMap
+>(
+  emitter: EventEmitter<T>,
+  eventType: EventType,
+  listener: T[EventType]
+) => {
+  useEffect(() => {
+    emitter.on(eventType, listener);
+    return () => {
+      emitter.off(eventType, listener);
+    };
+  }, [emitter, eventType, listener]);
+};

src/useLocalStorage.ts

@@ -0,0 +1,59 @@
+/*
+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 EventEmitter from "events";
+import { useCallback, useEffect, useState } from "react";
+
+type LocalStorageItem = ReturnType<typeof localStorage.getItem>;
+
+// Bus to notify other useLocalStorage consumers when an item is changed
+export const localStorageBus = new EventEmitter();
+
+// Like useState, but reads from and persists the value to localStorage
+export const useLocalStorage = (
+  key: string
+): [LocalStorageItem, (value: string) => void] => {
+  const [value, setValue] = useState<LocalStorageItem>(() =>
+    localStorage.getItem(key)
+  );
+
+  useEffect(() => {
+    localStorageBus.on(key, setValue);
+    return () => {
+      localStorageBus.off(key, setValue);
+    };
+  }, [key, setValue]);
+
+  return [
+    value,
+    useCallback(
+      (newValue: string) => {
+        setValue(newValue);
+        localStorage.setItem(key, newValue);
+        localStorageBus.emit(key, newValue);
+      },
+      [key, setValue]
+    ),
+  ];
+};
+
+export const getLocalStorageItem = (key: string): LocalStorageItem =>
+  localStorage.getItem(key);
+
+export const setLocalStorageItem = (key: string, value: string): void => {
+  localStorage.setItem(key, value);
+  localStorageBus.emit(key, value);
+};

src/useWakeLock.ts

@@ -0,0 +1,60 @@
+/*
+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 { logger } from "matrix-js-sdk/src/logger";
+import { useEffect } from "react";
+
+/**
+ * React hook that inhibits the device from automatically going to sleep.
+ */
+export const useWakeLock = () => {
+  useEffect(() => {
+    if ("wakeLock" in navigator) {
+      let mounted = true;
+      let lock: WakeLockSentinel | null = null;
+
+      // The lock is automatically released whenever the window goes invisible,
+      // so we need to reacquire it on visiblity changes
+      const onVisiblityChange = async () => {
+        if (document.visibilityState === "visible") {
+          try {
+            lock = await navigator.wakeLock.request("screen");
+            // Handle the edge case where this component unmounts before the
+            // promise resolves
+            if (!mounted)
+              lock
+                .release()
+                .catch((e) => logger.warn("Can't release wake lock", e));
+          } catch (e) {
+            logger.warn("Can't acquire wake lock", e);
+          }
+        }
+      };
+
+      onVisiblityChange();
+      document.addEventListener("visiblitychange", onVisiblityChange);
+
+      return () => {
+        mounted = false;
+        if (lock !== null)
+          lock
+            .release()
+            .catch((e) => logger.warn("Can't release wake lock", e));
+        document.removeEventListener("visiblitychange", onVisiblityChange);
+      };
+    }
+  }, []);
+};

src/video-grid/VideoTile.module.css

@@ -53,7 +53,7 @@ limitations under the License.
   bottom: -1px;
   content: "";
   border-radius: var(--tileRadius);
-  box-shadow: inset 0 0 0 4px var(--accent) !important;
+  box-shadow: inset 0 0 0 4px var(--cpd-color-border-accent) !important;
   opacity: 0;
   transition: opacity ease 0.15s;
 }
@@ -77,8 +77,8 @@ limitations under the License.
   position: absolute;
   height: 24px;
   padding: 0 8px;
-  color: var(--primary-content);
-  background-color: var(--background-85);
+  color: var(--cpd-color-text-primary);
+  background-color: var(--stopgap-background-85);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -95,6 +95,10 @@ limitations under the License.
   margin-right: 4px;
 }
 
+.infoBubble > svg * {
+  fill: var(--cpd-color-icon-primary);
+}
+
 .toolbar {
   position: absolute;
   top: 0;
@@ -103,8 +107,8 @@ limitations under the License.
   width: 100%;
   height: 42px;
 
-  color: var(--primary-content);
-  background-color: var(--background-85);
+  color: var(--cpd-color-text-primary);
+  background-color: var(--stopgap-background-85);
 
   display: flex;
   align-items: center;
@@ -154,7 +158,7 @@ limitations under the License.
 .videoMutedOverlay {
   width: 100%;
   height: 100%;
-  background-color: #21262c;
+  background-color: var(--cpd-color-bg-subtle-secondary);
 }
 
 .presenterLabel {
@@ -162,7 +166,7 @@ limitations under the License.
   top: 20px;
   left: 50%;
   transform: translateX(-50%);
-  background-color: #17191c;
+  background-color: var(--stopgap-background-85);
   border-radius: 4px;
   display: flex;
   justify-content: center;

src/video-grid/VideoTile.tsx

@@ -121,6 +121,15 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
 
     const toolbarButtons: JSX.Element[] = [];
     if (!sfuParticipant.isLocal) {
+      toolbarButtons.push(
+        <AudioButton
+          key="localVolume"
+          className={styles.button}
+          volume={(sfuParticipant as RemoteParticipant).getVolume() ?? 0}
+          onPress={onOptionsPress}
+        />
+      );
+
       if (content === TileContent.ScreenShare) {
         toolbarButtons.push(
           <FullscreenButton
@@ -130,16 +139,6 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
             onPress={onFullscreen}
           />
         );
-      } else {
-        // Due to the LK SDK this sadly only works for user-media atm
-        toolbarButtons.push(
-          <AudioButton
-            key="localVolume"
-            className={styles.button}
-            volume={(sfuParticipant as RemoteParticipant).getVolume() ?? 0}
-            onPress={onOptionsPress}
-          />
-        );
       }
     }