Merge pull request #2578 from robintown/spotlight-buttons

Fix spotlight tile regressions

.eslintrc.cjs

@@ -38,15 +38,6 @@ module.exports = {
     "jsx-a11y/media-has-caption": "off",
     // We should use the js-sdk logger, never console directly.
     "no-console": ["error"],
-    "no-restricted-imports": [
-      "error",
-      {
-        name: "@react-rxjs/core",
-        importNames: ["Subscribe", "RemoveSubscribe"],
-        message:
-          "These components are easy to misuse, please use the 'subscribe' component wrapper instead",
-      },
-    ],
     "react/display-name": "error",
   },
   settings: {

.github/workflows/docker.yaml

@@ -5,6 +5,10 @@ on:
       docker_tags:
         required: true
         type: string
+      artifact_run_id:
+        required: false
+        type: string
+        default: ${{ github.run_id }}
 
 env:
   REGISTRY: ghcr.io
@@ -19,18 +23,18 @@ jobs:
       packages: write
     steps:
       - name: Check it out
-        uses: actions/checkout@v4
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
 
       - name: 📥 Download artifact
-        uses: actions/download-artifact@v4
+        uses: actions/download-artifact@fa0a91b85d4f404e444e00e005971372dc801d16 # v4
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
-          run-id: ${{ github.event.workflow_run.id || github.run_id }}
+          run-id: ${{ inputs.artifact_run_id }}
           name: build-output
           path: dist
 
       - name: Log in to container registry
-        uses: docker/login-action@5f4866a30a54f16a52d2ecb4a3898e9e424939cf
+        uses: docker/login-action@9780b0c442fbb1117ed29e0efdff1e18412f7567 # v3.3.0
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}
@@ -38,16 +42,16 @@ jobs:
 
       - name: Extract metadata (tags, labels) for Docker
         id: meta
-        uses: docker/metadata-action@1294d94f8ee362ab42b6da04c35f4cd03a0e6af7
+        uses: docker/metadata-action@8e5442c4ef9f78752691e2d8f8d19755c6f78e81 # v5.5.1
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
           tags: ${{ inputs.docker_tags}}
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@a530e948adbeb357dbca95a7f8845d385edf4438
+        uses: docker/setup-buildx-action@988b5a0280414f521da01fcc63a27aeeb4b104db # v3.6.1
 
       - name: Build and push Docker image
-        uses: docker/build-push-action@7e6f77677b7892794c8852c6e3773c3e9bc3129a
+        uses: docker/build-push-action@5cd11c3a4ced054e52742c5fd54dca954e0edd85 # v6.7.0
         with:
           context: .
           platforms: linux/amd64,linux/arm64

.github/workflows/e2e.yml

@@ -12,7 +12,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out test private repo
-        uses: actions/checkout@v4
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
         with:
           repository: element-hq/static-call-participant
           ref: refs/heads/main

.github/workflows/element-call.yaml

@@ -21,11 +21,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
       - name: Yarn cache
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4
         with:
           cache: "yarn"
+          node-version: "lts/*"
       - name: Install dependencies
         run: "yarn install"
       - name: Build
@@ -38,7 +39,7 @@ jobs:
           VITE_APP_VERSION: ${{ inputs.vite_app_version }}
           NODE_OPTIONS: "--max-old-space-size=4096"
       - name: Upload Artifact
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@834a144ee995460fba8ed112a2fc961b36a5ec5a # v4
         with:
           name: build-output
           path: dist

.github/workflows/lint.yaml

@@ -7,11 +7,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
       - name: Yarn cache
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4
         with:
           cache: "yarn"
+          node-version: "lts/*"
       - name: Install dependencies
         run: "yarn install"
       - name: Prettier

.github/workflows/netlify.yaml

@@ -14,6 +14,10 @@ on:
       deployment_ref:
         required: true
         type: string
+      artifact_run_id:
+        required: false
+        type: string
+        default: ${{ github.run_id }}
     secrets:
       ELEMENT_BOT_TOKEN:
         required: true
@@ -30,7 +34,7 @@ jobs:
     environment: Netlify
     steps:
       - name: 📝 Create Deployment
-        uses: bobheadxi/deployments@v1
+        uses: bobheadxi/deployments@648679e8e4915b27893bd7dbc35cb504dc915bc8 # v1
         id: deployment
         with:
           step: start
@@ -42,10 +46,10 @@ jobs:
             Exercise caution. Use test accounts.
 
       - name: 📥 Download artifact
-        uses: actions/download-artifact@v4
+        uses: actions/download-artifact@fa0a91b85d4f404e444e00e005971372dc801d16 # v4
         with:
           github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
-          run-id: ${{ github.event.workflow_run.id }}
+          run-id: ${{ inputs.artifact_run_id }}
           name: build-output
           path: webapp
 
@@ -54,11 +58,11 @@ jobs:
         run: curl -s https://raw.githubusercontent.com/element-hq/element-call/main/config/netlify_redirects > webapp/_redirects
 
       - name: Add config file
-        run: curl -s "https://raw.githubusercontent.com/${{ inputs.pr_head_full_name }}/${{ inputs.pr_head_ref }}/config/element_io_preview.json" > webapp/config.json
+        run: curl -s "https://raw.githubusercontent.com/${{ inputs.pr_head_full_name }}/${{ inputs.pr_head_ref }}/config/config_netlify_preview.json" > webapp/config.json
 
       - name: ☁️ Deploy to Netlify
         id: netlify
-        uses: nwtgck/actions-netlify@v3.0
+        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654 # v3.0
         with:
           publish-dir: webapp
           deploy-message: "Deploy from GitHub Actions"
@@ -69,7 +73,7 @@ jobs:
         timeout-minutes: 1
 
       - name: 🚦 Update deployment status
-        uses: bobheadxi/deployments@v1
+        uses: bobheadxi/deployments@648679e8e4915b27893bd7dbc35cb504dc915bc8 # v1
         if: always()
         with:
           step: finish

.github/workflows/pr-deploy.yaml

@@ -14,7 +14,7 @@ jobs:
       pr_data_json: ${{ steps.prdetails.outputs.data }}
     steps:
       - id: prdetails
-        uses: matrix-org/pr-details-action@v1.3
+        uses: matrix-org/pr-details-action@15bde5285d7850ba276cc3bd8a03733e3f24622a # v1.3
         continue-on-error: true
         with:
           owner: ${{ github.event.workflow_run.head_repository.owner.login }}
@@ -26,6 +26,7 @@ jobs:
       deployments: write
     uses: ./.github/workflows/netlify.yaml
     with:
+      artifact_run_id: ${{ github.event.workflow_run.id || github.run_id }}
       pr_number: ${{ needs.prdetails.outputs.pr_number }}
       pr_head_full_name: ${{ github.event.workflow_run.head_repository.full_name }}
       pr_head_ref: ${{ needs.prdetails.outputs.pr_data_json && fromJSON(needs.prdetails.outputs.pr_data_json).head.ref }}
@@ -43,6 +44,7 @@ jobs:
       packages: write
     uses: ./.github/workflows/docker.yaml
     with:
+      artifact_run_id: ${{ github.event.workflow_run.id || github.run_id }}
       docker_tags: |
         type=sha,format=short,event=branch
         type=raw,value=pr_${{ needs.prdetails.outputs.pr_number }}

.github/workflows/publish.yaml

@@ -39,7 +39,7 @@ jobs:
         id: current-time
         run: echo "unix_time=$(date +'%s')" >> $GITHUB_OUTPUT
       - name: 📥 Download artifact
-        uses: actions/download-artifact@v4
+        uses: actions/download-artifact@fa0a91b85d4f404e444e00e005971372dc801d16 # v4
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           run-id: ${{ github.event.workflow_run.id || github.run_id }}
@@ -51,18 +51,20 @@ jobs:
         run: |
           tar --numeric-owner --transform "s/dist/element-call-${TARBALL_VERSION}/" -cvzf element-call-${TARBALL_VERSION}.tar.gz dist
       - name: Upload
-        uses: actions/upload-artifact@b06cde36fc32a3ee94080e87258567f73f921537
+        uses: actions/upload-artifact@834a144ee995460fba8ed112a2fc961b36a5ec5a # v4.3.6
         env:
           GITHUB_TOKEN: ${{ github.token }}
         with:
           path: "./element-call-*.tar.gz"
   publish_docker:
     needs: publish_tarball
+    if: always()
     permissions:
       contents: write
       packages: write
     uses: ./.github/workflows/docker.yaml
     with:
+      artifact_run_id: ${{ github.event.workflow_run.id || github.run_id }}
       docker_tags: |
         type=sha,format=short,event=branch
         type=semver,pattern=v{{version}}

.github/workflows/test.yaml

@@ -9,16 +9,17 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
       - name: Yarn cache
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4
         with:
           cache: "yarn"
+          node-version: "lts/*"
       - name: Install dependencies
         run: "yarn install"
       - name: Vitest
         run: "yarn run test"
       - name: Upload to codecov
-        uses: codecov/codecov-action@v4
+        uses: codecov/codecov-action@e28ff129e5465c2c0dcc6f003fc735cb6ae0c673 # v4
         with:
           flags: unittests

.github/workflows/translations-download.yaml

@@ -13,11 +13,12 @@ jobs:
 
     steps:
       - name: Checkout the code
-        uses: actions/checkout@v4
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
 
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4
         with:
           cache: "yarn"
+          node-version: "lts/*"
 
       - name: Install Deps
         run: "yarn install --frozen-lockfile"
@@ -26,7 +27,7 @@ jobs:
         run: "rm -R public/locales"
 
       - name: Download translation files
-        uses: localazy/download@v1.1.0
+        uses: localazy/download@0a79880fb66150601e3b43606fab69c88123c087 # v1.1.0
         with:
           groups: "-p includeSourceLang:true"
 
@@ -38,7 +39,7 @@ jobs:
 
       - name: Create Pull Request
         id: cpr
-        uses: peter-evans/create-pull-request@v6.0.3
+        uses: peter-evans/create-pull-request@c5a7806660adbe173f04e3e038b0ccdcd758773c # v6.1.0
         with:
           token: ${{ secrets.ELEMENT_BOT_TOKEN }}
           branch: actions/localazy-download

.github/workflows/translations-upload.yaml

@@ -14,9 +14,9 @@ jobs:
 
     steps:
       - name: Checkout the code
-        uses: actions/checkout@v4
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
 
       - name: Upload
-        uses: localazy/upload@v1
+        uses: localazy/upload@27e6b5c0fddf4551596b42226b1c24124335d24a # v1
         with:
           write_key: ${{ secrets.LOCALAZY_WRITE_KEY }}

README.md

@@ -22,7 +22,7 @@ yarn
 yarn build
 ```
 
-If all went well, you can now find the build output under `dist` as a series of static files. These can be hosted using any web server of your choice.
+If all went well, you can now find the build output under `dist` as a series of static files. These can be hosted using any web server that can be configured with custom routes (see below).
 
 You may also wish to add a configuration file (Element Call uses the domain it's hosted on as a Homeserver URL by default,
 but you can change this in the config file). This goes in `public/config.json` - you can use the sample as a starting point:
@@ -54,6 +54,38 @@ Therefore, to use a self-hosted homeserver, this is recommended to be a new serv
 
 There are currently two different config files. `.env` holds variables that are used at build time, while `public/config.json` holds variables that are used at runtime. Documentation and default values for `public/config.json` can be found in [ConfigOptions.ts](src/config/ConfigOptions.ts).
 
+If you're using [Synapse](https://github.com/element-hq/synapse/), you'll need to additionally add the following to `homeserver.yaml` or Element Call won't work:
+
+```
+experimental_features:
+    msc3266_enabled: true
+```
+
+MSC3266 allows to request a room summary of rooms you are not joined.
+The summary contains the room join rules. We need that to decide if the user gets prompted with the option to knock ("ask to join"), a cannot join error or the join view.
+
+Element Call requires a Livekit SFU behind a Livekit jwt service to work. The url to the Livekit jwt service can either be configured in the config of Element Call (fallback/legacy configuration) or be configured by your homeserver via the `.well-known`.
+This is the recommended method.
+
+The configuration is a list of Foci configs:
+
+```json
+"org.matrix.msc4143.rtc_foci": [
+    {
+        "type": "livekit",
+        "livekit_service_url": "https://someurl.com"
+    },
+     {
+        "type": "livekit",
+        "livekit_service_url": "https://livekit2.com"
+    },
+    {
+        "type": "another_foci",
+        "props_for_another_foci": "val"
+    },
+]
+```
+
 ## Translation
 
 If you'd like to help translate Element Call, head over to [Localazy](https://localazy.com/p/element-call). You're also encouraged to join the [Element Translators](https://matrix.to/#/#translators:element.io) space to discuss and coordinate translation efforts.
@@ -93,11 +125,13 @@ service for development. These use a test 'secret' published in this
 repository, so this must be used only for local development and
 **_never be exposed to the public Internet._**
 
-To use it, add SFU parameter in your local config `./public/config.json`:
+To use it, add a SFU parameter in your local config `./public/config.json`:
+(Be aware, that this is only the fallback Livekit SFU. If the homeserver
+advertises one in the client well-known, this will not be used.)
 
 ```json
 "livekit": {
-  "livekit_service_url": "http://localhost:8881"
+  "livekit_service_url": "http://localhost:7881"
 },
 ```
 
@@ -107,6 +141,28 @@ Run backend components:
 yarn backend
 ```
 
+### Add a new translation key
+
+To add a new translation key you can do these steps:
+
+1. Add the new key entry to the code where the new key is used: `t("some_new_key")`
+1. Run `yarn i18n` to extract the new key and update the translation files. This will add a skeleton entry to the `public/locales/en-GB/app.json` file:
+   ```jsonc
+   {
+       ...
+       "some_new_key": "",
+       ...
+   }
+   ```
+1. Update the skeleton entry in the `public/locales/en-GB/app.json` file with the English translation:
+   ```jsonc
+   {
+       ...
+       "some_new_key": "Some new key",
+       ...
+   }
+   ```
+
 ## Documentation
 
 Usage and other technical details about the project can be found here:

backend/livekit.yaml

@@ -1,5 +1,4 @@
 port: 7880
-environment: dev
 bind_addresses:
   - "0.0.0.0"
 rtc:

config/config.sample.json

@@ -5,5 +5,11 @@
       "server_name": "call.ems.host"
     }
   },
+  "livekit": {
+    "livekit_service_url": "http://localhost:7881"
+  },
+  "features": {
+    "feature_use_device_session_member_events": true
+  },
   "eula": "https://static.element.io/legal/online-EULA.pdf"
 }

config/config_netlify_preview.json

@@ -8,6 +8,9 @@
   "livekit": {
     "livekit_service_url": "https://livekit-jwt.call.element.dev"
   },
+  "features": {
+    "feature_use_device_session_member_events": true
+  },
   "posthog": {
     "api_key": "phc_rXGHx9vDmyEvyRxPziYtdVIv0ahEv8A9uLWFcCi1WcU",
     "api_host": "https://posthog-element-call.element.io"

config/element_io_develop.json

@@ -1,19 +0,0 @@
-{
-  "default_server_config": {
-    "m.homeserver": {
-      "base_url": "https://call.ems.host",
-      "server_name": "call.ems.host"
-    }
-  },
-  "posthog": {
-    "api_key": "phc_rXGHx9vDmyEvyRxPziYtdVIv0ahEv8A9uLWFcCi1WcU",
-    "api_host": "https://posthog-element-call.element.io"
-  },
-  "sentry": {
-    "environment": "main-branch-cd",
-    "DSN": "https://b1e328d49be3402ba96101338989fb35@sentry.matrix.org/41"
-  },
-  "rageshake": {
-    "submit_url": "https://element.io/bugreports/submit"
-  }
-}

package.json

@@ -1,4 +1,5 @@
 {
+  "name": "element-call",
   "version": "0.0.0",
   "type": "module",
   "scripts": {
@@ -19,15 +20,14 @@
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.3.1",
-    "@livekit/components-core": "^0.10.0",
+    "@livekit/components-core": "^0.11.0",
     "@livekit/components-react": "^2.0.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.48.0",
-    "@opentelemetry/instrumentation-document-load": "^0.36.0",
-    "@opentelemetry/instrumentation-user-interaction": "^0.36.0",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.52.0",
+    "@opentelemetry/instrumentation-document-load": "^0.39.0",
+    "@opentelemetry/instrumentation-user-interaction": "^0.39.0",
     "@opentelemetry/sdk-trace-web": "^1.9.1",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-slider": "^1.1.2",
@@ -40,45 +40,45 @@
     "@react-aria/tabs": "^3.1.0",
     "@react-aria/tooltip": "^3.1.3",
     "@react-aria/utils": "^3.10.0",
-    "@react-rxjs/core": "^0.10.7",
     "@react-spring/web": "^9.4.4",
     "@react-stately/collections": "^3.3.4",
     "@react-stately/select": "^3.1.3",
     "@react-stately/tooltip": "^3.0.5",
     "@react-stately/tree": "^3.2.0",
-    "@sentry/react": "^7.0.0",
+    "@sentry/react": "^8.0.0",
     "@sentry/tracing": "^7.0.0",
     "@types/lodash": "^4.14.199",
     "@use-gesture/react": "^10.2.11",
     "@vector-im/compound-design-tokens": "^1.0.0",
-    "@vector-im/compound-web": "^3.0.0",
+    "@vector-im/compound-web": "^6.0.0",
     "@vitejs/plugin-basic-ssl": "^1.0.1",
     "@vitejs/plugin-react": "^4.0.1",
     "buffer": "^6.0.3",
     "classnames": "^2.3.1",
     "events": "^3.3.0",
     "i18next": "^23.0.0",
-    "i18next-browser-languagedetector": "^7.0.0",
+    "i18next-browser-languagedetector": "^8.0.0",
     "i18next-http-backend": "^2.0.0",
     "livekit-client": "^2.0.2",
     "lodash": "^4.17.21",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#d55c6a36df539f6adacc335efe5b9be27c9cee4a",
-    "matrix-widget-api": "^1.3.1",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#467908703bc67fa3e23d978f5549e2709d4acf74",
+    "matrix-widget-api": "^1.8.2",
     "normalize.css": "^8.0.1",
+    "observable-hooks": "^4.2.3",
     "pako": "^2.0.4",
-    "postcss-preset-env": "^9.0.0",
+    "postcss-preset-env": "^10.0.0",
     "posthog-js": "^1.29.0",
     "react": "18",
     "react-dom": "18",
-    "react-i18next": "^14.0.0",
+    "react-i18next": "^15.0.0",
     "react-router-dom": "^5.2.0",
     "react-use-clipboard": "^1.0.7",
     "react-use-measure": "^2.1.1",
     "rxjs": "^7.8.1",
     "sdp-transform": "^2.14.1",
-    "tinyqueue": "^2.0.3",
+    "tinyqueue": "^3.0.0",
     "unique-names-generator": "^4.6.0",
-    "uuid": "9",
+    "uuid": "10",
     "vaul": "^0.9.0"
   },
   "devDependencies": {
@@ -89,17 +89,19 @@
     "@react-spring/rafz": "^9.7.3",
     "@react-types/dialog": "^3.5.5",
     "@sentry/vite-plugin": "^2.0.0",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/dom": "^10.1.0",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.1",
     "@types/content-type": "^1.1.5",
     "@types/dom-screen-wake-lock": "^1.0.1",
     "@types/dompurify": "^3.0.2",
     "@types/grecaptcha": "^3.0.4",
     "@types/node": "^20.0.0",
+    "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/request": "^2.48.8",
     "@types/sdp-transform": "^2.4.5",
-    "@types/uuid": "9",
+    "@types/uuid": "10",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^7.0.0",
     "babel-loader": "^9.0.0",
@@ -113,8 +115,8 @@
     "eslint-plugin-matrix-org": "^1.2.1",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.5.0",
-    "eslint-plugin-unicorn": "^51.0.0",
-    "i18next-parser": "^8.0.0",
+    "eslint-plugin-unicorn": "^55.0.0",
+    "i18next-parser": "^9.0.0",
     "jsdom": "^24.0.0",
     "prettier": "^3.0.0",
     "sass": "^1.42.1",
@@ -123,6 +125,6 @@
     "vite": "^5.0.0",
     "vite-plugin-html-template": "^1.1.0",
     "vite-plugin-svgr": "^4.0.0",
-    "vitest": "^1.2.2"
+    "vitest": "^2.0.0"
   }
 }

public/locales/en-GB/app.json

@@ -41,6 +41,7 @@
     "analytics": "Analytics",
     "audio": "Audio",
     "avatar": "Avatar",
+    "back": "Back",
     "camera": "Camera",
     "copied": "Copied!",
     "display_name": "Display name",
@@ -49,6 +50,7 @@
     "home": "Home",
     "loading": "Loading…",
     "microphone": "Microphone",
+    "next": "Next",
     "options": "Options",
     "password": "Password",
     "profile": "Profile",
@@ -57,11 +59,22 @@
     "username": "Username",
     "video": "Video"
   },
+  "crypto_version": "Crypto version: {{version}}",
+  "device_id": "Device ID: {{id}}",
   "disconnected_banner": "Connectivity to the server has been lost.",
   "full_screen_view_description": "<0>Submitting debug logs will help us track down the problem.</0>",
   "full_screen_view_h1": "<0>Oops, something's gone wrong.</0>",
-  "group_call_loader_failed_heading": "Call not found",
-  "group_call_loader_failed_text": "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.",
+  "group_call_loader": {
+    "banned_body": "You have been banned from the room.",
+    "banned_heading": "Banned",
+    "call_ended_body": "You have been removed from the call.",
+    "call_ended_heading": "Call ended",
+    "failed_heading": "Failed to join",
+    "failed_text": "Call not found or is not accessible.",
+    "knock_reject_body": "The room members declined your request to join.",
+    "knock_reject_heading": "Not allowed to join",
+    "reason": "Reason"
+  },
   "hangup_button_label": "End call",
   "header_label": "Element Call Home",
   "header_participants_label": "Participants",
@@ -77,8 +90,10 @@
   "layout_grid_label": "Grid",
   "layout_spotlight_label": "Spotlight",
   "lobby": {
+    "ask_to_join": "Ask to join call",
     "join_button": "Join call",
-    "leave_button": "Back to recents"
+    "leave_button": "Back to recents",
+    "waiting_for_invite": "Request sent"
   },
   "log_in": "Log In",
   "logging_in": "Logging in…",
@@ -86,6 +101,7 @@
   "login_auth_links_prompt": "Not registered yet?",
   "login_subheading": "To continue to Element",
   "login_title": "Login",
+  "matrix_id": "Matrix ID: {{id}}",
   "microphone_off": "Microphone off",
   "microphone_on": "Microphone on",
   "mute_microphone_button_label": "Mute microphone",
@@ -119,6 +135,7 @@
     "developer_settings_label": "Developer Settings",
     "developer_settings_label_description": "Expose developer settings in the settings window.",
     "developer_tab_title": "Developer",
+    "duplicate_tiles_label": "Number of additional tile copies per participant",
     "feedback_tab_body": "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.",
     "feedback_tab_description_label": "Your feedback",
     "feedback_tab_h4": "Submit feedback",
@@ -127,7 +144,6 @@
     "feedback_tab_title": "Feedback",
     "more_tab_title": "More",
     "opt_in_description": "<0></0><1></1>You may withdraw consent by unchecking this box. If you are currently in a call, this setting will take effect at the end of the call.",
-    "show_connection_stats_label": "Show connection stats",
     "speaker_device_selection_label": "Speaker"
   },
   "star_rating_input_label_one": "{{count}} stars",
@@ -141,14 +157,13 @@
   "unauthenticated_view_eula_caption": "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>",
   "unauthenticated_view_login_button": "Login to your account",
   "unmute_microphone_button_label": "Unmute microphone",
-  "version": "Version: {{version}}",
+  "version": "{{productName}} version: {{version}}",
   "video_tile": {
+    "always_show": "Always show",
     "change_fit_contain": "Fit to frame",
     "exit_full_screen": "Exit full screen",
     "full_screen": "Full screen",
     "mute_for_me": "Mute for me",
-    "sfu_participant_local": "You",
     "volume": "Volume"
-  },
-  "waiting_for_participants": "Waiting for other participants…"
+  }
 }

renovate.json

@@ -3,9 +3,45 @@
   "extends": ["config:base"],
   "packageRules": [
     {
-      "description": "Disable renoavte for packages we want to monitor ourselves",
-      "matchPackagePatterns": ["matrix-js-sdk"],
+      "groupName": "all non-major dependencies",
+      "groupSlug": "all-minor-patch",
+      "matchUpdateTypes": ["minor", "patch"],
+      "extends": ["schedule:weekly"]
+    },
+    {
+      "groupName": "GitHub Actions",
+      "matchDepTypes": ["action"],
+      "pinDigests": true,
+      "extends": ["schedule:monthly"]
+    },
+    {
+      "description": "Disable Renovate for packages we want to monitor ourselves",
+      "groupName": "manually updated packages",
+      "matchDepNames": ["matrix-js-sdk"],
       "enabled": false
+    },
+    {
+      "groupName": "matrix-widget-api",
+      "matchDepNames": ["matrix-widget-api"]
+    },
+    {
+      "groupName": "Compound",
+      "matchPackagePrefixes": ["@vector-im/compound-"],
+      "schedule": "before 5am on Tuesday and Friday"
+    },
+    {
+      "groupName": "LiveKit client",
+      "matchDepNames": ["livekit-client"]
+    },
+    {
+      "groupName": "LiveKit components",
+      "matchPackagePrefixes": ["@livekit/components-"]
+    },
+    {
+      "groupName": "Vaul",
+      "matchDepNames": ["vaul"],
+      "extends": ["schedule:monthly"],
+      "prHeader": "Please review modals on mobile for visual regressions."
     }
   ],
   "semanticCommits": "disabled",

src/@types/global.d.ts

@@ -23,17 +23,6 @@ declare global {
     webkitFullscreenElement: HTMLElement | null;
   }
 
-  interface Window {
-    // TODO: https://gitlab.matrix.org/matrix-org/olm/-/issues/10
-    OLM_OPTIONS: Record<string, string>;
-  }
-
-  // TypeScript doesn't know about the experimental setSinkId method, so we
-  // declare it ourselves
-  interface MediaElement extends HTMLVideoElement {
-    setSinkId: (id: string) => void;
-  }
-
   interface HTMLElement {
     // Safari only supports this prefixed, so tell the type system about it
     webkitRequestFullscreen: () => void;

src/ClientContext.tsx

@@ -25,7 +25,11 @@ import {
   useMemo,
 } from "react";
 import { useHistory } from "react-router-dom";
-import { ClientEvent, MatrixClient } from "matrix-js-sdk/src/client";
+import {
+  ClientEvent,
+  ICreateClientOpts,
+  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";
@@ -317,7 +321,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
       initClientState.client.on(ClientEvent.Sync, onSync);
     }
 
-    return () => {
+    return (): void => {
       if (initClientState.client) {
         initClientState.client.removeListener(ClientEvent.Sync, onSync);
       }
@@ -360,13 +364,13 @@ async function loadClient(): Promise<InitResult | null> {
 
       /* eslint-disable camelcase */
       const { user_id, device_id, access_token, passwordlessUser } = session;
-      const initClientParams = {
+      const initClientParams: ICreateClientOpts = {
         baseUrl: Config.defaultHomeserverUrl()!,
         accessToken: access_token,
         userId: user_id,
         deviceId: device_id,
         fallbackICEServerAllowed: fallbackICEServerAllowed,
-        livekitServiceURL: Config.get().livekit!.livekit_service_url,
+        livekitServiceURL: Config.get().livekit?.livekit_service_url,
       };
 
       try {

src/FullScreenView.tsx

@@ -58,6 +58,7 @@ interface ErrorViewProps {
 
 export const ErrorView: FC<ErrorViewProps> = ({ error }) => {
   const location = useLocation();
+  const { confineToRoom } = useUrlParams();
   const { t } = useTranslation();
 
   useEffect(() => {
@@ -78,25 +79,26 @@ export const ErrorView: FC<ErrorViewProps> = ({ error }) => {
           : error.message}
       </p>
       <RageshakeButton description={`***Error View***: ${error.message}`} />
-      {location.pathname === "/" ? (
-        <Button
-          size="lg"
-          variant="default"
-          className={styles.homeLink}
-          onPress={onReload}
-        >
-          {t("return_home_button")}
-        </Button>
-      ) : (
-        <LinkButton
-          size="lg"
-          variant="default"
-          className={styles.homeLink}
-          to="/"
-        >
-          {t("return_home_button")}
-        </LinkButton>
-      )}
+      {!confineToRoom &&
+        (location.pathname === "/" ? (
+          <Button
+            size="lg"
+            variant="default"
+            className={styles.homeLink}
+            onPress={onReload}
+          >
+            {t("return_home_button")}
+          </Button>
+        ) : (
+          <LinkButton
+            size="lg"
+            variant="default"
+            className={styles.homeLink}
+            to="/"
+          >
+            {t("return_home_button")}
+          </LinkButton>
+        ))}
     </FullScreenView>
   );
 };

src/Header.module.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2022-2024 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.
@@ -90,6 +90,7 @@ limitations under the License.
 .nameLine {
   grid-area: name;
   flex-grow: 1;
+  min-width: 0;
   display: flex;
   align-items: center;
   gap: var(--cpd-space-1x);
@@ -97,8 +98,6 @@ limitations under the License.
 
 .nameLine > h1 {
   margin: 0;
-  /* XXX I can't actually get this ellipsis overflow to trigger, because
-  constraint propagation in a nested flexbox layout is a massive pain */
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -109,6 +108,7 @@ limitations under the License.
 
 .participantsLine {
   grid-area: participants;
+  color: var(--cpd-color-text-secondary);
   display: flex;
   align-items: center;
   gap: var(--cpd-space-1-5x);

src/Header.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2022-2024 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.
@@ -15,11 +15,11 @@ limitations under the License.
 */
 
 import classNames from "classnames";
-import { FC, HTMLAttributes, ReactNode } from "react";
+import { FC, HTMLAttributes, ReactNode, forwardRef } from "react";
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { Heading, Text } from "@vector-im/compound-web";
-import UserProfileIcon from "@vector-im/compound-design-tokens/icons/user-profile.svg?react";
+import { UserProfileIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import styles from "./Header.module.css";
 import Logo from "./icons/Logo.svg?react";
@@ -32,13 +32,21 @@ interface HeaderProps extends HTMLAttributes<HTMLElement> {
   className?: string;
 }
 
-export const Header: FC<HeaderProps> = ({ children, className, ...rest }) => {
-  return (
-    <header className={classNames(styles.header, className)} {...rest}>
-      {children}
-    </header>
-  );
-};
+export const Header = forwardRef<HTMLElement, HeaderProps>(
+  ({ children, className, ...rest }, ref) => {
+    return (
+      <header
+        ref={ref}
+        className={classNames(styles.header, className)}
+        {...rest}
+      >
+        {children}
+      </header>
+    );
+  },
+);
+
+Header.displayName = "Header";
 
 interface LeftNavProps extends HTMLAttributes<HTMLElement> {
   children: ReactNode;
@@ -117,7 +125,7 @@ interface RoomHeaderInfoProps {
   name: string;
   avatarUrl: string | null;
   encrypted: boolean;
-  participantCount: number;
+  participantCount: number | null;
 }
 
 export const RoomHeaderInfo: FC<RoomHeaderInfoProps> = ({
@@ -150,7 +158,7 @@ export const RoomHeaderInfo: FC<RoomHeaderInfoProps> = ({
         </Heading>
         <EncryptionLock encrypted={encrypted} />
       </div>
-      {participantCount > 0 && (
+      {(participantCount ?? 0) > 0 && (
         <div className={styles.participantsLine}>
           <UserProfileIcon
             width={20}
@@ -158,7 +166,7 @@ export const RoomHeaderInfo: FC<RoomHeaderInfoProps> = ({
             aria-label={t("header_participants_label")}
           />
           <Text as="span" size="sm" weight="medium">
-            {t("participant_count", { count: participantCount })}
+            {t("participant_count", { count: participantCount ?? 0 })}
           </Text>
         </div>
       )}

src/Modal.tsx

@@ -27,7 +27,7 @@ import {
 } from "@radix-ui/react-dialog";
 import { Drawer } from "vaul";
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
-import CloseIcon from "@vector-im/compound-design-tokens/icons/close.svg?react";
+import { CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 import classNames from "classnames";
 import { Heading, Glass } from "@vector-im/compound-web";
 

src/Platform.ts

@@ -36,3 +36,8 @@ if (/android/i.test(navigator.userAgent)) {
 } else {
   platform = "desktop";
 }
+
+export const isFirefox = (): boolean => {
+  const { userAgent } = navigator;
+  return userAgent.includes("Firefox");
+};

src/Toast.tsx

@@ -76,7 +76,7 @@ export const Toast: FC<Props> = ({
   useEffect(() => {
     if (open && autoDismiss !== undefined) {
       const timeout = setTimeout(onDismiss, autoDismiss);
-      return () => clearTimeout(timeout);
+      return (): void => clearTimeout(timeout);
     }
   }, [open, autoDismiss, onDismiss]);
 

src/UrlParams.ts

@@ -16,10 +16,11 @@ limitations under the License.
 
 import { useMemo } from "react";
 import { useLocation } from "react-router-dom";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import { Config } from "./config/Config";
-
-export const PASSWORD_STRING = "password=";
+import { EncryptionSystem } from "./e2ee/sharedKeyManagement";
+import { E2eeType } from "./e2ee/e2eeType";
 
 interface RoomIdentifier {
   roomAlias: string | null;
@@ -328,3 +329,32 @@ export const useRoomIdentifier = (): RoomIdentifier => {
     [pathname, search, hash],
   );
 };
+
+export function generateUrlSearchParams(
+  roomId: string,
+  encryptionSystem: EncryptionSystem,
+  viaServers?: string[],
+): URLSearchParams {
+  const params = new URLSearchParams();
+  // The password shouldn't need URL encoding here (we generate URL-safe ones) but encode
+  // it in case it came from another client that generated a non url-safe one
+  switch (encryptionSystem?.kind) {
+    case E2eeType.SHARED_KEY: {
+      const encodedPassword = encodeURIComponent(encryptionSystem.secret);
+      if (encodedPassword !== encryptionSystem.secret) {
+        logger.info(
+          "Encoded call password used non URL-safe chars: buggy client?",
+        );
+      }
+      params.set("password", encodedPassword);
+      break;
+    }
+    case E2eeType.PER_PARTICIPANT:
+      params.set("perParticipantE2EE", "true");
+      break;
+  }
+  params.set("roomId", roomId);
+  viaServers?.forEach((s) => params.set("viaServers", s));
+
+  return params;
+}

src/analytics/PosthogAnalytics.ts

@@ -20,7 +20,6 @@ import { MatrixClient } from "matrix-js-sdk";
 import { Buffer } from "buffer";
 
 import { widget } from "../widget";
-import { getSetting, setSetting, getSettingKey } from "../settings/useSetting";
 import {
   CallEndedTracker,
   CallStartedTracker,
@@ -35,7 +34,7 @@ import {
 } from "./PosthogEvents";
 import { Config } from "../config/Config";
 import { getUrlParams } from "../UrlParams";
-import { localStorageBus } from "../useLocalStorage";
+import { optInAnalytics } from "../settings/settings";
 
 /* Posthog analytics tracking.
  *
@@ -131,7 +130,7 @@ export class PosthogAnalytics {
         const { analyticsID } = getUrlParams();
         // if the embedding platform (element web) already got approval to communicating with posthog
         // element call can also send events to posthog
-        setSetting("opt-in-analytics", Boolean(analyticsID));
+        optInAnalytics.setValue(Boolean(analyticsID));
       }
 
       this.posthog.init(posthogConfig.project_api_key, {
@@ -151,9 +150,7 @@ export class PosthogAnalytics {
       );
       this.enabled = false;
     }
-    this.startListeningToSettingsChanges();
-    const optInAnalytics = getSetting("opt-in-analytics", false);
-    this.updateAnonymityAndIdentifyUser(optInAnalytics);
+    this.startListeningToSettingsChanges(); // Triggers maybeIdentifyUser
   }
 
   private sanitizeProperties = (
@@ -336,8 +333,7 @@ export class PosthogAnalytics {
   }
 
   public onLoginStatusChanged(): void {
-    const optInAnalytics = getSetting("opt-in-analytics", false);
-    this.updateAnonymityAndIdentifyUser(optInAnalytics);
+    this.maybeIdentifyUser();
   }
 
   private updateSuperProperties(): void {
@@ -360,20 +356,12 @@ export class PosthogAnalytics {
     return this.eventSignup.getSignupEndTime() > new Date(0);
   }
 
-  private async updateAnonymityAndIdentifyUser(
-    pseudonymousOptIn: boolean,
-  ): Promise<void> {
-    // Update this.anonymity based on the user's analytics opt-in settings
-    const anonymity = pseudonymousOptIn
-      ? Anonymity.Pseudonymous
-      : Anonymity.Disabled;
-    this.setAnonymity(anonymity);
-
+  private async maybeIdentifyUser(): Promise<void> {
     // We may not yet have a Matrix client at this point, if not, bail. This should get
     // triggered again by onLoginStatusChanged once we do have a client.
     if (!window.matrixclient) return;
 
-    if (anonymity === Anonymity.Pseudonymous) {
+    if (this.anonymity === Anonymity.Pseudonymous) {
       this.setRegistrationType(
         window.matrixclient.isGuest() || window.passwordlessUser
           ? RegistrationType.Guest
@@ -389,7 +377,7 @@ export class PosthogAnalytics {
       }
     }
 
-    if (anonymity !== Anonymity.Disabled) {
+    if (this.anonymity !== Anonymity.Disabled) {
       this.updateSuperProperties();
     }
   }
@@ -419,8 +407,9 @@ 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)
-    localStorageBus.on(getSettingKey("opt-in-analytics"), (optInAnalytics) => {
-      this.updateAnonymityAndIdentifyUser(optInAnalytics);
+    optInAnalytics.value.subscribe((optIn) => {
+      this.setAnonymity(optIn ? Anonymity.Pseudonymous : Anonymity.Disabled);
+      this.maybeIdentifyUser();
     });
   }
 

src/auth/useInteractiveLogin.ts

@@ -16,7 +16,11 @@ limitations under the License.
 
 import { useCallback } from "react";
 import { InteractiveAuth } from "matrix-js-sdk/src/interactive-auth";
-import { createClient, MatrixClient } from "matrix-js-sdk/src/matrix";
+import {
+  createClient,
+  LoginResponse,
+  MatrixClient,
+} from "matrix-js-sdk/src/matrix";
 
 import { initClient } from "../matrix-utils";
 import { Session } from "../ClientContext";
@@ -37,7 +41,7 @@ export function useInteractiveLogin(): (
 
     const interactiveAuth = new InteractiveAuth({
       matrixClient: authClient,
-      doRequest: () =>
+      doRequest: (): Promise<LoginResponse> =>
         authClient.login("m.login.password", {
           identifier: {
             type: "m.id.user",

src/auth/useInteractiveRegistration.ts

@@ -16,7 +16,11 @@ limitations under the License.
 
 import { useState, useEffect, useCallback, useRef } from "react";
 import { InteractiveAuth } from "matrix-js-sdk/src/interactive-auth";
-import { createClient, MatrixClient } from "matrix-js-sdk/src/matrix";
+import {
+  createClient,
+  MatrixClient,
+  RegisterResponse,
+} from "matrix-js-sdk/src/matrix";
 
 import { initClient } from "../matrix-utils";
 import { Session } from "../ClientContext";
@@ -69,7 +73,7 @@ export const useInteractiveRegistration = (): {
     ): Promise<[MatrixClient, Session]> => {
       const interactiveAuth = new InteractiveAuth({
         matrixClient: authClient.current!,
-        doRequest: (auth) =>
+        doRequest: (auth): Promise<RegisterResponse> =>
           authClient.current!.registerRequest({
             username,
             password,

src/button/Button.tsx

@@ -20,14 +20,16 @@ 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 MicOnSolidIcon from "@vector-im/compound-design-tokens/icons/mic-on-solid.svg?react";
-import MicOffSolidIcon from "@vector-im/compound-design-tokens/icons/mic-off-solid.svg?react";
-import VideoCallSolidIcon from "@vector-im/compound-design-tokens/icons/video-call-solid.svg?react";
-import VideoCallOffSolidIcon from "@vector-im/compound-design-tokens/icons/video-call-off-solid.svg?react";
-import EndCallIcon from "@vector-im/compound-design-tokens/icons/end-call.svg?react";
-import ShareScreenSolidIcon from "@vector-im/compound-design-tokens/icons/share-screen-solid.svg?react";
-import SettingsSolidIcon from "@vector-im/compound-design-tokens/icons/settings-solid.svg?react";
-import ChevronDownIcon from "@vector-im/compound-design-tokens/icons/chevron-down.svg?react";
+import {
+  MicOnSolidIcon,
+  MicOffSolidIcon,
+  VideoCallSolidIcon,
+  VideoCallOffSolidIcon,
+  EndCallIcon,
+  ShareScreenSolidIcon,
+  SettingsSolidIcon,
+  ChevronDownIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import styles from "./Button.module.css";
 
@@ -149,7 +151,7 @@ export const MicButton: FC<{
   return (
     <Tooltip label={label}>
       <Button variant="toolbar" {...rest} on={muted}>
-        <Icon aria-label={label} />
+        <Icon aria-hidden width={24} height={24} />
       </Button>
     </Tooltip>
   );
@@ -169,7 +171,7 @@ export const VideoButton: FC<{
   return (
     <Tooltip label={label}>
       <Button variant="toolbar" {...rest} on={muted}>
-        <Icon aria-label={label} />
+        <Icon aria-hidden width={24} height={24} />
       </Button>
     </Tooltip>
   );
@@ -189,7 +191,7 @@ export const ScreenshareButton: FC<{
   return (
     <Tooltip label={label}>
       <Button variant="toolbar" {...rest} on={enabled}>
-        <ShareScreenSolidIcon aria-label={label} />
+        <ShareScreenSolidIcon aria-hidden width={24} height={24} />
       </Button>
     </Tooltip>
   );
@@ -209,7 +211,7 @@ export const HangupButton: FC<{
         className={classNames(styles.hangupButton, className)}
         {...rest}
       >
-        <EndCallIcon aria-label={t("hangup_button_label")} />
+        <EndCallIcon aria-hidden width={24} height={24} />
       </Button>
     </Tooltip>
   );
@@ -225,7 +227,7 @@ export const SettingsButton: FC<{
   return (
     <Tooltip label={t("common.settings")}>
       <Button variant="toolbar" {...rest}>
-        <SettingsSolidIcon aria-label={t("common.settings")} />
+        <SettingsSolidIcon aria-hidden width={24} height={24} />
       </Button>
     </Tooltip>
   );

src/button/InviteButton.tsx

@@ -17,7 +17,7 @@ limitations under the License.
 import { ComponentPropsWithoutRef, FC } from "react";
 import { Button } from "@vector-im/compound-web";
 import { useTranslation } from "react-i18next";
-import UserAddIcon from "@vector-im/compound-design-tokens/icons/user-add.svg?react";
+import { UserAddIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 export const InviteButton: FC<
   Omit<ComponentPropsWithoutRef<"button">, "children">

src/config/ConfigOptions.ts

@@ -55,16 +55,31 @@ export interface ConfigOptions {
 
   // Describes the LiveKit configuration to be used.
   livekit?: {
-    // The link to the service that returns a livekit url and token to use it
+    // The link to the service that returns a livekit url and token to use it.
+    // This is a fallback link in case the homeserver in use does not advertise
+    // a livekit service url in the client well-known.
+    // The well known needs to be formatted like so:
+    // {"type":"livekit", "livekit_service_url":"https://livekit.example.com"}
+    // and stored under the key: "livekit_focus"
     livekit_service_url: string;
   };
 
   /**
-   * Allow to join a group calls without audio and video.
-   * TEMPORARY: Is a feature that's not proved and experimental
+   * TEMPORARY experimental features.
    */
   features?: {
-    feature_group_calls_without_video_and_audio: boolean;
+    /**
+     * Allow to join group calls without audio and video.
+     */
+    feature_group_calls_without_video_and_audio?: boolean;
+    /**
+     * Send device-specific call session membership state events instead of
+     * legacy user-specific call membership state events.
+     * This setting has no effect when the user joins an active call with
+     * legacy state events. For compatibility, Element Call will always join
+     * active legacy calls with legacy state events.
+     */
+    feature_use_device_session_member_events?: boolean;
   };
 
   /**

src/e2ee/sharedKeyManagement.ts

@@ -15,12 +15,11 @@ limitations under the License.
 */
 
 import { useEffect, useMemo } from "react";
-import { Room } from "matrix-js-sdk";
 
 import { setLocalStorageItem, useLocalStorage } from "../useLocalStorage";
-import { useClient } from "../ClientContext";
 import { UrlParams, getUrlParams, useUrlParams } from "../UrlParams";
-import { widget } from "../widget";
+import { E2eeType } from "./e2eeType";
+import { useClient } from "../ClientContext";
 
 export function saveKeyForRoom(roomId: string, password: string): void {
   setLocalStorageItem(getRoomSharedKeyLocalStorageKey(roomId), password);
@@ -68,30 +67,37 @@ const useKeyFromUrl = (): [string, string] | [undefined, undefined] => {
     : [undefined, undefined];
 };
 
-export const useRoomSharedKey = (roomId: string): string | undefined => {
+export type Unencrypted = { kind: E2eeType.NONE };
+export type SharedSecret = { kind: E2eeType.SHARED_KEY; secret: string };
+export type PerParticipantE2EE = { kind: E2eeType.PER_PARTICIPANT };
+export type EncryptionSystem = Unencrypted | SharedSecret | PerParticipantE2EE;
+
+export function useRoomEncryptionSystem(roomId: string): EncryptionSystem {
+  const { client } = useClient();
+
   // make sure we've extracted the key from the URL first
   // (and we still need to take the value it returns because
   // the effect won't run in time for it to save to localstorage in
   // time for us to read it out again).
-  const [urlRoomId, passwordFormUrl] = useKeyFromUrl();
-
+  const [urlRoomId, passwordFromUrl] = useKeyFromUrl();
   const storedPassword = useInternalRoomSharedKey(roomId);
-
-  if (storedPassword) return storedPassword;
-  if (urlRoomId === roomId) return passwordFormUrl;
-  return undefined;
-};
-
-export const useIsRoomE2EE = (roomId: string): boolean | null => {
-  const { client } = useClient();
-  const room = useMemo(() => client?.getRoom(roomId), [roomId, client]);
-
-  return useMemo(() => !room || isRoomE2EE(room), [room]);
-};
-
-export function isRoomE2EE(room: Room): boolean {
-  // For now, rooms in widget mode are never considered encrypted.
-  // In the future, when widget mode gains encryption support, then perhaps we
-  // should inspect the e2eEnabled URL parameter here?
-  return widget === null && !room.getCanonicalAlias();
+  const room = client?.getRoom(roomId);
+  const e2eeSystem = <EncryptionSystem>useMemo(() => {
+    if (!room) return { kind: E2eeType.NONE };
+    if (storedPassword)
+      return {
+        kind: E2eeType.SHARED_KEY,
+        secret: storedPassword,
+      };
+    if (urlRoomId === roomId)
+      return {
+        kind: E2eeType.SHARED_KEY,
+        secret: passwordFromUrl,
+      };
+    if (room.hasEncryptionStateEvent()) {
+      return { kind: E2eeType.PER_PARTICIPANT };
+    }
+    return { kind: E2eeType.NONE };
+  }, [passwordFromUrl, room, roomId, storedPassword, urlRoomId]);
+  return e2eeSystem;
 }

src/grid/CallLayout.ts

@@ -0,0 +1,150 @@
+/*
+Copyright 2024 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 { BehaviorSubject, Observable } from "rxjs";
+import { ComponentType } from "react";
+
+import { MediaViewModel, UserMediaViewModel } from "../state/MediaViewModel";
+import { LayoutProps } from "./Grid";
+
+export interface Bounds {
+  width: number;
+  height: number;
+}
+
+export interface Alignment {
+  inline: "start" | "end";
+  block: "start" | "end";
+}
+
+export const defaultSpotlightAlignment: Alignment = {
+  inline: "end",
+  block: "end",
+};
+export const defaultPipAlignment: Alignment = { inline: "end", block: "start" };
+
+export interface CallLayoutInputs {
+  /**
+   * The minimum bounds of the layout area.
+   */
+  minBounds: Observable<Bounds>;
+  /**
+   * The alignment of the floating spotlight tile, if present.
+   */
+  spotlightAlignment: BehaviorSubject<Alignment>;
+  /**
+   * The alignment of the small picture-in-picture tile, if present.
+   */
+  pipAlignment: BehaviorSubject<Alignment>;
+}
+
+export interface GridTileModel {
+  type: "grid";
+  vm: UserMediaViewModel;
+}
+
+export interface SpotlightTileModel {
+  type: "spotlight";
+  vms: MediaViewModel[];
+  maximised: boolean;
+}
+
+export type TileModel = GridTileModel | SpotlightTileModel;
+
+export interface CallLayoutOutputs<Model> {
+  /**
+   * Whether the scrolling layer of the layout should appear on top.
+   */
+  scrollingOnTop: boolean;
+  /**
+   * The visually fixed (non-scrolling) layer of the layout.
+   */
+  fixed: ComponentType<LayoutProps<Model, TileModel, HTMLDivElement>>;
+  /**
+   * The layer of the layout that can overflow and be scrolled.
+   */
+  scrolling: ComponentType<LayoutProps<Model, TileModel, HTMLDivElement>>;
+}
+
+/**
+ * A layout system for media tiles.
+ */
+export type CallLayout<Model> = (
+  inputs: CallLayoutInputs,
+) => CallLayoutOutputs<Model>;
+
+export interface GridArrangement {
+  tileWidth: number;
+  tileHeight: number;
+  gap: number;
+  columns: number;
+}
+
+const tileMaxAspectRatio = 17 / 9;
+const tileMinAspectRatio = 4 / 3;
+
+/**
+ * Determine the ideal arrangement of tiles into a grid of a particular size.
+ */
+export function arrangeTiles(
+  width: number,
+  minHeight: number,
+  tileCount: number,
+): GridArrangement {
+  // The goal here is to determine the grid size and padding that maximizes
+  // use of screen space for n tiles without making those tiles too small or
+  // too cropped (having an extreme aspect ratio)
+  const gap = width < 800 ? 16 : 20;
+  const area = width * minHeight;
+  // Magic numbers that make tiles scale up nicely as the window gets larger
+  const tileArea = Math.pow(Math.sqrt(area) / 8 + 125, 2);
+  const tilesPerPage = Math.min(tileCount, area / tileArea);
+
+  let columns = Math.min(
+    // Don't create more columns than we have items for
+    tilesPerPage,
+    // The ideal number of columns is given by a packing of equally-sized
+    // squares into a grid.
+    // width / column = height / row.
+    // columns * rows = number of squares.
+    // ∴ columns = sqrt(width / height * number of squares).
+    // Except we actually want 16:9-ish tiles rather than squares, so we
+    // divide the width-to-height ratio by the target aspect ratio.
+    Math.round(
+      Math.sqrt((width / minHeight / tileMinAspectRatio) * tilesPerPage),
+    ),
+  );
+  let rows = tilesPerPage / columns;
+  // If all the tiles could fit on one page, we want to ensure that they do by
+  // not leaving fractional rows hanging off the bottom
+  if (tilesPerPage === tileCount) {
+    rows = Math.ceil(rows);
+    // We may now be able to fit the tiles into fewer columns
+    columns = Math.ceil(tileCount / rows);
+  }
+
+  let tileWidth = (width - (columns + 1) * gap) / columns;
+  let tileHeight = (minHeight - (rows - 1) * gap) / rows;
+
+  // Impose a minimum and maximum aspect ratio on the tiles
+  const tileAspectRatio = tileWidth / tileHeight;
+  if (tileAspectRatio > tileMaxAspectRatio)
+    tileWidth = tileHeight * tileMaxAspectRatio;
+  else if (tileAspectRatio < tileMinAspectRatio)
+    tileHeight = tileWidth / tileMinAspectRatio;
+
+  return { tileWidth, tileHeight, gap, columns };
+}

src/grid/Grid.module.css

@@ -1,11 +1,11 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2023-2024 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
+    http://www.apache.org/licenses/LICENSE-2.0
 
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
@@ -14,9 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.videoGrid {
-  position: relative;
-  overflow: hidden;
-  flex: 1;
-  touch-action: none;
+.grid {
+  contain: layout style;
+}
+
+.slot {
+  contain: strict;
 }

src/grid/Grid.tsx

@@ -0,0 +1,514 @@
+/*
+Copyright 2023-2024 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 {
+  SpringRef,
+  TransitionFn,
+  animated,
+  useTransition,
+} from "@react-spring/web";
+import { EventTypes, Handler, useScroll } from "@use-gesture/react";
+import {
+  CSSProperties,
+  ComponentProps,
+  ComponentType,
+  Dispatch,
+  FC,
+  LegacyRef,
+  ReactNode,
+  SetStateAction,
+  createContext,
+  forwardRef,
+  memo,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import useMeasure from "react-use-measure";
+import classNames from "classnames";
+
+import styles from "./Grid.module.css";
+import { useMergedRefs } from "../useMergedRefs";
+import { TileWrapper } from "./TileWrapper";
+import { usePrefersReducedMotion } from "../usePrefersReducedMotion";
+import { useInitial } from "../useInitial";
+
+interface Rect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+interface Tile<Model> {
+  id: string;
+  model: Model;
+  onDrag: DragCallback | undefined;
+}
+
+type PlacedTile<Model> = Tile<Model> & Rect;
+
+interface TileSpring {
+  opacity: number;
+  scale: number;
+  zIndex: number;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+interface TileSpringUpdate extends Partial<TileSpring> {
+  from?: Partial<TileSpring>;
+  reset?: boolean;
+  immediate?: boolean | ((key: string) => boolean);
+  delay?: (key: string) => number;
+}
+
+interface DragState {
+  tileId: string;
+  tileX: number;
+  tileY: number;
+  cursorX: number;
+  cursorY: number;
+}
+
+interface SlotProps<Model> extends Omit<ComponentProps<"div">, "onDrag"> {
+  id: string;
+  model: Model;
+  onDrag?: DragCallback;
+  style?: CSSProperties;
+  className?: string;
+}
+
+interface Offset {
+  x: number;
+  y: number;
+}
+
+/**
+ * Gets the offset of one element relative to an ancestor.
+ */
+function offset(element: HTMLElement, relativeTo: Element): Offset {
+  if (
+    !(element.offsetParent instanceof HTMLElement) ||
+    element.offsetParent === relativeTo
+  ) {
+    return { x: element.offsetLeft, y: element.offsetTop };
+  } else {
+    const o = offset(element.offsetParent, relativeTo);
+    o.x += element.offsetLeft;
+    o.y += element.offsetTop;
+    return o;
+  }
+}
+
+interface LayoutContext {
+  setGeneration: Dispatch<SetStateAction<number | null>>;
+}
+
+const LayoutContext = createContext<LayoutContext | null>(null);
+
+/**
+ * Enables Grid to react to layout changes. You must call this in your Layout
+ * component or else Grid will not be reactive.
+ */
+export function useUpdateLayout(): void {
+  const context = useContext(LayoutContext);
+  if (context === null)
+    throw new Error("useUpdateLayout called outside a Grid layout context");
+
+  // On every render, tell Grid that the layout may have changed
+  useEffect(() =>
+    context.setGeneration((prev) => (prev === null ? 0 : prev + 1)),
+  );
+}
+
+export interface LayoutProps<LayoutModel, TileModel, R extends HTMLElement> {
+  ref: LegacyRef<R>;
+  model: LayoutModel;
+  /**
+   * Component creating an invisible "slot" for a tile to go in.
+   */
+  Slot: ComponentType<SlotProps<TileModel>>;
+}
+
+export interface TileProps<Model, R extends HTMLElement> {
+  ref: LegacyRef<R>;
+  className?: string;
+  style?: ComponentProps<typeof animated.div>["style"];
+  /**
+   * The width this tile will have once its animations have settled.
+   */
+  targetWidth: number;
+  /**
+   * The height this tile will have once its animations have settled.
+   */
+  targetHeight: number;
+  model: Model;
+}
+
+interface Drag {
+  /**
+   * The X coordinate of the dragged tile in grid space.
+   */
+  x: number;
+  /**
+   * The Y coordinate of the dragged tile in grid space.
+   */
+  y: number;
+  /**
+   * The X coordinate of the dragged tile, as a scalar of the grid width.
+   */
+  xRatio: number;
+  /**
+   * The Y coordinate of the dragged tile, as a scalar of the grid height.
+   */
+  yRatio: number;
+}
+
+export type DragCallback = (drag: Drag) => void;
+
+interface LayoutMemoProps<LayoutModel, TileModel, R extends HTMLElement>
+  extends LayoutProps<LayoutModel, TileModel, R> {
+  Layout: ComponentType<LayoutProps<LayoutModel, TileModel, R>>;
+}
+
+interface Props<
+  LayoutModel,
+  TileModel,
+  LayoutRef extends HTMLElement,
+  TileRef extends HTMLElement,
+> {
+  /**
+   * Data with which to populate the layout.
+   */
+  model: LayoutModel;
+  /**
+   * A component which creates an invisible layout grid of "slots" for tiles to
+   * go in. The root element must have a data-generation attribute which
+   * increments whenever the layout may have changed.
+   */
+  Layout: ComponentType<LayoutProps<LayoutModel, TileModel, LayoutRef>>;
+  /**
+   * The component used to render each tile in the layout.
+   */
+  Tile: ComponentType<TileProps<TileModel, TileRef>>;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * A grid of animated tiles.
+ */
+export function Grid<
+  LayoutModel,
+  TileModel,
+  LayoutRef extends HTMLElement,
+  TileRef extends HTMLElement,
+>({
+  model,
+  Layout,
+  Tile,
+  className,
+  style,
+}: Props<LayoutModel, TileModel, LayoutRef, TileRef>): ReactNode {
+  // Overview: This component places tiles by rendering an invisible layout grid
+  // of "slots" for tiles to go in. Once rendered, it uses the DOM API to get
+  // the dimensions of each slot, feeding these numbers back into react-spring
+  // to let the actual tiles move freely atop the layout.
+
+  // To tell us when the layout has changed, the layout system increments its
+  // data-generation attribute, which we watch with a MutationObserver.
+
+  const [gridRef1, gridBounds] = useMeasure();
+  const [gridRoot, gridRef2] = useState<HTMLElement | null>(null);
+  const gridRef = useMergedRefs<HTMLElement>(gridRef1, gridRef2);
+
+  const [layoutRoot, setLayoutRoot] = useState<HTMLElement | null>(null);
+  const [generation, setGeneration] = useState<number | null>(null);
+  const tiles = useInitial(() => new Map<string, Tile<TileModel>>());
+  const prefersReducedMotion = usePrefersReducedMotion();
+
+  const Slot: FC<SlotProps<TileModel>> = useMemo(
+    () =>
+      function Slot({ id, model, onDrag, style, className, ...props }) {
+        const ref = useRef<HTMLDivElement | null>(null);
+        useEffect(() => {
+          tiles.set(id, { id, model, onDrag });
+          return (): void => void tiles.delete(id);
+        }, [id, model, onDrag]);
+
+        return (
+          <div
+            ref={ref}
+            className={classNames(className, styles.slot)}
+            data-id={id}
+            style={style}
+            {...props}
+          />
+        );
+      },
+    [tiles],
+  );
+
+  // We must memoize the Layout component to break the update loop where a
+  // render of Grid causes a re-render of Layout, which in turn re-renders Grid
+  const LayoutMemo = useMemo(
+    () =>
+      memo(
+        forwardRef<
+          LayoutRef,
+          LayoutMemoProps<LayoutModel, TileModel, LayoutRef>
+        >(function LayoutMemo({ Layout, ...props }, ref): ReactNode {
+          return <Layout {...props} ref={ref} />;
+        }),
+      ),
+    [],
+  );
+
+  const context: LayoutContext = useMemo(() => ({ setGeneration }), []);
+
+  // Combine the tile definitions and slots together to create placed tiles
+  const placedTiles = useMemo(() => {
+    const result: PlacedTile<TileModel>[] = [];
+
+    if (gridRoot !== null && layoutRoot !== null) {
+      const slots = layoutRoot.getElementsByClassName(
+        styles.slot,
+      ) as HTMLCollectionOf<HTMLElement>;
+      for (const slot of slots) {
+        const id = slot.getAttribute("data-id")!;
+        if (slot.offsetWidth > 0 && slot.offsetHeight > 0)
+          result.push({
+            ...tiles.get(id)!,
+            ...offset(slot, gridRoot),
+            width: slot.offsetWidth,
+            height: slot.offsetHeight,
+          });
+      }
+    }
+
+    return result;
+    // The rects may change due to the grid resizing or updating to a new
+    // generation, but eslint can't statically verify this
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [gridRoot, layoutRoot, tiles, gridBounds, generation]);
+
+  // Drag state is stored in a ref rather than component state, because we use
+  // react-spring's imperative API during gestures to improve responsiveness
+  const dragState = useRef<DragState | null>(null);
+
+  const [tileTransitions, springRef] = useTransition(
+    placedTiles,
+    () => ({
+      key: ({ id }: Tile<TileModel>): string => id,
+      from: ({
+        x,
+        y,
+        width,
+        height,
+      }: PlacedTile<TileModel>): TileSpringUpdate => ({
+        opacity: 0,
+        scale: 0,
+        zIndex: 1,
+        x,
+        y,
+        width,
+        height,
+        immediate: prefersReducedMotion,
+      }),
+      enter: { opacity: 1, scale: 1, immediate: prefersReducedMotion },
+      update: ({
+        id,
+        x,
+        y,
+        width,
+        height,
+      }: PlacedTile<TileModel>): TileSpringUpdate | null =>
+        id === dragState.current?.tileId
+          ? null
+          : {
+              x,
+              y,
+              width,
+              height,
+              immediate: prefersReducedMotion,
+            },
+      leave: { opacity: 0, scale: 0, immediate: prefersReducedMotion },
+      config: { mass: 0.7, tension: 252, friction: 25 },
+    }),
+    // react-spring's types are bugged and can't infer the spring type
+  ) as unknown as [
+    TransitionFn<PlacedTile<TileModel>, TileSpring>,
+    SpringRef<TileSpring>,
+  ];
+
+  // Because we're using react-spring in imperative mode, we're responsible for
+  // firing animations manually whenever the tiles array updates
+  useEffect(() => {
+    springRef.start();
+  }, [placedTiles, springRef]);
+
+  const animateDraggedTile = (
+    endOfGesture: boolean,
+    callback: DragCallback,
+  ): void => {
+    const { tileId, tileX, tileY } = dragState.current!;
+    const tile = placedTiles.find((t) => t.id === tileId)!;
+
+    springRef.current
+      .find((c) => (c.item as Tile<TileModel>).id === tileId)
+      ?.start(
+        endOfGesture
+          ? {
+              scale: 1,
+              zIndex: 1,
+              x: tile.x,
+              y: tile.y,
+              width: tile.width,
+              height: tile.height,
+              immediate:
+                prefersReducedMotion || ((key): boolean => key === "zIndex"),
+              // Allow the tile's position to settle before pushing its
+              // z-index back down
+              delay: (key): number => (key === "zIndex" ? 500 : 0),
+            }
+          : {
+              scale: 1.1,
+              zIndex: 2,
+              x: tileX,
+              y: tileY,
+              immediate:
+                prefersReducedMotion ||
+                ((key): boolean =>
+                  key === "zIndex" || key === "x" || key === "y"),
+            },
+      );
+
+    if (endOfGesture)
+      callback({
+        x: tileX,
+        y: tileY,
+        xRatio: tileX / (gridBounds.width - tile.width),
+        yRatio: tileY / (gridBounds.height - tile.height),
+      });
+  };
+
+  // Callback for useDrag. We could call useDrag here, but the default
+  // pattern of spreading {...bind()} across the children to bind the gesture
+  // ends up breaking memoization and ruining this component's performance.
+  // Instead, we pass this callback to each tile via a ref, to let them bind the
+  // gesture using the much more sensible ref-based method.
+  const onTileDrag = (
+    tileId: string,
+
+    {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      tap,
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      initial: [initialX, initialY],
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      delta: [dx, dy],
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      last,
+    }: Parameters<Handler<"drag", EventTypes["drag"]>>[0],
+  ): void => {
+    if (!tap) {
+      const tileController = springRef.current.find(
+        (c) => (c.item as Tile<TileModel>).id === tileId,
+      )!;
+      const callback = tiles.get(tileController.item.id)!.onDrag;
+
+      if (callback != null) {
+        if (dragState.current === null) {
+          const tileSpring = tileController.get();
+          dragState.current = {
+            tileId,
+            tileX: tileSpring.x,
+            tileY: tileSpring.y,
+            cursorX: initialX - gridBounds.x,
+            cursorY: initialY - gridBounds.y + scrollOffset.current,
+          };
+        }
+
+        dragState.current.tileX += dx;
+        dragState.current.tileY += dy;
+        dragState.current.cursorX += dx;
+        dragState.current.cursorY += dy;
+
+        animateDraggedTile(last, callback);
+
+        if (last) dragState.current = null;
+      }
+    }
+  };
+
+  const onTileDragRef = useRef(onTileDrag);
+  onTileDragRef.current = onTileDrag;
+
+  const scrollOffset = useRef(0);
+
+  useScroll(
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    ({ xy: [, y], delta: [, dy] }) => {
+      scrollOffset.current = y;
+
+      if (dragState.current !== null) {
+        dragState.current.tileY += dy;
+        dragState.current.cursorY += dy;
+        animateDraggedTile(false, tiles.get(dragState.current.tileId)!.onDrag!);
+      }
+    },
+    { target: gridRoot ?? undefined },
+  );
+
+  return (
+    <div
+      ref={gridRef}
+      className={classNames(className, styles.grid)}
+      style={style}
+    >
+      <LayoutContext.Provider value={context}>
+        <LayoutMemo
+          ref={setLayoutRoot}
+          Layout={Layout}
+          model={model}
+          Slot={Slot}
+        />
+      </LayoutContext.Provider>
+      {tileTransitions((spring, { id, model, onDrag, width, height }) => (
+        <TileWrapper
+          key={id}
+          id={id}
+          onDrag={onDrag ? onTileDragRef : null}
+          targetWidth={width}
+          targetHeight={height}
+          model={model}
+          Tile={Tile}
+          {...spring}
+        />
+      ))}
+    </div>
+  );
+}

src/grid/GridLayout.module.css

@@ -0,0 +1,61 @@
+/*
+Copyright 2024 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.
+*/
+
+.fixed,
+.scrolling {
+  block-size: 100%;
+}
+
+.scrolling {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: center;
+  gap: var(--gap);
+}
+
+.scrolling > .slot {
+  width: var(--width);
+  height: var(--height);
+}
+
+.fixed {
+  position: relative;
+}
+
+.fixed > .slot {
+  position: absolute;
+  inline-size: 404px;
+  block-size: 233px;
+  inset-block: 0;
+  inset-inline: var(--cpd-space-3x);
+}
+
+.fixed > .slot[data-block-alignment="start"] {
+  inset-block-end: unset;
+}
+
+.fixed > .slot[data-block-alignment="end"] {
+  inset-block-start: unset;
+}
+
+.fixed > .slot[data-inline-alignment="start"] {
+  inset-inline-end: unset;
+}
+
+.fixed > .slot[data-inline-alignment="end"] {
+  inset-inline-start: unset;
+}

src/grid/GridLayout.tsx

@@ -0,0 +1,129 @@
+/*
+Copyright 2024 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 { CSSProperties, forwardRef, useCallback, useMemo } from "react";
+import { distinctUntilChanged } from "rxjs";
+import { useObservableEagerState } from "observable-hooks";
+
+import { GridLayout as GridLayoutModel } from "../state/CallViewModel";
+import styles from "./GridLayout.module.css";
+import { useInitial } from "../useInitial";
+import {
+  CallLayout,
+  GridTileModel,
+  TileModel,
+  arrangeTiles,
+} from "./CallLayout";
+import { DragCallback, useUpdateLayout } from "./Grid";
+
+interface GridCSSProperties extends CSSProperties {
+  "--gap": string;
+  "--width": string;
+  "--height": string;
+}
+
+/**
+ * An implementation of the "grid" layout, in which all participants are shown
+ * together in a scrolling grid.
+ */
+export const makeGridLayout: CallLayout<GridLayoutModel> = ({
+  minBounds,
+  spotlightAlignment,
+}) => ({
+  scrollingOnTop: false,
+
+  // The "fixed" (non-scrolling) part of the layout is where the spotlight tile
+  // lives
+  fixed: forwardRef(function GridLayoutFixed({ model, Slot }, ref) {
+    useUpdateLayout();
+    const alignment = useObservableEagerState(
+      useInitial(() =>
+        spotlightAlignment.pipe(
+          distinctUntilChanged(
+            (a1, a2) => a1.block === a2.block && a1.inline === a2.inline,
+          ),
+        ),
+      ),
+    );
+    const tileModel: TileModel | undefined = useMemo(
+      () =>
+        model.spotlight && {
+          type: "spotlight",
+          vms: model.spotlight,
+          maximised: false,
+        },
+      [model.spotlight],
+    );
+
+    const onDragSpotlight: DragCallback = useCallback(
+      ({ xRatio, yRatio }) =>
+        spotlightAlignment.next({
+          block: yRatio < 0.5 ? "start" : "end",
+          inline: xRatio < 0.5 ? "start" : "end",
+        }),
+      [],
+    );
+
+    return (
+      <div ref={ref} className={styles.fixed}>
+        {tileModel && (
+          <Slot
+            className={styles.slot}
+            id="spotlight"
+            model={tileModel}
+            onDrag={onDragSpotlight}
+            data-block-alignment={alignment.block}
+            data-inline-alignment={alignment.inline}
+          />
+        )}
+      </div>
+    );
+  }),
+
+  // The scrolling part of the layout is where all the grid tiles live
+  scrolling: forwardRef(function GridLayout({ model, Slot }, ref) {
+    useUpdateLayout();
+    const { width, height: minHeight } = useObservableEagerState(minBounds);
+    const { gap, tileWidth, tileHeight } = useMemo(
+      () => arrangeTiles(width, minHeight, model.grid.length),
+      [width, minHeight, model.grid.length],
+    );
+
+    const tileModels: GridTileModel[] = useMemo(
+      () => model.grid.map((vm) => ({ type: "grid", vm })),
+      [model.grid],
+    );
+
+    return (
+      <div
+        ref={ref}
+        className={styles.scrolling}
+        style={
+          {
+            width,
+            "--gap": `${gap}px`,
+            "--width": `${Math.floor(tileWidth)}px`,
+            "--height": `${Math.floor(tileHeight)}px`,
+          } as GridCSSProperties
+        }
+      >
+        {tileModels.map((m) => (
+          <Slot key={m.vm.id} className={styles.slot} id={m.vm.id} model={m} />
+        ))}
+      </div>
+    );
+  }),
+});

src/grid/OneOnOneLayout.module.css

@@ -0,0 +1,54 @@
+/*
+Copyright 2024 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.
+*/
+
+.layer {
+  block-size: 100%;
+  display: grid;
+  place-items: center;
+}
+
+.container {
+  position: relative;
+}
+
+.local {
+  position: absolute;
+  inline-size: 180px;
+  block-size: 135px;
+  inset: var(--cpd-space-4x);
+}
+
+.spotlight {
+  position: absolute;
+  inline-size: 404px;
+  block-size: 233px;
+}
+
+.slot[data-block-alignment="start"] {
+  inset-block-end: unset;
+}
+
+.slot[data-block-alignment="end"] {
+  inset-block-start: unset;
+}
+
+.slot[data-inline-alignment="start"] {
+  inset-inline-end: unset;
+}
+
+.slot[data-inline-alignment="end"] {
+  inset-inline-start: unset;
+}

src/grid/OneOnOneLayout.tsx

@@ -0,0 +1,88 @@
+/*
+Copyright 2024 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 { forwardRef, useCallback, useMemo } from "react";
+import { useObservableEagerState } from "observable-hooks";
+import classNames from "classnames";
+
+import { OneOnOneLayout as OneOnOneLayoutModel } from "../state/CallViewModel";
+import { CallLayout, GridTileModel, arrangeTiles } from "./CallLayout";
+import styles from "./OneOnOneLayout.module.css";
+import { DragCallback, useUpdateLayout } from "./Grid";
+
+/**
+ * An implementation of the "one-on-one" layout, in which the remote participant
+ * is shown at maximum size, overlaid by a small view of the local participant.
+ */
+export const makeOneOnOneLayout: CallLayout<OneOnOneLayoutModel> = ({
+  minBounds,
+  pipAlignment,
+}) => ({
+  scrollingOnTop: false,
+
+  fixed: forwardRef(function OneOnOneLayoutFixed(_props, ref) {
+    useUpdateLayout();
+    return <div ref={ref} />;
+  }),
+
+  scrolling: forwardRef(function OneOnOneLayoutScrolling({ model, Slot }, ref) {
+    useUpdateLayout();
+    const { width, height } = useObservableEagerState(minBounds);
+    const pipAlignmentValue = useObservableEagerState(pipAlignment);
+    const { tileWidth, tileHeight } = useMemo(
+      () => arrangeTiles(width, height, 1),
+      [width, height],
+    );
+
+    const remoteTileModel: GridTileModel = useMemo(
+      () => ({ type: "grid", vm: model.remote }),
+      [model.remote],
+    );
+    const localTileModel: GridTileModel = useMemo(
+      () => ({ type: "grid", vm: model.local }),
+      [model.local],
+    );
+
+    const onDragLocalTile: DragCallback = useCallback(
+      ({ xRatio, yRatio }) =>
+        pipAlignment.next({
+          block: yRatio < 0.5 ? "start" : "end",
+          inline: xRatio < 0.5 ? "start" : "end",
+        }),
+      [],
+    );
+
+    return (
+      <div ref={ref} className={styles.layer}>
+        <Slot
+          id={remoteTileModel.vm.id}
+          model={remoteTileModel}
+          className={styles.container}
+          style={{ width: tileWidth, height: tileHeight }}
+        >
+          <Slot
+            className={classNames(styles.slot, styles.local)}
+            id={localTileModel.vm.id}
+            model={localTileModel}
+            onDrag={onDragLocalTile}
+            data-block-alignment={pipAlignmentValue.block}
+            data-inline-alignment={pipAlignmentValue.inline}
+          />
+        </Slot>
+      </div>
+    );
+  }),
+});

src/grid/SpotlightExpandedLayout.module.css

@@ -0,0 +1,54 @@
+/*
+Copyright 2024 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.
+*/
+
+.layer {
+  block-size: 100%;
+}
+
+.spotlight {
+  block-size: 100%;
+  inline-size: 100%;
+}
+
+.pip {
+  position: absolute;
+  inline-size: 135px;
+  block-size: 160px;
+  inset: var(--cpd-space-4x);
+}
+
+@media (min-width: 600px) {
+  .pip {
+    inline-size: 180px;
+    block-size: 135px;
+  }
+}
+
+.pip[data-block-alignment="start"] {
+  inset-block-end: unset;
+}
+
+.pip[data-block-alignment="end"] {
+  inset-block-start: unset;
+}
+
+.pip[data-inline-alignment="start"] {
+  inset-inline-end: unset;
+}
+
+.pip[data-inline-alignment="end"] {
+  inset-inline-start: unset;
+}

src/grid/SpotlightExpandedLayout.tsx

@@ -0,0 +1,91 @@
+/*
+Copyright 2024 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 { forwardRef, useCallback, useMemo } from "react";
+import { useObservableEagerState } from "observable-hooks";
+
+import { SpotlightExpandedLayout as SpotlightExpandedLayoutModel } from "../state/CallViewModel";
+import { CallLayout, GridTileModel, SpotlightTileModel } from "./CallLayout";
+import { DragCallback, useUpdateLayout } from "./Grid";
+import styles from "./SpotlightExpandedLayout.module.css";
+
+/**
+ * An implementation of the "expanded spotlight" layout, in which the spotlight
+ * tile stretches edge-to-edge and is overlaid by a picture-in-picture tile.
+ */
+export const makeSpotlightExpandedLayout: CallLayout<
+  SpotlightExpandedLayoutModel
+> = ({ pipAlignment }) => ({
+  scrollingOnTop: true,
+
+  fixed: forwardRef(function SpotlightExpandedLayoutFixed(
+    { model, Slot },
+    ref,
+  ) {
+    useUpdateLayout();
+    const spotlightTileModel: SpotlightTileModel = useMemo(
+      () => ({ type: "spotlight", vms: model.spotlight, maximised: true }),
+      [model.spotlight],
+    );
+
+    return (
+      <div ref={ref} className={styles.layer}>
+        <Slot
+          className={styles.spotlight}
+          id="spotlight"
+          model={spotlightTileModel}
+        />
+      </div>
+    );
+  }),
+
+  scrolling: forwardRef(function SpotlightExpandedLayoutScrolling(
+    { model, Slot },
+    ref,
+  ) {
+    useUpdateLayout();
+    const pipAlignmentValue = useObservableEagerState(pipAlignment);
+
+    const pipTileModel: GridTileModel | undefined = useMemo(
+      () => model.pip && { type: "grid", vm: model.pip },
+      [model.pip],
+    );
+
+    const onDragPip: DragCallback = useCallback(
+      ({ xRatio, yRatio }) =>
+        pipAlignment.next({
+          block: yRatio < 0.5 ? "start" : "end",
+          inline: xRatio < 0.5 ? "start" : "end",
+        }),
+      [],
+    );
+
+    return (
+      <div ref={ref} className={styles.layer}>
+        {pipTileModel && (
+          <Slot
+            className={styles.pip}
+            id="pip"
+            model={pipTileModel}
+            onDrag={onDragPip}
+            data-block-alignment={pipAlignmentValue.block}
+            data-inline-alignment={pipAlignmentValue.inline}
+          />
+        )}
+      </div>
+    );
+  }),
+});

src/grid/SpotlightLandscapeLayout.module.css

@@ -0,0 +1,54 @@
+/*
+Copyright 2024 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.
+*/
+
+.layer {
+  block-size: 100%;
+  display: grid;
+  --gap: 20px;
+  gap: var(--gap);
+  --grid-slot-width: 180px;
+  grid-template-columns: 1fr var(--grid-slot-width);
+  grid-template-rows: minmax(1fr, auto);
+  padding-inline: var(--gap);
+}
+
+.spotlight {
+  container: spotlight / size;
+  display: grid;
+  place-items: center;
+}
+
+/* CSS makes us put a condition here, even though all we want to do is
+unconditionally select the container so we can use cq units */
+@container spotlight (width > 0) {
+  .spotlight > .slot {
+    inline-size: min(100cqi, 100cqb * (17 / 9));
+    block-size: min(100cqb, 100cqi / (4 / 3));
+  }
+}
+
+.grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gap);
+  justify-content: center;
+  align-content: center;
+}
+
+.grid > .slot {
+  inline-size: 180px;
+  block-size: 135px;
+}

src/grid/SpotlightLandscapeLayout.tsx

@@ -0,0 +1,92 @@
+/*
+Copyright 2024 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 { forwardRef, useMemo } from "react";
+import { useObservableEagerState } from "observable-hooks";
+import classNames from "classnames";
+
+import { CallLayout, GridTileModel, TileModel } from "./CallLayout";
+import { SpotlightLandscapeLayout as SpotlightLandscapeLayoutModel } from "../state/CallViewModel";
+import styles from "./SpotlightLandscapeLayout.module.css";
+import { useUpdateLayout } from "./Grid";
+
+/**
+ * An implementation of the "spotlight landscape" layout, in which the spotlight
+ * tile takes up most of the space on the left, and the grid of participants is
+ * shown as a scrolling rail on the right.
+ */
+export const makeSpotlightLandscapeLayout: CallLayout<
+  SpotlightLandscapeLayoutModel
+> = ({ minBounds }) => ({
+  scrollingOnTop: false,
+
+  fixed: forwardRef(function SpotlightLandscapeLayoutFixed(
+    { model, Slot },
+    ref,
+  ) {
+    useUpdateLayout();
+    useObservableEagerState(minBounds);
+    const tileModel: TileModel = useMemo(
+      () => ({
+        type: "spotlight",
+        vms: model.spotlight,
+        maximised: false,
+      }),
+      [model.spotlight],
+    );
+
+    return (
+      <div ref={ref} className={styles.layer}>
+        <div className={styles.spotlight}>
+          <Slot className={styles.slot} id="spotlight" model={tileModel} />
+        </div>
+        <div className={styles.grid} />
+      </div>
+    );
+  }),
+
+  scrolling: forwardRef(function SpotlightLandscapeLayoutScrolling(
+    { model, Slot },
+    ref,
+  ) {
+    useUpdateLayout();
+    useObservableEagerState(minBounds);
+    const tileModels: GridTileModel[] = useMemo(
+      () => model.grid.map((vm) => ({ type: "grid", vm })),
+      [model.grid],
+    );
+
+    return (
+      <div ref={ref} className={styles.layer}>
+        <div
+          className={classNames(styles.spotlight, {
+            [styles.withIndicators]: model.spotlight.length > 1,
+          })}
+        />
+        <div className={styles.grid}>
+          {tileModels.map((m) => (
+            <Slot
+              key={m.vm.id}
+              className={styles.slot}
+              id={m.vm.id}
+              model={m}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }),
+});

src/grid/SpotlightPortraitLayout.module.css

@@ -0,0 +1,56 @@
+/*
+Copyright 2024 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.
+*/
+
+.layer {
+  block-size: 100%;
+  display: grid;
+  --gap: 20px;
+  gap: var(--gap);
+  margin-inline: 0;
+  display: block;
+}
+
+.spotlight {
+  container: spotlight / size;
+  display: grid;
+  place-items: center;
+  inline-size: 100%;
+  aspect-ratio: 16 / 9;
+  margin-block-end: var(--cpd-space-4x);
+}
+
+.spotlight.withIndicators {
+  margin-block-end: calc(2 * var(--cpd-space-4x) + 2px);
+}
+
+.spotlight > .slot {
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--grid-gap);
+  justify-content: center;
+  align-content: start;
+  padding-inline: var(--grid-gap);
+}
+
+.grid > .slot {
+  inline-size: var(--grid-tile-width);
+  block-size: var(--grid-tile-height);
+}

src/grid/SpotlightPortraitLayout.tsx

@@ -0,0 +1,118 @@
+/*
+Copyright 2024 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 { CSSProperties, forwardRef, useMemo } from "react";
+import { useObservableEagerState } from "observable-hooks";
+import classNames from "classnames";
+
+import {
+  CallLayout,
+  GridTileModel,
+  TileModel,
+  arrangeTiles,
+} from "./CallLayout";
+import { SpotlightPortraitLayout as SpotlightPortraitLayoutModel } from "../state/CallViewModel";
+import styles from "./SpotlightPortraitLayout.module.css";
+import { useUpdateLayout } from "./Grid";
+
+interface GridCSSProperties extends CSSProperties {
+  "--grid-gap": string;
+  "--grid-tile-width": string;
+  "--grid-tile-height": string;
+}
+
+/**
+ * An implementation of the "spotlight portrait" layout, in which the spotlight
+ * tile is shown across the top of the screen, and the grid of participants
+ * scrolls behind it.
+ */
+export const makeSpotlightPortraitLayout: CallLayout<
+  SpotlightPortraitLayoutModel
+> = ({ minBounds }) => ({
+  scrollingOnTop: false,
+
+  fixed: forwardRef(function SpotlightPortraitLayoutFixed(
+    { model, Slot },
+    ref,
+  ) {
+    useUpdateLayout();
+    const tileModel: TileModel = useMemo(
+      () => ({
+        type: "spotlight",
+        vms: model.spotlight,
+        maximised: true,
+      }),
+      [model.spotlight],
+    );
+
+    return (
+      <div ref={ref} className={styles.layer}>
+        <div className={styles.spotlight}>
+          <Slot className={styles.slot} id="spotlight" model={tileModel} />
+        </div>
+      </div>
+    );
+  }),
+
+  scrolling: forwardRef(function SpotlightPortraitLayoutScrolling(
+    { model, Slot },
+    ref,
+  ) {
+    useUpdateLayout();
+    const { width } = useObservableEagerState(minBounds);
+    const { gap, tileWidth, tileHeight } = arrangeTiles(
+      width,
+      // TODO: We pretend that the minimum height is the width, because the
+      // actual minimum height is difficult to calculate
+      width,
+      model.grid.length,
+    );
+    const tileModels: GridTileModel[] = useMemo(
+      () => model.grid.map((vm) => ({ type: "grid", vm })),
+      [model.grid],
+    );
+
+    return (
+      <div
+        ref={ref}
+        className={styles.layer}
+        style={
+          {
+            "--grid-gap": `${gap}px`,
+            "--grid-tile-width": `${Math.floor(tileWidth)}px`,
+            "--grid-tile-height": `${Math.floor(tileHeight)}px`,
+          } as GridCSSProperties
+        }
+      >
+        <div
+          className={classNames(styles.spotlight, {
+            [styles.withIndicators]: model.spotlight.length > 1,
+          })}
+        />
+        <div className={styles.grid}>
+          {tileModels.map((m) => (
+            <Slot
+              key={m.vm.id}
+              className={styles.slot}
+              id={m.vm.id}
+              model={m}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }),
+});

src/grid/TileWrapper.module.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2023 New Vector Ltd
+Copyright 2024 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,15 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.bigGrid {
-  display: grid;
-  grid-auto-rows: 130px;
-  gap: var(--cpd-space-2x);
+.tile.draggable {
+  cursor: grab;
 }
 
-@media (min-width: 800px) {
-  .bigGrid {
-    grid-auto-rows: 135px;
-    gap: var(--cpd-space-5x);
-  }
+.tile.draggable:active {
+  cursor: grabbing;
 }

src/grid/TileWrapper.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2023 New Vector Ltd
+Copyright 2023-2024 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,83 +14,76 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { memo, ReactNode, RefObject, useRef } from "react";
+import { ComponentType, memo, RefObject, useRef } from "react";
 import { EventTypes, Handler, useDrag } from "@use-gesture/react";
-import { SpringValue, to } from "@react-spring/web";
+import { SpringValue } from "@react-spring/web";
+import classNames from "classnames";
 
-import { ChildrenProperties } from "./VideoGrid";
+import { TileProps } from "./Grid";
+import styles from "./TileWrapper.module.css";
 
-interface Props<T> {
+interface Props<M, R extends HTMLElement> {
   id: string;
-  onDragRef: RefObject<
+  onDrag: RefObject<
     (
       tileId: string,
       state: Parameters<Handler<"drag", EventTypes["drag"]>>[0],
     ) => void
-  >;
+  > | null;
   targetWidth: number;
   targetHeight: number;
-  data: T;
+  model: M;
+  Tile: ComponentType<TileProps<M, R>>;
   opacity: SpringValue<number>;
   scale: SpringValue<number>;
-  shadow: SpringValue<number>;
-  shadowSpread: SpringValue<number>;
   zIndex: SpringValue<number>;
   x: SpringValue<number>;
   y: SpringValue<number>;
   width: SpringValue<number>;
   height: SpringValue<number>;
-  children: (props: ChildrenProperties<T>) => ReactNode;
 }
 
 const TileWrapper_ = memo(
-  <T,>({
+  <M, R extends HTMLElement>({
     id,
-    onDragRef,
+    onDrag,
     targetWidth,
     targetHeight,
-    data,
+    model,
+    Tile,
     opacity,
     scale,
-    shadow,
-    shadowSpread,
     zIndex,
     x,
     y,
     width,
     height,
-    children,
-  }: Props<T>) => {
-    const ref = useRef<HTMLElement | null>(null);
+  }: Props<M, R>) => {
+    const ref = useRef<R | null>(null);
 
-    useDrag((state) => onDragRef?.current!(id, state), {
+    useDrag((state) => onDrag?.current!(id, state), {
       target: ref,
       filterTaps: true,
       preventScroll: true,
     });
 
     return (
-      <>
-        {children({
-          ref,
-          style: {
-            opacity,
-            scale,
-            zIndex,
-            x,
-            y,
-            width,
-            height,
-            boxShadow: to(
-              [shadow, shadowSpread],
-              (s, ss) => `rgba(0, 0, 0, 0.5) 0px ${s}px ${2 * s}px ${ss}px`,
-            ),
-          },
-          targetWidth,
-          targetHeight,
-          data,
-        })}
-      </>
+      <Tile
+        ref={ref}
+        className={classNames(styles.tile, { [styles.draggable]: onDrag })}
+        style={{
+          opacity,
+          scale,
+          zIndex,
+          x,
+          y,
+          width,
+          height,
+        }}
+        targetWidth={targetWidth}
+        targetHeight={targetHeight}
+        model={model}
+      />
     );
   },
 );
@@ -104,4 +97,6 @@ TileWrapper_.displayName = "TileWrapper";
 // We pretend this component is a simple function rather than a
 // NamedExoticComponent, because that's the only way we can fit in a type
 // parameter
-export const TileWrapper = TileWrapper_ as <T>(props: Props<T>) => JSX.Element;
+export const TileWrapper = TileWrapper_ as <M, R extends HTMLElement>(
+  props: Props<M, R>,
+) => JSX.Element;

src/home/CallList.tsx

@@ -26,7 +26,7 @@ import styles from "./CallList.module.css";
 import { getAbsoluteRoomUrl, getRelativeRoomUrl } from "../matrix-utils";
 import { Body } from "../typography/Typography";
 import { GroupCallRoom } from "./useGroupCallRooms";
-import { useRoomSharedKey } from "../e2ee/sharedKeyManagement";
+import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
 
 interface CallListProps {
   rooms: GroupCallRoom[];
@@ -66,16 +66,11 @@ interface CallTileProps {
 }
 
 const CallTile: FC<CallTileProps> = ({ name, avatarUrl, room }) => {
-  const roomSharedKey = useRoomSharedKey(room.roomId);
-
+  const roomEncryptionSystem = useRoomEncryptionSystem(room.roomId);
   return (
     <div className={styles.callTile}>
       <Link
-        to={getRelativeRoomUrl(
-          room.roomId,
-          room.name,
-          roomSharedKey ?? undefined,
-        )}
+        to={getRelativeRoomUrl(room.roomId, roomEncryptionSystem, room.name)}
         className={styles.callTileLink}
       >
         <Avatar id={room.roomId} name={name} size={Size.LG} src={avatarUrl} />
@@ -89,11 +84,8 @@ const CallTile: FC<CallTileProps> = ({ name, avatarUrl, room }) => {
       <CopyButton
         className={styles.copyButton}
         variant="icon"
-        value={getAbsoluteRoomUrl(
-          room.roomId,
-          room.name,
-          roomSharedKey ?? undefined,
-        )}
+        // Todo add the viaServers to the created link
+        value={getAbsoluteRoomUrl(room.roomId, roomEncryptionSystem, room.name)}
       />
     </div>
   );

src/home/RegisteredView.tsx

@@ -38,9 +38,12 @@ import { UserMenuContainer } from "../UserMenuContainer";
 import { JoinExistingCallModal } from "./JoinExistingCallModal";
 import { Caption } from "../typography/Typography";
 import { Form } from "../form/Form";
-import { useOptInAnalytics } from "../settings/useSetting";
 import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
 import { E2eeType } from "../e2ee/e2eeType";
+import {
+  useSetting,
+  optInAnalytics as optInAnalyticsSetting,
+} from "../settings/settings";
 
 interface Props {
   client: MatrixClient;
@@ -49,7 +52,7 @@ interface Props {
 export const RegisteredView: FC<Props> = ({ client }) => {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error>();
-  const [optInAnalytics] = useOptInAnalytics();
+  const [optInAnalytics] = useSetting(optInAnalyticsSetting);
   const history = useHistory();
   const { t } = useTranslation();
   const [joinExistingCallModalOpen, setJoinExistingCallModalOpen] =
@@ -78,12 +81,14 @@ export const RegisteredView: FC<Props> = ({ client }) => {
           roomName,
           E2eeType.SHARED_KEY,
         );
+        if (!createRoomResult.password)
+          throw new Error("Failed to create room with shared secret");
 
         history.push(
           getRelativeRoomUrl(
             createRoomResult.roomId,
+            { kind: E2eeType.SHARED_KEY, secret: createRoomResult.password },
             roomName,
-            createRoomResult.password,
           ),
         );
       }

src/home/UnauthenticatedView.tsx

@@ -41,15 +41,18 @@ 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 { Config } from "../config/Config";
 import { E2eeType } from "../e2ee/e2eeType";
+import {
+  useSetting,
+  optInAnalytics as optInAnalyticsSetting,
+} from "../settings/settings";
 
 export const UnauthenticatedView: FC = () => {
   const { setClient } = useClient();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error>();
-  const [optInAnalytics] = useOptInAnalytics();
+  const [optInAnalytics] = useSetting(optInAnalyticsSetting);
   const { recaptchaKey, register } = useInteractiveRegistration();
   const { execute, reset, recaptchaId } = useRecaptcha(recaptchaKey);
 
@@ -116,13 +119,15 @@ export const UnauthenticatedView: FC = () => {
         if (!setClient) {
           throw new Error("setClient is undefined");
         }
+        if (!createRoomResult.password)
+          throw new Error("Failed to create room with shared secret");
 
         setClient({ client, session });
         history.push(
           getRelativeRoomUrl(
             createRoomResult.roomId,
+            { kind: E2eeType.SHARED_KEY, secret: createRoomResult.password },
             roomName,
-            createRoomResult.password,
           ),
         );
       }

src/home/useGroupCallRooms.ts

@@ -15,20 +15,22 @@ limitations under the License.
 */
 
 import { MatrixClient } from "matrix-js-sdk/src/client";
-import { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
-import { Room } from "matrix-js-sdk/src/models/room";
+import { Room, RoomEvent } from "matrix-js-sdk/src/models/room";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
-import { GroupCallEventHandlerEvent } from "matrix-js-sdk/src/webrtc/groupCallEventHandler";
 import { useState, useEffect } from "react";
+import { EventTimeline, EventType, JoinRule } from "matrix-js-sdk";
+import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+import { MatrixRTCSessionManagerEvents } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSessionManager";
+import { KnownMembership } from "matrix-js-sdk/src/types";
 
-import { getKeyForRoom, isRoomE2EE } from "../e2ee/sharedKeyManagement";
+import { getKeyForRoom } from "../e2ee/sharedKeyManagement";
 
 export interface GroupCallRoom {
   roomAlias?: string;
   roomName: string;
   avatarUrl: string;
   room: Room;
-  groupCall: GroupCall;
+  session: MatrixRTCSession;
   participants: RoomMember[];
 }
 const tsCache: { [index: string]: number } = {};
@@ -46,7 +48,7 @@ function getLastTs(client: MatrixClient, r: Room): number {
 
   const myUserId = client.getUserId()!;
 
-  if (r.getMyMembership() !== "join") {
+  if (r.getMyMembership() !== KnownMembership.Join) {
     const membershipEvent = r.currentState.getStateEvents(
       "m.room.member",
       myUserId,
@@ -80,38 +82,77 @@ function sortRooms(client: MatrixClient, rooms: Room[]): Room[] {
   });
 }
 
-function roomIsJoinable(room: Room): boolean {
-  if (isRoomE2EE(room)) {
-    return Boolean(getKeyForRoom(room.roomId));
-  } else {
-    return true;
+const roomIsJoinable = (room: Room): boolean => {
+  if (!room.hasEncryptionStateEvent() && !getKeyForRoom(room.roomId)) {
+    // if we have an non encrypted room (no encryption state event) we need a locally stored shared key.
+    // in case this key also does not exists we cannot join the room.
+    return false;
   }
-}
+  // otherwise we can always join rooms because we will automatically decide if we want to use perParticipant or password
+  switch (room.getJoinRule()) {
+    case JoinRule.Public:
+      return true;
+    case JoinRule.Knock:
+      switch (room.getMyMembership()) {
+        case KnownMembership.Join:
+        case KnownMembership.Knock:
+          return true;
+        case KnownMembership.Invite:
+          return (
+            room
+              .getLiveTimeline()
+              .getState(EventTimeline.FORWARDS)
+              ?.getStateEvents(EventType.RoomMember, room.myUserId)
+              ?.getPrevContent().membership === JoinRule.Knock
+          );
+        default:
+          return false;
+      }
+    // TODO: check JoinRule.Restricted and return true if join condition is satisfied
+    default:
+      return room.getMyMembership() === KnownMembership.Join;
+  }
+};
+
+const roomHasCallMembershipEvents = (room: Room): boolean => {
+  switch (room.getMyMembership()) {
+    case KnownMembership.Join:
+      return !!room
+        .getLiveTimeline()
+        .getState(EventTimeline.FORWARDS)
+        ?.events?.get(EventType.GroupCallMemberPrefix);
+    case KnownMembership.Knock:
+      // Assume that a room you've knocked on is able to hold calls
+      return true;
+    default:
+      return false;
+  }
+};
 
 export function useGroupCallRooms(client: MatrixClient): GroupCallRoom[] {
   const [rooms, setRooms] = useState<GroupCallRoom[]>([]);
 
   useEffect(() => {
     function updateRooms(): void {
-      if (!client.groupCallEventHandler) {
-        return;
-      }
-
-      const groupCalls = client.groupCallEventHandler.groupCalls.values();
-      const rooms = Array.from(groupCalls)
-        .map((groupCall) => groupCall.room)
+      // We want to show all rooms that historically had a call and which we are (can become) part of.
+      const rooms = client
+        .getRooms()
+        .filter(roomHasCallMembershipEvents)
         .filter(roomIsJoinable);
       const sortedRooms = sortRooms(client, rooms);
       const items = sortedRooms.map((room) => {
-        const groupCall = client.getGroupCallForRoom(room.roomId)!;
-
+        const session = client.matrixRTC.getRoomSession(room);
+        session.memberships;
         return {
           roomAlias: room.getCanonicalAlias() ?? undefined,
           roomName: room.name,
           avatarUrl: room.getMxcAvatarUrl()!,
           room,
-          groupCall,
-          participants: [...groupCall!.participants.keys()],
+          session,
+          participants: session.memberships
+            .filter((m) => m.sender)
+            .map((m) => room.getMember(m.sender!))
+            .filter((m) => m) as RoomMember[],
         };
       });
 
@@ -120,15 +161,17 @@ export function useGroupCallRooms(client: MatrixClient): GroupCallRoom[] {
 
     updateRooms();
 
-    client.on(GroupCallEventHandlerEvent.Incoming, updateRooms);
-    client.on(GroupCallEventHandlerEvent.Participants, updateRooms);
-
-    return () => {
-      client.removeListener(GroupCallEventHandlerEvent.Incoming, updateRooms);
-      client.removeListener(
-        GroupCallEventHandlerEvent.Participants,
+    client.matrixRTC.on(
+      MatrixRTCSessionManagerEvents.SessionStarted,
+      updateRooms,
+    );
+    client.on(RoomEvent.MyMembership, updateRooms);
+    return (): void => {
+      client.matrixRTC.off(
+        MatrixRTCSessionManagerEvents.SessionStarted,
         updateRooms,
       );
+      client.off(RoomEvent.MyMembership, updateRooms);
     };
   }, [client]);
 

src/initializer.tsx

@@ -14,7 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { BrowserTracing } from "@sentry/browser";
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
@@ -33,8 +32,6 @@ enum LoadState {
 }
 
 class DependencyLoadStates {
-  // TODO: decide where olm should be initialized (see TODO comment below)
-  // olm: LoadState = LoadState.None;
   public config: LoadState = LoadState.None;
   public sentry: LoadState = LoadState.None;
   public openTelemetry: LoadState = LoadState.None;
@@ -55,7 +52,7 @@ export class Initializer {
   public static initBeforeReact(): void {
     // this maybe also needs to return a promise in the future,
     // if we have to do async inits before showing the loading screen
-    // but this should be avioded if possible
+    // but this should be avoided if possible
 
     //i18n
     const languageDetector = new LanguageDetector();
@@ -119,7 +116,7 @@ export class Initializer {
     }
     Initializer.internalInstance = new Initializer();
     Initializer.internalInstance.initPromise = new Promise<void>((resolve) => {
-      // initStep calls itself recursivly until everything is initialized in the correct order.
+      // initStep calls itself recursively until everything is initialized in the correct order.
       // Then the promise gets resolved.
       Initializer.internalInstance.initStep(resolve);
     });
@@ -129,18 +126,6 @@ export class Initializer {
   private loadStates = new DependencyLoadStates();
 
   private initStep(resolve: (value: void | PromiseLike<void>) => void): void {
-    // TODO: Olm is initialized with the client currently (see `initClient()` and `olm.ts`)
-    // we need to decide if we want to init it here or keep it in initClient
-    // if (this.loadStates.olm === LoadState.None) {
-    //   this.loadStates.olm = LoadState.Loading;
-    //   // TODO: https://gitlab.matrix.org/matrix-org/olm/-/issues/10
-    //   window.OLM_OPTIONS = {};
-    //   Olm.init({ locateFile: () => olmWasmPath }).then(() => {
-    //     this.loadStates.olm = LoadState.Loaded;
-    //     this.initStep(resolve);
-    //   });
-    // }
-
     // config
     if (this.loadStates.config === LoadState.None) {
       this.loadStates.config = LoadState.Loading;
@@ -160,10 +145,7 @@ export class Initializer {
           dsn: Config.get().sentry?.DSN,
           environment: Config.get().sentry?.environment,
           integrations: [
-            new BrowserTracing({
-              routingInstrumentation:
-                Sentry.reactRouterV5Instrumentation(history),
-            }),
+            Sentry.reactRouterV5BrowserTracingIntegration({ history }),
           ],
           tracesSampleRate: 1.0,
         });

src/livekit/LivekitFocus.ts

@@ -1,23 +0,0 @@
-/*
-Copyright 2023 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { Focus } from "matrix-js-sdk/src/matrixrtc/focus";
-
-export interface LivekitFocus extends Focus {
-  type: "livekit";
-  livekit_service_url: string;
-  livekit_alias: string;
-}

src/livekit/MediaDevicesContext.tsx

@@ -29,11 +29,12 @@ import { Observable } from "rxjs";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import {
-  isFirefox,
-  useAudioInput,
-  useAudioOutput,
-  useVideoInput,
-} from "../settings/useSetting";
+  useSetting,
+  audioInput as audioInputSetting,
+  audioOutput as audioOutputSetting,
+  videoInput as videoInputSetting,
+} from "../settings/settings";
+import { isFirefox } from "../Platform";
 
 export interface MediaDevice {
   available: MediaDeviceInfo[];
@@ -59,7 +60,7 @@ function useObservableState<T>(
     // observable state doesn't run in SSR
     if (typeof window === "undefined" || !observable) return;
     const subscription = observable.subscribe(setState);
-    return () => subscription.unsubscribe();
+    return (): void => subscription.unsubscribe();
   }, [observable]);
   return state;
 }
@@ -145,43 +146,36 @@ export const MediaDevicesProvider: FC<Props> = ({ children }) => {
   // for ouput devices because the selector wont be shown on FF.
   const useOutputNames = usingNames && !isFirefox();
 
-  const [audioInputSetting, setAudioInputSetting] = useAudioInput();
-  const [audioOutputSetting, setAudioOutputSetting] = useAudioOutput();
-  const [videoInputSetting, setVideoInputSetting] = useVideoInput();
+  const [storedAudioInput, setStoredAudioInput] = useSetting(audioInputSetting);
+  const [storedAudioOutput, setStoredAudioOutput] =
+    useSetting(audioOutputSetting);
+  const [storedVideoInput, setStoredVideoInput] = useSetting(videoInputSetting);
 
-  const audioInput = useMediaDevice(
-    "audioinput",
-    audioInputSetting,
-    usingNames,
-  );
+  const audioInput = useMediaDevice("audioinput", storedAudioInput, usingNames);
   const audioOutput = useMediaDevice(
     "audiooutput",
-    audioOutputSetting,
+    storedAudioOutput,
     useOutputNames,
     alwaysUseDefaultAudio,
   );
-  const videoInput = useMediaDevice(
-    "videoinput",
-    videoInputSetting,
-    usingNames,
-  );
+  const videoInput = useMediaDevice("videoinput", storedVideoInput, usingNames);
 
   useEffect(() => {
     if (audioInput.selectedId !== undefined)
-      setAudioInputSetting(audioInput.selectedId);
-  }, [setAudioInputSetting, audioInput.selectedId]);
+      setStoredAudioInput(audioInput.selectedId);
+  }, [setStoredAudioInput, audioInput.selectedId]);
 
   useEffect(() => {
     // Skip setting state for ff output. Redundent since it is set to always return 'undefined'
     // but makes it clear while debugging that this is not happening on FF. + perf ;)
     if (audioOutput.selectedId !== undefined && !isFirefox())
-      setAudioOutputSetting(audioOutput.selectedId);
-  }, [setAudioOutputSetting, audioOutput.selectedId]);
+      setStoredAudioOutput(audioOutput.selectedId);
+  }, [setStoredAudioOutput, audioOutput.selectedId]);
 
   useEffect(() => {
     if (videoInput.selectedId !== undefined)
-      setVideoInputSetting(videoInput.selectedId);
-  }, [setVideoInputSetting, videoInput.selectedId]);
+      setStoredVideoInput(videoInput.selectedId);
+  }, [setStoredVideoInput, videoInput.selectedId]);
 
   const startUsingDeviceNames = useCallback(
     () => setNumCallersUsingNames((n) => n + 1),

src/livekit/openIDSFU.ts

@@ -18,9 +18,9 @@ import { IOpenIDToken, MatrixClient } from "matrix-js-sdk";
 import { logger } from "matrix-js-sdk/src/logger";
 import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 import { useEffect, useState } from "react";
+import { LivekitFocus } from "matrix-js-sdk/src/matrixrtc/LivekitFocus";
 
-import { LivekitFocus } from "./LivekitFocus";
-import { useActiveFocus } from "../room/useActiveFocus";
+import { useActiveLivekitFocus } from "../room/useActiveFocus";
 
 export interface SFUConfig {
   url: string;
@@ -46,7 +46,7 @@ export function useOpenIDSFU(
 ): SFUConfig | undefined {
   const [sfuConfig, setSFUConfig] = useState<SFUConfig | undefined>(undefined);
 
-  const activeFocus = useActiveFocus(rtcSession);
+  const activeFocus = useActiveLivekitFocus(rtcSession);
 
   useEffect(() => {
     (async (): Promise<void> => {

src/livekit/useECConnectionState.ts

@@ -192,7 +192,7 @@ export function useECConnectionState(
       livekitRoom.on(RoomEvent.ConnectionStateChanged, onConnStateChanged);
     }
 
-    return () => {
+    return (): void => {
       if (oldRoom)
         oldRoom.off(RoomEvent.ConnectionStateChanged, onConnStateChanged);
     };

src/livekit/useLiveKit.ts

@@ -41,11 +41,7 @@ import {
 } from "./useECConnectionState";
 import { MatrixKeyProvider } from "../e2ee/matrixKeyProvider";
 import { E2eeType } from "../e2ee/e2eeType";
-
-export type E2EEConfig = {
-  mode: E2eeType;
-  sharedKey?: string;
-};
+import { EncryptionSystem } from "../e2ee/sharedKeyManagement";
 
 interface UseLivekitResult {
   livekitRoom?: Room;
@@ -56,41 +52,35 @@ export function useLiveKit(
   rtcSession: MatrixRTCSession,
   muteStates: MuteStates,
   sfuConfig: SFUConfig | undefined,
-  e2eeConfig: E2EEConfig,
+  e2eeSystem: EncryptionSystem,
 ): UseLivekitResult {
   const e2eeOptions = useMemo((): E2EEOptions | undefined => {
-    if (e2eeConfig.mode === E2eeType.NONE) return undefined;
+    if (e2eeSystem.kind === E2eeType.NONE) return undefined;
 
-    if (e2eeConfig.mode === E2eeType.PER_PARTICIPANT) {
+    if (e2eeSystem.kind === E2eeType.PER_PARTICIPANT) {
       return {
         keyProvider: new MatrixKeyProvider(),
         worker: new E2EEWorker(),
       };
-    } else if (
-      e2eeConfig.mode === E2eeType.SHARED_KEY &&
-      e2eeConfig.sharedKey
-    ) {
+    } else if (e2eeSystem.kind === E2eeType.SHARED_KEY && e2eeSystem.secret) {
       return {
         keyProvider: new ExternalE2EEKeyProvider(),
         worker: new E2EEWorker(),
       };
     }
-  }, [e2eeConfig]);
+  }, [e2eeSystem]);
 
   useEffect(() => {
-    if (e2eeConfig.mode === E2eeType.NONE || !e2eeOptions) return;
+    if (e2eeSystem.kind === E2eeType.NONE || !e2eeOptions) return;
 
-    if (e2eeConfig.mode === E2eeType.PER_PARTICIPANT) {
+    if (e2eeSystem.kind === E2eeType.PER_PARTICIPANT) {
       (e2eeOptions.keyProvider as MatrixKeyProvider).setRTCSession(rtcSession);
-    } else if (
-      e2eeConfig.mode === E2eeType.SHARED_KEY &&
-      e2eeConfig.sharedKey
-    ) {
+    } else if (e2eeSystem.kind === E2eeType.SHARED_KEY && e2eeSystem.secret) {
       (e2eeOptions.keyProvider as ExternalE2EEKeyProvider).setKey(
-        e2eeConfig.sharedKey,
+        e2eeSystem.secret,
       );
     }
-  }, [e2eeOptions, e2eeConfig, rtcSession]);
+  }, [e2eeOptions, e2eeSystem, rtcSession]);
 
   const initialMuteStates = useRef<MuteStates>(muteStates);
   const devices = useMediaDevices();
@@ -131,9 +121,9 @@ export function useLiveKit(
   // useEffect() with an argument that references itself, if E2EE is enabled
   const room = useMemo(() => {
     const r = new Room(roomOptions);
-    r.setE2EEEnabled(e2eeConfig.mode !== E2eeType.NONE);
+    r.setE2EEEnabled(e2eeSystem.kind !== E2eeType.NONE);
     return r;
-  }, [roomOptions, e2eeConfig]);
+  }, [roomOptions, e2eeSystem]);
 
   const connectionState = useECConnectionState(
     {

src/matrix-utils.ts

@@ -19,25 +19,24 @@ import { MemoryStore } from "matrix-js-sdk/src/store/memory";
 import { IndexedDBCryptoStore } from "matrix-js-sdk/src/crypto/store/indexeddb-crypto-store";
 import { LocalStorageCryptoStore } from "matrix-js-sdk/src/crypto/store/localStorage-crypto-store";
 import { MemoryCryptoStore } from "matrix-js-sdk/src/crypto/store/memory-crypto-store";
-import { createClient, ICreateClientOpts } from "matrix-js-sdk/src/matrix";
+import {
+  createClient,
+  ICreateClientOpts,
+  Preset,
+  Visibility,
+} from "matrix-js-sdk/src/matrix";
 import { ClientEvent } from "matrix-js-sdk/src/client";
-import { Visibility, Preset } from "matrix-js-sdk/src/@types/partials";
 import { ISyncStateData, SyncState } from "matrix-js-sdk/src/sync";
 import { logger } from "matrix-js-sdk/src/logger";
-import {
-  GroupCallIntent,
-  GroupCallType,
-} from "matrix-js-sdk/src/webrtc/groupCall";
 import { secureRandomBase64Url } from "matrix-js-sdk/src/randomstring";
 
 import type { MatrixClient } from "matrix-js-sdk/src/client";
 import type { Room } from "matrix-js-sdk/src/models/room";
 import IndexedDBWorker from "./IndexedDBWorker?worker";
-import { getUrlParams, PASSWORD_STRING } from "./UrlParams";
-import { loadOlm } from "./olm";
+import { generateUrlSearchParams, getUrlParams } from "./UrlParams";
 import { Config } from "./config/Config";
 import { E2eeType } from "./e2ee/e2eeType";
-import { saveKeyForRoom } from "./e2ee/sharedKeyManagement";
+import { EncryptionSystem, saveKeyForRoom } from "./e2ee/sharedKeyManagement";
 
 export const fallbackICEServerAllowed =
   import.meta.env.VITE_FALLBACK_STUN_ALLOWED === "true";
@@ -55,7 +54,13 @@ const SYNC_STORE_NAME = "element-call-sync";
 // (It's a good opportunity to make the database names consistent.)
 const CRYPTO_STORE_NAME = "element-call-crypto";
 
-function waitForSync(client: MatrixClient): Promise<void> {
+async function waitForSync(client: MatrixClient): Promise<void> {
+  // If there is a saved sync, the client will fire an additional sync event
+  // for restoring it before it runs the first network sync.
+  // However, the sync we want to wait for is the network sync,
+  // as the saved sync may be missing some state.
+  // Thus, don't resolve on the first sync when we know it's for the saved sync.
+  let waitForSavedSync = !!(await client.store.getSavedSyncToken());
   return new Promise<void>((resolve, reject) => {
     const onSync = (
       state: SyncState,
@@ -63,8 +68,12 @@ function waitForSync(client: MatrixClient): Promise<void> {
       data?: ISyncStateData,
     ): void => {
       if (state === "PREPARED") {
-        client.removeListener(ClientEvent.Sync, onSync);
-        resolve();
+        if (waitForSavedSync) {
+          waitForSavedSync = false;
+        } else {
+          client.removeListener(ClientEvent.Sync, onSync);
+          resolve();
+        }
       } else if (state === "ERROR") {
         client.removeListener(ClientEvent.Sync, onSync);
         reject(data?.error);
@@ -87,8 +96,6 @@ export async function initClient(
   clientOptions: ICreateClientOpts,
   restore: boolean,
 ): Promise<MatrixClient> {
-  await loadOlm();
-
   let indexedDB: IDBFactory | undefined;
   try {
     indexedDB = window.indexedDB;
@@ -188,10 +195,16 @@ export async function initClient(
     await client.store.startup();
   }
 
-  await client.initCrypto();
+  await client.initRustCrypto();
   client.setGlobalErrorOnUnknownDevices(false);
-  await client.startClient();
-  await waitForSync(client);
+  // Once startClient is called, syncs are run asynchronously.
+  // Also, sync completion is communicated only via events.
+  // So, apply the event listener *before* starting the client.
+  // Otherwise, a sync may complete before the listener gets applied,
+  // and we will miss it.
+  const syncPromise = waitForSync(client);
+  await client.startClient({ clientWellKnownPollPeriod: 60 * 10 });
+  await syncPromise;
 
   return client;
 }
@@ -338,16 +351,6 @@ export async function createRoom(
 
   const result = await createPromise;
 
-  logger.log(`Creating group call in ${result.room_id}`);
-
-  await client.createGroupCall(
-    result.room_id,
-    GroupCallType.Video,
-    false,
-    GroupCallIntent.Room,
-    true,
-  );
-
   let password;
   if (e2ee == E2eeType.SHARED_KEY) {
     password = secureRandomBase64Url(16);
@@ -365,39 +368,35 @@ export async function createRoom(
  * Returns an absolute URL to that will load Element Call with the given room
  * @param roomId ID of the room
  * @param roomName Name of the room
- * @param password e2e key for the room
+ * @param encryptionSystem what encryption (or EncryptionSystem.Unencrypted) the room uses
  */
 export function getAbsoluteRoomUrl(
   roomId: string,
+  encryptionSystem: EncryptionSystem,
   roomName?: string,
-  password?: string,
+  viaServers?: string[],
 ): string {
   return `${window.location.protocol}//${
     window.location.host
-  }${getRelativeRoomUrl(roomId, roomName, password)}`;
+  }${getRelativeRoomUrl(roomId, encryptionSystem, roomName, viaServers)}`;
 }
 
 /**
  * Returns a relative URL to that will load Element Call with the given room
  * @param roomId ID of the room
  * @param roomName Name of the room
- * @param password e2e key for the room
+ * @param encryptionSystem what encryption (or EncryptionSystem.Unencrypted) the room uses
  */
 export function getRelativeRoomUrl(
   roomId: string,
+  encryptionSystem: EncryptionSystem,
   roomName?: string,
-  password?: string,
+  viaServers?: string[],
 ): string {
-  // The password shouldn't need URL encoding here (we generate URL-safe ones) but encode
-  // it in case it came from another client that generated a non url-safe one
-  const encodedPassword = password ? encodeURIComponent(password) : undefined;
-  if (password && encodedPassword !== password) {
-    logger.info("Encoded call password used non URL-safe chars: buggy client?");
-  }
-
-  return `/room/#${
-    roomName ? "/" + roomAliasLocalpartFromRoomName(roomName) : ""
-  }?roomId=${roomId}${password ? "&" + PASSWORD_STRING + encodedPassword : ""}`;
+  const roomPart = roomName
+    ? "/" + roomAliasLocalpartFromRoomName(roomName)
+    : "";
+  return `/room/#${roomPart}?${generateUrlSearchParams(roomId, encryptionSystem, viaServers).toString()}`;
 }
 
 export function getAvatarUrl(

src/observable-utils.ts

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Observable, defer, finalize, tap } from "rxjs";
+import { Observable, defer, finalize, scan, startWith, tap } from "rxjs";
 
 const nothing = Symbol("nothing");
 
@@ -35,3 +35,15 @@ export function finalizeValue<T>(callback: (finalValue: T) => void) {
       );
     });
 }
+
+/**
+ * RxJS operator that accumulates a state from a source of events. This is like
+ * scan, except it emits an initial value immediately before any events arrive.
+ */
+export function accumulate<State, Event>(
+  initial: State,
+  update: (state: State, event: Event) => State,
+) {
+  return (events: Observable<Event>): Observable<State> =>
+    events.pipe(scan(update, initial), startWith(initial));
+}

src/otel/OTelGroupCallMembership.ts

@@ -40,7 +40,6 @@ import {
   SummaryStatsReport,
   CallFeedReport,
 } from "matrix-js-sdk/src/webrtc/stats/statsReport";
-import { setSpan } from "@opentelemetry/api/build/esm/trace/context-utils";
 
 import { ElementCallOpenTelemetry } from "./otel";
 import { ObjectFlattener } from "./ObjectFlattener";
@@ -446,7 +445,7 @@ export class OTelGroupCallMembership {
     const type = OTelStatsReportType.SummaryReport;
     const data = ObjectFlattener.flattenSummaryStatsReportObject(statsReport);
     if (this.statsReportSpan.span === undefined && this.callMembershipSpan) {
-      const ctx = setSpan(
+      const ctx = opentelemetry.trace.setSpan(
         opentelemetry.context.active(),
         this.callMembershipSpan,
       );

src/profile/useProfile.ts

@@ -82,7 +82,7 @@ export function useProfile(client: MatrixClient | undefined): UseProfile {
       user?.on(UserEvent.AvatarUrl, onChangeUser);
     }
 
-    return () => {
+    return (): void => {
       if (user) {
         user.removeListener(UserEvent.DisplayName, onChangeUser);
         user.removeListener(UserEvent.AvatarUrl, onChangeUser);
@@ -118,7 +118,7 @@ export function useProfile(client: MatrixClient | undefined): UseProfile {
             displayName,
             avatarUrl: removeAvatar
               ? undefined
-              : mxcAvatarUrl ?? prev.avatarUrl,
+              : (mxcAvatarUrl ?? prev.avatarUrl),
             loading: false,
             success: true,
           }));

src/room/AppSelectionModal.tsx

@@ -17,17 +17,18 @@ limitations under the License.
 import { FC, MouseEvent, useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Button, Text } from "@vector-im/compound-web";
-import PopOutIcon from "@vector-im/compound-design-tokens/icons/pop-out.svg?react";
+import { PopOutIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { Modal } from "../Modal";
-import { useIsRoomE2EE, useRoomSharedKey } from "../e2ee/sharedKeyManagement";
+import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
 import { getAbsoluteRoomUrl } from "../matrix-utils";
 import styles from "./AppSelectionModal.module.css";
 import { editFragmentQuery } from "../UrlParams";
+import { E2eeType } from "../e2ee/e2eeType";
 
 interface Props {
-  roomId: string | null;
+  roomId: string;
 }
 
 export const AppSelectionModal: FC<Props> = ({ roomId }) => {
@@ -42,10 +43,9 @@ export const AppSelectionModal: FC<Props> = ({ roomId }) => {
     },
     [setOpen],
   );
+  const e2eeSystem = useRoomEncryptionSystem(roomId);
 
-  const roomSharedKey = useRoomSharedKey(roomId ?? "");
-  const roomIsEncrypted = useIsRoomE2EE(roomId ?? "");
-  if (roomIsEncrypted && roomSharedKey === undefined) {
+  if (e2eeSystem.kind === E2eeType.NONE) {
     logger.error(
       "Generating app redirect URL for encrypted room but don't have key available!",
     );
@@ -60,7 +60,7 @@ export const AppSelectionModal: FC<Props> = ({ roomId }) => {
     const url = new URL(
       roomId === null
         ? window.location.href
-        : getAbsoluteRoomUrl(roomId, undefined, roomSharedKey ?? undefined),
+        : getAbsoluteRoomUrl(roomId, e2eeSystem),
     );
     // Edit the URL to prevent the app selection prompt from appearing a second
     // time within the app, and to keep the user confined to the current room
@@ -73,7 +73,7 @@ export const AppSelectionModal: FC<Props> = ({ roomId }) => {
     const result = new URL("io.element.call:/");
     result.searchParams.set("url", url.toString());
     return result.toString();
-  }, [roomId, roomSharedKey]);
+  }, [e2eeSystem, roomId]);
 
   return (
     <Modal

src/room/CallEndedView.tsx

@@ -51,11 +51,11 @@ export const CallEndedView: FC<Props> = ({
   const history = useHistory();
 
   const { displayName } = useProfile(client);
-  const [surveySubmitted, setSurverySubmitted] = useState(false);
+  const [surveySubmitted, setSurveySubmitted] = useState(false);
   const [starRating, setStarRating] = useState(0);
   const [submitting, setSubmitting] = useState(false);
   const [submitDone, setSubmitDone] = useState(false);
-  const submitSurvery: FormEventHandler<HTMLFormElement> = useCallback(
+  const submitSurvey: FormEventHandler<HTMLFormElement> = useCallback(
     (e) => {
       e.preventDefault();
       const data = new FormData(e.target as HTMLFormElement);
@@ -75,7 +75,7 @@ export const CallEndedView: FC<Props> = ({
         setTimeout(() => {
           if (isPasswordlessUser) {
             // setting this renders the callEndedView with the invitation to create an account
-            setSurverySubmitted(true);
+            setSurveySubmitted(true);
           } else if (!confineToRoom) {
             // if the user already has an account immediately go back to the home screen
             history.push("/");
@@ -113,7 +113,7 @@ export const CallEndedView: FC<Props> = ({
           We'd love to hear your feedback so we can improve your experience.
         </p>
       </Trans>
-      <form onSubmit={submitSurvery}>
+      <form onSubmit={submitSurvey}>
         <FieldRow>
           <StarRatingInput starCount={5} onChange={setStarRating} required />
         </FieldRow>

src/room/EncryptionLock.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2023 New Vector Ltd
+Copyright 2023-2024 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -17,8 +17,10 @@ limitations under the License.
 import { FC } from "react";
 import { Tooltip } from "@vector-im/compound-web";
 import { useTranslation } from "react-i18next";
-import LockSolidIcon from "@vector-im/compound-design-tokens/icons/lock-solid.svg?react";
-import LockOffIcon from "@vector-im/compound-design-tokens/icons/lock-off.svg?react";
+import {
+  LockSolidIcon,
+  LockOffIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import styles from "./EncryptionLock.module.css";
 
@@ -32,13 +34,13 @@ export const EncryptionLock: FC<Props> = ({ encrypted }) => {
   const label = encrypted ? t("common.encrypted") : t("common.unencrypted");
 
   return (
-    <Tooltip label={label} side="right" isTriggerInteractive={false}>
+    <Tooltip label={label} placement="right" isTriggerInteractive={false}>
       <Icon
         width={16}
         height={16}
         className={styles.lock}
         data-encrypted={encrypted}
-        aria-label={label}
+        aria-hidden
       />
     </Tooltip>
   );

src/room/GroupCallLoader.tsx

@@ -14,22 +14,25 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { ReactNode, useCallback } from "react";
+import { useCallback } from "react";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { useTranslation } from "react-i18next";
-import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 import { MatrixError } from "matrix-js-sdk";
 import { useHistory } from "react-router-dom";
 import { Heading, Link, Text } from "@vector-im/compound-web";
 
-import { useLoadGroupCall } from "./useLoadGroupCall";
+import {
+  useLoadGroupCall,
+  GroupCallStatus,
+  CallTerminatedMessage,
+} from "./useLoadGroupCall";
 import { ErrorView, FullScreenView } from "../FullScreenView";
 
 interface Props {
   client: MatrixClient;
   roomIdOrAlias: string;
   viaServers: string[];
-  children: (rtcSession: MatrixRTCSession) => ReactNode;
+  children: (groupCallState: GroupCallStatus) => JSX.Element;
 }
 
 export function GroupCallLoader({
@@ -51,20 +54,22 @@ export function GroupCallLoader({
   );
 
   switch (groupCallState.kind) {
+    case "loaded":
+    case "waitForInvite":
+    case "canKnock":
+      return children(groupCallState);
     case "loading":
       return (
         <FullScreenView>
           <h1>{t("common.loading")}</h1>
         </FullScreenView>
       );
-    case "loaded":
-      return <>{children(groupCallState.rtcSession)}</>;
     case "failed":
       if ((groupCallState.error as MatrixError).errcode === "M_NOT_FOUND") {
         return (
           <FullScreenView>
-            <Heading>{t("group_call_loader_failed_heading")}</Heading>
-            <Text>{t("group_call_loader_failed_text")}</Text>
+            <Heading>{t("group_call_loader.failed_heading")}</Heading>
+            <Text>{t("group_call_loader.failed_text")}</Text>
             {/* XXX: A 'create it for me' button would be the obvious UX here. Two screens already have
             dupes of this flow, let's make a common component and put it here. */}
             <Link href="/" onClick={onHomeClick}>
@@ -72,6 +77,22 @@ export function GroupCallLoader({
             </Link>
           </FullScreenView>
         );
+      } else if (groupCallState.error instanceof CallTerminatedMessage) {
+        return (
+          <FullScreenView>
+            <Heading>{groupCallState.error.message}</Heading>
+            <Text>{groupCallState.error.messageBody}</Text>
+            {groupCallState.error.reason && (
+              <>
+                {t("group_call_loader.reason")}:
+                <Text size="sm">"{groupCallState.error.reason}"</Text>
+              </>
+            )}
+            <Link href="/" onClick={onHomeClick}>
+              {t("common.home")}
+            </Link>
+          </FullScreenView>
+        );
       } else {
         return <ErrorView error={groupCallState.error} />;
       }

src/room/GroupCallView.tsx

@@ -17,7 +17,10 @@ limitations under the License.
 import { FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useHistory } from "react-router-dom";
 import { MatrixClient } from "matrix-js-sdk/src/client";
-import { Room, isE2EESupported } from "livekit-client";
+import {
+  Room,
+  isE2EESupported as isE2EESupportedBrowser,
+} from "livekit-client";
 import { logger } from "matrix-js-sdk/src/logger";
 import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 import { JoinRule } from "matrix-js-sdk/src/matrix";
@@ -26,7 +29,7 @@ import { useTranslation } from "react-i18next";
 
 import type { IWidgetApiRequest } from "matrix-widget-api";
 import { widget, ElementWidgetActions, JoinCallData } from "../widget";
-import { ErrorView, FullScreenView } from "../FullScreenView";
+import { FullScreenView } from "../FullScreenView";
 import { LobbyView } from "./LobbyView";
 import { MatrixInfo } from "./VideoPreview";
 import { CallEndedView } from "./CallEndedView";
@@ -34,17 +37,16 @@ import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { useProfile } from "../profile/useProfile";
 import { findDeviceByName } from "../media-utils";
 import { ActiveCall } from "./InCallView";
-import { MuteStates, useMuteStates } from "./MuteStates";
+import { MUTE_PARTICIPANT_COUNT, MuteStates } from "./MuteStates";
 import { useMediaDevices, MediaDevices } from "../livekit/MediaDevicesContext";
 import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships";
 import { enterRTCSession, leaveRTCSession } from "../rtcSessionHelpers";
 import { useMatrixRTCSessionJoinState } from "../useMatrixRTCSessionJoinState";
-import { useIsRoomE2EE, useRoomSharedKey } from "../e2ee/sharedKeyManagement";
+import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
 import { useRoomAvatar } from "./useRoomAvatar";
 import { useRoomName } from "./useRoomName";
 import { useJoinRule } from "./useJoinRule";
 import { InviteModal } from "./InviteModal";
-import { E2EEConfig } from "../livekit/useLiveKit";
 import { useUrlParams } from "../UrlParams";
 import { E2eeType } from "../e2ee/e2eeType";
 
@@ -62,6 +64,7 @@ interface Props {
   skipLobby: boolean;
   hideHeader: boolean;
   rtcSession: MatrixRTCSession;
+  muteStates: MuteStates;
 }
 
 export const GroupCallView: FC<Props> = ({
@@ -72,13 +75,21 @@ export const GroupCallView: FC<Props> = ({
   skipLobby,
   hideHeader,
   rtcSession,
+  muteStates,
 }) => {
   const memberships = useMatrixRTCSessionMemberships(rtcSession);
   const isJoined = useMatrixRTCSessionJoinState(rtcSession);
 
+  // This should use `useEffectEvent` (only available in experimental versions)
+  useEffect(() => {
+    if (memberships.length >= MUTE_PARTICIPANT_COUNT)
+      muteStates.audio.setEnabled?.(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   useEffect(() => {
     window.rtcSession = rtcSession;
-    return () => {
+    return (): void => {
       delete window.rtcSession;
     };
   }, [rtcSession]);
@@ -86,10 +97,8 @@ export const GroupCallView: FC<Props> = ({
   const { displayName, avatarUrl } = useProfile(client);
   const roomName = useRoomName(rtcSession.room);
   const roomAvatar = useRoomAvatar(rtcSession.room);
-  const e2eeSharedKey = useRoomSharedKey(rtcSession.room.roomId);
   const { perParticipantE2EE, returnToLobby } = useUrlParams();
-  const roomEncrypted =
-    useIsRoomE2EE(rtcSession.room.roomId) || perParticipantE2EE;
+  const e2eeSystem = useRoomEncryptionSystem(rtcSession.room.roomId);
 
   const matrixInfo = useMemo((): MatrixInfo => {
     return {
@@ -100,16 +109,16 @@ export const GroupCallView: FC<Props> = ({
       roomName,
       roomAlias: rtcSession.room.getCanonicalAlias(),
       roomAvatar,
-      roomEncrypted,
+      e2eeSystem,
     };
   }, [
+    client,
     displayName,
     avatarUrl,
-    rtcSession,
+    rtcSession.room,
     roomName,
     roomAvatar,
-    roomEncrypted,
-    client,
+    e2eeSystem,
   ]);
 
   // Count each member only once, regardless of how many devices they use
@@ -122,20 +131,9 @@ export const GroupCallView: FC<Props> = ({
   const latestDevices = useRef<MediaDevices>();
   latestDevices.current = deviceContext;
 
-  const muteStates = useMuteStates(memberships.length);
   const latestMuteStates = useRef<MuteStates>();
   latestMuteStates.current = muteStates;
 
-  const e2eeConfig = useMemo((): E2EEConfig => {
-    if (perParticipantE2EE) {
-      return { mode: E2eeType.PER_PARTICIPANT };
-    } else if (e2eeSharedKey) {
-      return { mode: E2eeType.SHARED_KEY, sharedKey: e2eeSharedKey };
-    } else {
-      return { mode: E2eeType.NONE };
-    }
-  }, [perParticipantE2EE, e2eeSharedKey]);
-
   useEffect(() => {
     const defaultDeviceSetup = async (
       requestedDeviceData: JoinCallData,
@@ -192,18 +190,21 @@ export const GroupCallView: FC<Props> = ({
       const onJoin = async (
         ev: CustomEvent<IWidgetApiRequest>,
       ): Promise<void> => {
-        defaultDeviceSetup(ev.detail.data as unknown as JoinCallData);
-        enterRTCSession(rtcSession, perParticipantE2EE);
+        await defaultDeviceSetup(ev.detail.data as unknown as JoinCallData);
+        await enterRTCSession(rtcSession, perParticipantE2EE);
         await widget!.api.transport.reply(ev.detail, {});
       };
       widget.lazyActions.on(ElementWidgetActions.JoinCall, onJoin);
-      return () => {
+      return (): void => {
         widget!.lazyActions.off(ElementWidgetActions.JoinCall, onJoin);
       };
     } else if (widget && !preload && skipLobby) {
-      // No lobby and no preload: we enter the rtc session right away
-      defaultDeviceSetup({ audioInput: null, videoInput: null });
-      enterRTCSession(rtcSession, perParticipantE2EE);
+      const join = async (): Promise<void> => {
+        await defaultDeviceSetup({ audioInput: null, videoInput: null });
+        await enterRTCSession(rtcSession, perParticipantE2EE);
+      };
+      // No lobby and no preload: we enter the RTC Session right away.
+      join();
     }
   }, [rtcSession, preload, skipLobby, perParticipantE2EE]);
 
@@ -252,7 +253,7 @@ export const GroupCallView: FC<Props> = ({
         await leaveRTCSession(rtcSession);
       };
       widget.lazyActions.once(ElementWidgetActions.HangupCall, onHangup);
-      return () => {
+      return (): void => {
         widget!.lazyActions.off(ElementWidgetActions.HangupCall, onHangup);
       };
     }
@@ -288,17 +289,8 @@ export const GroupCallView: FC<Props> = ({
 
   const { t } = useTranslation();
 
-  if (roomEncrypted && !perParticipantE2EE && !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.",
-          )
-        }
-      />
-    );
-  } else if (!isE2EESupported() && roomEncrypted) {
+  if (!isE2EESupportedBrowser() && e2eeSystem.kind !== E2eeType.NONE) {
+    // If we have a encryption system but the browser does not support it.
     return (
       <FullScreenView>
         <Heading>{t("browser_media_e2ee_unsupported_heading")}</Heading>
@@ -324,7 +316,7 @@ export const GroupCallView: FC<Props> = ({
         client={client}
         matrixInfo={matrixInfo}
         muteStates={muteStates}
-        onEnter={(): void => enterRTCSession(rtcSession, perParticipantE2EE)}
+        onEnter={() => void enterRTCSession(rtcSession, perParticipantE2EE)}
         confineToRoom={confineToRoom}
         hideHeader={hideHeader}
         participantCount={participantCount}
@@ -345,7 +337,7 @@ export const GroupCallView: FC<Props> = ({
           onLeave={onLeave}
           hideHeader={hideHeader}
           muteStates={muteStates}
-          e2eeConfig={e2eeConfig}
+          e2eeSystem={e2eeSystem}
           //otelGroupCallMembership={otelGroupCallMembership}
           onShareClick={onShareClick}
         />

src/room/InCallView.module.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2021 New Vector Ltd
+Copyright 2021-2024 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.
@@ -19,36 +19,31 @@ limitations under the License.
   flex-direction: column;
   height: 100%;
   width: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 
-.controlsOverlay {
-  position: relative;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-  overflow-inline: hidden;
-  /* There used to be a contain: strict here, but due to some bugs in Firefox,
-  this was causing the Z-ordering of modals to glitch out. It can be added back
-  if those issues appear to be resolved. */
+.header {
+  position: sticky;
+  flex-shrink: 0;
+  inset-block-start: 0;
+  z-index: 1;
+  background: linear-gradient(
+    0deg,
+    rgba(0, 0, 0, 0) 0%,
+    var(--cpd-color-bg-canvas-default) 100%
+  );
 }
 
-.centerMessage {
-  display: flex;
-  flex: 1;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-
-.centerMessage p {
-  display: block;
-  margin-bottom: 0;
+.header.filler {
+  block-size: var(--cpd-space-6x);
+  background: none;
 }
 
 .footer {
   position: sticky;
   inset-block-end: 0;
+  z-index: 1;
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   grid-template-areas: "logo buttons layout";
@@ -63,6 +58,24 @@ limitations under the License.
   );
 }
 
+.footer.overlay {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline: 0;
+  opacity: 1;
+  transition: opacity 0.15s;
+}
+
+.footer.overlay.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.footer.overlay:has(:focus-visible) {
+  opacity: 1;
+  pointer-events: initial;
+}
+
 .logo {
   grid-area: logo;
   justify-self: start;
@@ -85,13 +98,13 @@ limitations under the License.
 
 @media (min-height: 400px) {
   .footer {
-    padding-block: var(--cpd-space-10x);
+    padding-block: var(--cpd-space-8x);
   }
 }
 
 @media (min-height: 800px) {
   .footer {
-    padding-block: var(--cpd-space-15x);
+    padding-block: var(--cpd-space-10x);
   }
 }
 
@@ -101,11 +114,37 @@ limitations under the License.
   }
 }
 
-.footerThin {
-  padding-top: var(--cpd-space-3x);
-  padding-bottom: var(--cpd-space-5x);
+.fixedGrid {
+  position: absolute;
+  inline-size: 100%;
+  align-self: center;
 }
 
-.footerHidden {
-  display: none;
+.scrollingGrid {
+  position: relative;
+  flex-grow: 1;
+  inline-size: 100%;
+  align-self: center;
+}
+
+.fixedGrid,
+.scrollingGrid {
+  /* Disable pointer events so the overlay doesn't block interaction with
+  elements behind it */
+  pointer-events: none;
+}
+
+.fixedGrid > :not(:first-child),
+.scrollingGrid > :not(:first-child) {
+  pointer-events: initial;
+}
+
+.tile {
+  position: absolute;
+  inset-block-start: 0;
+}
+
+.tile.maximised {
+  position: relative;
+  flex-grow: 1;
 }

src/room/InCallView.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 - 2023 New Vector Ltd
+Copyright 2022 - 2024 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,31 +14,31 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { ResizeObserver } from "@juggle/resize-observer";
 import {
   RoomAudioRenderer,
   RoomContext,
   useLocalParticipant,
-  useTracks,
 } from "@livekit/components-react";
 import { usePreventScroll } from "@react-aria/overlays";
-import { ConnectionState, Room, Track } from "livekit-client";
+import { ConnectionState, Room } from "livekit-client";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import {
   FC,
-  ReactNode,
-  Ref,
+  PointerEvent,
+  PropsWithoutRef,
+  TouchEvent,
+  forwardRef,
   useCallback,
   useEffect,
   useMemo,
   useRef,
   useState,
 } from "react";
-import { useTranslation } from "react-i18next";
 import useMeasure from "react-use-measure";
 import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 import classNames from "classnames";
-import { useStateObservable } from "@react-rxjs/core";
+import { BehaviorSubject, of } from "rxjs";
+import { useObservableEagerState } from "observable-hooks";
 
 import LogoMark from "../icons/LogoMark.svg?react";
 import LogoType from "../icons/LogoType.svg?react";
@@ -51,21 +51,16 @@ import {
   SettingsButton,
 } from "../button";
 import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
-import { useVideoGridLayout, VideoGrid } from "../video-grid/VideoGrid";
 import { useUrlParams } from "../UrlParams";
 import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts";
-import { usePrefersReducedMotion } from "../usePrefersReducedMotion";
 import { ElementWidgetActions, widget } from "../widget";
 import styles from "./InCallView.module.css";
-import { VideoTile } from "../video-grid/VideoTile";
-import { NewVideoGrid } from "../video-grid/NewVideoGrid";
+import { GridTile } from "../tile/GridTile";
 import { OTelGroupCallMembership } from "../otel/OTelGroupCallMembership";
 import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal";
 import { useRageshakeRequestModal } from "../settings/submit-rageshake";
 import { RageshakeRequestModal } from "./RageshakeRequestModal";
-import { E2EEConfig, useLiveKit } from "../livekit/useLiveKit";
-import { useFullscreen } from "./useFullscreen";
-import { useLayoutStates } from "../video-grid/Layout";
+import { useLiveKit } from "../livekit/useLiveKit";
 import { useWakeLock } from "../useWakeLock";
 import { useMergedRefs } from "../useMergedRefs";
 import { MuteStates } from "./MuteStates";
@@ -74,15 +69,32 @@ import { InviteButton } from "../button/InviteButton";
 import { LayoutToggle } from "./LayoutToggle";
 import { ECConnectionState } from "../livekit/useECConnectionState";
 import { useOpenIDSFU } from "../livekit/openIDSFU";
-import { useCallViewModel } from "../state/CallViewModel";
-import { subscribe } from "../state/subscribe";
+import { GridMode, Layout, useCallViewModel } from "../state/CallViewModel";
+import { Grid, TileProps } from "../grid/Grid";
+import { useObservable } from "../state/useObservable";
+import { useInitial } from "../useInitial";
+import { SpotlightTile } from "../tile/SpotlightTile";
+import { EncryptionSystem } from "../e2ee/sharedKeyManagement";
+import { E2eeType } from "../e2ee/e2eeType";
+import { makeGridLayout } from "../grid/GridLayout";
+import {
+  CallLayoutOutputs,
+  TileModel,
+  defaultPipAlignment,
+  defaultSpotlightAlignment,
+} from "../grid/CallLayout";
+import { makeOneOnOneLayout } from "../grid/OneOnOneLayout";
+import { makeSpotlightExpandedLayout } from "../grid/SpotlightExpandedLayout";
+import { makeSpotlightLandscapeLayout } from "../grid/SpotlightLandscapeLayout";
+import { makeSpotlightPortraitLayout } from "../grid/SpotlightPortraitLayout";
 
 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
-const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
+const maxTapDurationMs = 400;
 
 export interface ActiveCallProps
   extends Omit<InCallViewProps, "livekitRoom" | "connState"> {
-  e2eeConfig: E2EEConfig;
+  e2eeSystem: EncryptionSystem;
 }
 
 export const ActiveCall: FC<ActiveCallProps> = (props) => {
@@ -91,11 +103,11 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
     props.rtcSession,
     props.muteStates,
     sfuConfig,
-    props.e2eeConfig,
+    props.e2eeSystem,
   );
 
   useEffect(() => {
-    return () => {
+    return (): void => {
       livekitRoom?.disconnect();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -124,315 +136,433 @@ export interface InCallViewProps {
   onShareClick: (() => void) | null;
 }
 
-export const InCallView: FC<InCallViewProps> = subscribe(
-  ({
-    client,
-    matrixInfo,
-    rtcSession,
+export const InCallView: FC<InCallViewProps> = ({
+  client,
+  matrixInfo,
+  rtcSession,
+  livekitRoom,
+  muteStates,
+  participantCount,
+  onLeave,
+  hideHeader,
+  connState,
+  onShareClick,
+}) => {
+  usePreventScroll();
+  useWakeLock();
+
+  useEffect(() => {
+    if (connState === ConnectionState.Disconnected) {
+      // annoyingly we don't get the disconnection reason this way,
+      // only by listening for the emitted event
+      onLeave(new Error("Disconnected from call server"));
+    }
+  }, [connState, onLeave]);
+
+  const containerRef1 = useRef<HTMLDivElement | null>(null);
+  const [containerRef2, bounds] = useMeasure();
+  const boundsValid = bounds.height > 0;
+  // Merge the refs so they can attach to the same element
+  const containerRef = useMergedRefs(containerRef1, containerRef2);
+
+  const { hideScreensharing, showControls } = useUrlParams();
+
+  const { isScreenShareEnabled, localParticipant } = useLocalParticipant({
+    room: livekitRoom,
+  });
+
+  const toggleMicrophone = useCallback(
+    () => muteStates.audio.setEnabled?.((e) => !e),
+    [muteStates],
+  );
+  const toggleCamera = useCallback(
+    () => muteStates.video.setEnabled?.((e) => !e),
+    [muteStates],
+  );
+
+  // This function incorrectly assumes that there is a camera and microphone, which is not always the case.
+  // TODO: Make sure that this module is resilient when it comes to camera/microphone availability!
+  useCallViewKeyboardShortcuts(
+    containerRef1,
+    toggleMicrophone,
+    toggleCamera,
+    (muted) => muteStates.audio.setEnabled?.(!muted),
+  );
+
+  const mobile = boundsValid && bounds.width <= 660;
+  const reducedControls = boundsValid && bounds.width <= 340;
+  const noControls = reducedControls && bounds.height <= 400;
+
+  const vm = useCallViewModel(
+    rtcSession.room,
     livekitRoom,
-    muteStates,
-    participantCount,
-    onLeave,
-    hideHeader,
-    otelGroupCallMembership,
+    matrixInfo.e2eeSystem.kind !== E2eeType.NONE,
     connState,
-    onShareClick,
-  }) => {
-    const { t } = useTranslation();
-    usePreventScroll();
-    useWakeLock();
+  );
+  const windowMode = useObservableEagerState(vm.windowMode);
+  const layout = useObservableEagerState(vm.layout);
+  const gridMode = useObservableEagerState(vm.gridMode);
+  const showHeader = useObservableEagerState(vm.showHeader);
+  const showFooter = useObservableEagerState(vm.showFooter);
 
-    useEffect(() => {
-      if (connState === ConnectionState.Disconnected) {
-        // annoyingly we don't get the disconnection reason this way,
-        // only by listening for the emitted event
-        onLeave(new Error("Disconnected from call server"));
-      }
-    }, [connState, onLeave]);
+  // Ideally we could detect taps by listening for click events and checking
+  // that the pointerType of the event is "touch", but this isn't yet supported
+  // in Safari: https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event#browser_compatibility
+  // Instead we have to watch for sufficiently fast touch events.
+  const touchStart = useRef<number | null>(null);
+  const onTouchStart = useCallback(() => (touchStart.current = Date.now()), []);
+  const onTouchEnd = useCallback(() => {
+    const start = touchStart.current;
+    if (start !== null && Date.now() - start <= maxTapDurationMs)
+      vm.tapScreen();
+    touchStart.current = null;
+  }, [vm]);
+  const onTouchCancel = useCallback(() => (touchStart.current = null), []);
 
-    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 = useMergedRefs(containerRef1, containerRef2);
+  // We also need to tell the layout toggle to prevent touch events from
+  // bubbling up, or else the controls will be dismissed before a change event
+  // can be registered on the toggle
+  const onLayoutToggleTouchEnd = useCallback(
+    (e: TouchEvent) => e.stopPropagation(),
+    [],
+  );
 
-    const screenSharingTracks = useTracks(
-      [{ source: Track.Source.ScreenShare, withPlaceholder: false }],
-      {
-        room: livekitRoom,
-      },
-    );
-    const { layout, setLayout } = useVideoGridLayout(
-      screenSharingTracks.length > 0,
+  const onPointerMove = useCallback(
+    (e: PointerEvent) => {
+      if (e.pointerType === "mouse") vm.hoverScreen();
+    },
+    [vm],
+  );
+  const onPointerOut = useCallback(() => vm.unhoverScreen(), [vm]);
+
+  const [settingsModalOpen, setSettingsModalOpen] = useState(false);
+  const [settingsTab, setSettingsTab] = useState(defaultSettingsTab);
+
+  const openSettings = useCallback(
+    () => setSettingsModalOpen(true),
+    [setSettingsModalOpen],
+  );
+  const closeSettings = useCallback(
+    () => setSettingsModalOpen(false),
+    [setSettingsModalOpen],
+  );
+
+  const openProfile = useCallback(() => {
+    setSettingsTab("profile");
+    setSettingsModalOpen(true);
+  }, [setSettingsTab, setSettingsModalOpen]);
+
+  const [headerRef, headerBounds] = useMeasure();
+  const [footerRef, footerBounds] = useMeasure();
+
+  const gridBounds = useMemo(
+    () => ({
+      width: bounds.width,
+      height:
+        bounds.height -
+        headerBounds.height -
+        (windowMode === "flat" ? 0 : footerBounds.height),
+    }),
+    [
+      bounds.width,
+      bounds.height,
+      headerBounds.height,
+      footerBounds.height,
+      windowMode,
+    ],
+  );
+  const gridBoundsObservable = useObservable(gridBounds);
+
+  const spotlightAlignment = useInitial(
+    () => new BehaviorSubject(defaultSpotlightAlignment),
+  );
+  const pipAlignment = useInitial(
+    () => new BehaviorSubject(defaultPipAlignment),
+  );
+
+  const setGridMode = useCallback(
+    (mode: GridMode) => vm.setGridMode(mode),
+    [vm],
+  );
+
+  useEffect(() => {
+    widget?.api.transport.send(
+      gridMode === "grid"
+        ? ElementWidgetActions.TileLayout
+        : ElementWidgetActions.SpotlightLayout,
+      {},
     );
+  }, [gridMode]);
 
-    const { hideScreensharing, showControls } = useUrlParams();
+  useEffect(() => {
+    if (widget) {
+      const onTileLayout = (ev: CustomEvent<IWidgetApiRequest>): void => {
+        setGridMode("grid");
+        widget!.api.transport.reply(ev.detail, {});
+      };
+      const onSpotlightLayout = (ev: CustomEvent<IWidgetApiRequest>): void => {
+        setGridMode("spotlight");
+        widget!.api.transport.reply(ev.detail, {});
+      };
 
-    const { isScreenShareEnabled, localParticipant } = useLocalParticipant({
-      room: livekitRoom,
-    });
-
-    const toggleMicrophone = useCallback(
-      () => muteStates.audio.setEnabled?.((e) => !e),
-      [muteStates],
-    );
-    const toggleCamera = useCallback(
-      () => muteStates.video.setEnabled?.((e) => !e),
-      [muteStates],
-    );
-
-    // This function incorrectly assumes that there is a camera and microphone, which is not always the case.
-    // TODO: Make sure that this module is resilient when it comes to camera/microphone availability!
-    useCallViewKeyboardShortcuts(
-      containerRef1,
-      toggleMicrophone,
-      toggleCamera,
-      (muted) => muteStates.audio.setEnabled?.(!muted),
-    );
-
-    useEffect(() => {
-      widget?.api.transport.send(
-        layout === "grid"
-          ? ElementWidgetActions.TileLayout
-          : ElementWidgetActions.SpotlightLayout,
-        {},
+      widget.lazyActions.on(ElementWidgetActions.TileLayout, onTileLayout);
+      widget.lazyActions.on(
+        ElementWidgetActions.SpotlightLayout,
+        onSpotlightLayout,
       );
-    }, [layout]);
 
-    useEffect(() => {
-      if (widget) {
-        const onTileLayout = (ev: CustomEvent<IWidgetApiRequest>): void => {
-          setLayout("grid");
-          widget!.api.transport.reply(ev.detail, {});
-        };
-        const onSpotlightLayout = (
-          ev: CustomEvent<IWidgetApiRequest>,
-        ): void => {
-          setLayout("spotlight");
-          widget!.api.transport.reply(ev.detail, {});
-        };
-
-        widget.lazyActions.on(ElementWidgetActions.TileLayout, onTileLayout);
-        widget.lazyActions.on(
+      return (): void => {
+        widget!.lazyActions.off(ElementWidgetActions.TileLayout, onTileLayout);
+        widget!.lazyActions.off(
           ElementWidgetActions.SpotlightLayout,
           onSpotlightLayout,
         );
+      };
+    }
+  }, [setGridMode]);
 
-        return () => {
-          widget!.lazyActions.off(
-            ElementWidgetActions.TileLayout,
-            onTileLayout,
-          );
-          widget!.lazyActions.off(
-            ElementWidgetActions.SpotlightLayout,
-            onSpotlightLayout,
-          );
-        };
-      }
-    }, [setLayout]);
-
-    const mobile = boundsValid && bounds.width <= 660;
-    const reducedControls = boundsValid && bounds.width <= 340;
-    const noControls = reducedControls && bounds.height <= 400;
-
-    const vm = useCallViewModel(
-      rtcSession.room,
-      livekitRoom,
-      matrixInfo.roomEncrypted,
-      connState,
-    );
-    const items = useStateObservable(vm.tiles);
-    const { fullscreenItem, toggleFullscreen, exitFullscreen } =
-      useFullscreen(items);
-
-    // The maximised participant: either the participant that the user has
-    // manually put in fullscreen, or the focused (active) participant if the
-    // window is too small to show everyone
-    const maximisedParticipant = useMemo(
-      () =>
-        fullscreenItem ??
-        (noControls
-          ? items.find((item) => item.isSpeaker) ?? items.at(0) ?? null
-          : null),
-      [fullscreenItem, noControls, items],
-    );
-
-    const Grid =
-      items.length > 12 && layout === "grid" ? NewVideoGrid : VideoGrid;
-
-    const prefersReducedMotion = usePrefersReducedMotion();
-
-    // This state is lifted out of NewVideoGrid so that layout states can be
-    // restored after a layout switch or upon exiting fullscreen
-    const layoutStates = useLayoutStates();
-
-    const renderContent = (): JSX.Element => {
-      if (items.length === 0) {
-        return (
-          <div className={styles.centerMessage}>
-            <p>{t("waiting_for_participants")}</p>
-          </div>
+  const Tile = useMemo(
+    () =>
+      forwardRef<
+        HTMLDivElement,
+        PropsWithoutRef<TileProps<TileModel, HTMLDivElement>>
+      >(function Tile(
+        { className, style, targetWidth, targetHeight, model },
+        ref,
+      ) {
+        const spotlightExpanded = useObservableEagerState(vm.spotlightExpanded);
+        const onToggleExpanded = useObservableEagerState(
+          vm.toggleSpotlightExpanded,
         );
-      }
-      if (maximisedParticipant) {
-        return (
-          <VideoTile
-            vm={maximisedParticipant.data}
-            maximised={true}
-            fullscreen={maximisedParticipant === fullscreenItem}
-            onToggleFullscreen={toggleFullscreen}
-            targetHeight={bounds.height}
-            targetWidth={bounds.width}
-            key={maximisedParticipant.id}
-            showSpeakingIndicator={false}
+        const showVideo = useObservableEagerState(
+          useMemo(
+            () =>
+              model.type === "grid" ? vm.showGridVideo(model.vm) : of(true),
+            [model],
+          ),
+        );
+        const showSpeakingIndicatorsValue = useObservableEagerState(
+          vm.showSpeakingIndicators,
+        );
+        const showSpotlightIndicatorsValue = useObservableEagerState(
+          vm.showSpotlightIndicators,
+        );
+
+        return model.type === "grid" ? (
+          <GridTile
+            ref={ref}
+            vm={model.vm}
             onOpenProfile={openProfile}
+            targetWidth={targetWidth}
+            targetHeight={targetHeight}
+            className={classNames(className, styles.tile)}
+            style={style}
+            showVideo={showVideo}
+            showSpeakingIndicators={showSpeakingIndicatorsValue}
+          />
+        ) : (
+          <SpotlightTile
+            ref={ref}
+            vms={model.vms}
+            maximised={model.maximised}
+            expanded={spotlightExpanded}
+            onToggleExpanded={onToggleExpanded}
+            targetWidth={targetWidth}
+            targetHeight={targetHeight}
+            showIndicators={showSpotlightIndicatorsValue}
+            className={classNames(className, styles.tile)}
+            style={style}
           />
         );
-      }
+      }),
+    [vm, openProfile],
+  );
 
-      return (
-        <Grid
-          items={items}
-          layout={layout}
-          disableAnimations={prefersReducedMotion || isSafari}
-          layoutStates={layoutStates}
-        >
-          {({ data: vm, ...props }): ReactNode => (
-            <VideoTile
-              vm={vm}
-              maximised={false}
-              fullscreen={false}
-              onToggleFullscreen={toggleFullscreen}
-              showSpeakingIndicator={items.length > 2}
-              onOpenProfile={openProfile}
-              {...props}
-              ref={props.ref as Ref<HTMLDivElement>}
-            />
-          )}
-        </Grid>
-      );
+  const layouts = useMemo(() => {
+    const inputs = {
+      minBounds: gridBoundsObservable,
+      spotlightAlignment,
+      pipAlignment,
     };
+    return {
+      grid: makeGridLayout(inputs),
+      "spotlight-landscape": makeSpotlightLandscapeLayout(inputs),
+      "spotlight-portrait": makeSpotlightPortraitLayout(inputs),
+      "spotlight-expanded": makeSpotlightExpandedLayout(inputs),
+      "one-on-one": makeOneOnOneLayout(inputs),
+    };
+  }, [gridBoundsObservable, spotlightAlignment, pipAlignment]);
 
-    const rageshakeRequestModalProps = useRageshakeRequestModal(
-      rtcSession.room.roomId,
-    );
-
-    const [settingsModalOpen, setSettingsModalOpen] = useState(false);
-    const [settingsTab, setSettingsTab] = useState(defaultSettingsTab);
-
-    const openSettings = useCallback(
-      () => setSettingsModalOpen(true),
-      [setSettingsModalOpen],
-    );
-    const closeSettings = useCallback(
-      () => setSettingsModalOpen(false),
-      [setSettingsModalOpen],
-    );
-
-    const openProfile = useCallback(() => {
-      setSettingsTab("profile");
-      setSettingsModalOpen(true);
-    }, [setSettingsTab, setSettingsModalOpen]);
-
-    const toggleScreensharing = useCallback(async () => {
-      exitFullscreen();
-      await localParticipant.setScreenShareEnabled(!isScreenShareEnabled, {
-        audio: true,
-        selfBrowserSurface: "include",
-        surfaceSwitching: "include",
-        systemAudio: "include",
-      });
-    }, [localParticipant, isScreenShareEnabled, exitFullscreen]);
-
-    let footer: JSX.Element | null;
-
-    if (noControls) {
-      footer = null;
-    } else {
-      const buttons: JSX.Element[] = [];
-
-      buttons.push(
-        <MicButton
-          key="1"
-          muted={!muteStates.audio.enabled}
-          onPress={toggleMicrophone}
-          disabled={muteStates.audio.setEnabled === null}
-          data-testid="incall_mute"
-        />,
-        <VideoButton
-          key="2"
-          muted={!muteStates.video.enabled}
-          onPress={toggleCamera}
-          disabled={muteStates.video.setEnabled === null}
-          data-testid="incall_videomute"
-        />,
-      );
-
-      if (!reducedControls) {
-        if (canScreenshare && !hideScreensharing) {
-          buttons.push(
-            <ScreenshareButton
-              key="3"
-              enabled={isScreenShareEnabled}
-              onPress={toggleScreensharing}
-              data-testid="incall_screenshare"
-            />,
-          );
-        }
-        buttons.push(<SettingsButton key="4" onPress={openSettings} />);
-      }
-
-      buttons.push(
-        <HangupButton
-          key="6"
-          onPress={function (): void {
-            onLeave();
-          }}
-          data-testid="incall_leave"
-        />,
-      );
-      footer = (
-        <div
-          className={classNames(
-            showControls
-              ? styles.footer
-              : hideHeader
-                ? [styles.footer, styles.footerHidden]
-                : [styles.footer, styles.footerThin],
-          )}
-        >
-          {!mobile && !hideHeader && (
-            <div className={styles.logo}>
-              <LogoMark width={24} height={24} aria-hidden />
-              <LogoType
-                width={80}
-                height={11}
-                aria-label={import.meta.env.VITE_PRODUCT_NAME || "Element Call"}
-              />
-            </div>
-          )}
-          {showControls && <div className={styles.buttons}>{buttons}</div>}
-          {!mobile && !hideHeader && showControls && (
-            <LayoutToggle
-              className={styles.layout}
-              layout={layout}
-              setLayout={setLayout}
-            />
-          )}
-        </div>
+  const renderContent = (): JSX.Element => {
+    if (layout.type === "pip") {
+      return (
+        <SpotlightTile
+          className={classNames(styles.tile, styles.maximised)}
+          vms={layout.spotlight!}
+          maximised
+          expanded
+          onToggleExpanded={null}
+          targetWidth={gridBounds.height}
+          targetHeight={gridBounds.width}
+          showIndicators={false}
+        />
       );
     }
 
-    return (
-      <div className={styles.inRoom} ref={containerRef}>
-        {!hideHeader && maximisedParticipant === null && (
-          <Header>
+    const layers = layouts[layout.type] as CallLayoutOutputs<Layout>;
+    const fixedGrid = (
+      <Grid
+        key="fixed"
+        className={styles.fixedGrid}
+        style={{
+          insetBlockStart: headerBounds.bottom,
+          height: gridBounds.height,
+        }}
+        model={layout}
+        Layout={layers.fixed}
+        Tile={Tile}
+      />
+    );
+    const scrollingGrid = (
+      <Grid
+        key="scrolling"
+        className={styles.scrollingGrid}
+        model={layout}
+        Layout={layers.scrolling}
+        Tile={Tile}
+      />
+    );
+    // The grid tiles go *under* the spotlight in the portrait layout, but
+    // *over* the spotlight in the expanded layout
+    return layout.type === "spotlight-expanded" ? (
+      <>
+        {fixedGrid}
+        {scrollingGrid}
+      </>
+    ) : (
+      <>
+        {scrollingGrid}
+        {fixedGrid}
+      </>
+    );
+  };
+
+  const rageshakeRequestModalProps = useRageshakeRequestModal(
+    rtcSession.room.roomId,
+  );
+
+  const toggleScreensharing = useCallback(async () => {
+    await localParticipant.setScreenShareEnabled(!isScreenShareEnabled, {
+      audio: true,
+      selfBrowserSurface: "include",
+      surfaceSwitching: "include",
+      systemAudio: "include",
+    });
+  }, [localParticipant, isScreenShareEnabled]);
+
+  let footer: JSX.Element | null;
+
+  if (noControls) {
+    footer = null;
+  } else {
+    const buttons: JSX.Element[] = [];
+
+    buttons.push(
+      <MicButton
+        key="1"
+        muted={!muteStates.audio.enabled}
+        onPress={toggleMicrophone}
+        disabled={muteStates.audio.setEnabled === null}
+        data-testid="incall_mute"
+      />,
+      <VideoButton
+        key="2"
+        muted={!muteStates.video.enabled}
+        onPress={toggleCamera}
+        disabled={muteStates.video.setEnabled === null}
+        data-testid="incall_videomute"
+      />,
+    );
+    if (!reducedControls) {
+      if (canScreenshare && !hideScreensharing) {
+        buttons.push(
+          <ScreenshareButton
+            key="3"
+            enabled={isScreenShareEnabled}
+            onPress={toggleScreensharing}
+            data-testid="incall_screenshare"
+          />,
+        );
+      }
+      buttons.push(<SettingsButton key="4" onPress={openSettings} />);
+    }
+
+    buttons.push(
+      <HangupButton
+        key="6"
+        onPress={function (): void {
+          onLeave();
+        }}
+        data-testid="incall_leave"
+      />,
+    );
+    footer = (
+      <div
+        ref={footerRef}
+        className={classNames(styles.footer, {
+          [styles.overlay]: windowMode === "flat",
+          [styles.hidden]: !showFooter || (!showControls && hideHeader),
+        })}
+      >
+        {!mobile && !hideHeader && (
+          <div className={styles.logo}>
+            <LogoMark width={24} height={24} aria-hidden />
+            <LogoType
+              width={80}
+              height={11}
+              aria-label={import.meta.env.VITE_PRODUCT_NAME || "Element Call"}
+            />
+          </div>
+        )}
+        {showControls && <div className={styles.buttons}>{buttons}</div>}
+        {!mobile && showControls && (
+          <LayoutToggle
+            className={styles.layout}
+            layout={gridMode}
+            setLayout={setGridMode}
+            onTouchEnd={onLayoutToggleTouchEnd}
+          />
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={styles.inRoom}
+      ref={containerRef}
+      onTouchStart={onTouchStart}
+      onTouchEnd={onTouchEnd}
+      onTouchCancel={onTouchCancel}
+      onPointerMove={onPointerMove}
+      onPointerOut={onPointerOut}
+    >
+      {showHeader &&
+        (hideHeader ? (
+          // Cosmetic header to fill out space while still affecting the bounds
+          // of the grid
+          <div
+            className={classNames(styles.header, styles.filler)}
+            ref={headerRef}
+          />
+        ) : (
+          <Header className={styles.header} ref={headerRef}>
             <LeftNav>
               <RoomHeaderInfo
                 id={matrixInfo.roomId}
                 name={matrixInfo.roomName}
                 avatarUrl={matrixInfo.roomAvatar}
-                encrypted={matrixInfo.roomEncrypted}
+                encrypted={matrixInfo.e2eeSystem.kind !== E2eeType.NONE}
                 participantCount={participantCount}
               />
             </LeftNav>
@@ -442,24 +572,19 @@ export const InCallView: FC<InCallViewProps> = subscribe(
               )}
             </RightNav>
           </Header>
-        )}
-        <div className={styles.controlsOverlay}>
-          <RoomAudioRenderer />
-          {renderContent()}
-          {footer}
-        </div>
-        {!noControls && (
-          <RageshakeRequestModal {...rageshakeRequestModalProps} />
-        )}
-        <SettingsModal
-          client={client}
-          roomId={rtcSession.room.roomId}
-          open={settingsModalOpen}
-          onDismiss={closeSettings}
-          tab={settingsTab}
-          onTabChange={setSettingsTab}
-        />
-      </div>
-    );
-  },
-);
+        ))}
+      <RoomAudioRenderer />
+      {renderContent()}
+      {footer}
+      {!noControls && <RageshakeRequestModal {...rageshakeRequestModalProps} />}
+      <SettingsModal
+        client={client}
+        roomId={rtcSession.room.roomId}
+        open={settingsModalOpen}
+        onDismiss={closeSettings}
+        tab={settingsTab}
+        onTabChange={setSettingsTab}
+      />
+    </div>
+  );
+};

src/room/InviteModal.tsx

@@ -18,15 +18,17 @@ import { FC, MouseEvent, useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Room } from "matrix-js-sdk";
 import { Button, Text } from "@vector-im/compound-web";
-import LinkIcon from "@vector-im/compound-design-tokens/icons/link.svg?react";
-import CheckIcon from "@vector-im/compound-design-tokens/icons/check.svg?react";
+import {
+  LinkIcon,
+  CheckIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
 import useClipboard from "react-use-clipboard";
 
 import { Modal } from "../Modal";
 import { getAbsoluteRoomUrl } from "../matrix-utils";
 import styles from "./InviteModal.module.css";
-import { useRoomSharedKey } from "../e2ee/sharedKeyManagement";
 import { Toast } from "../Toast";
+import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
 
 interface Props {
   room: Room;
@@ -36,11 +38,11 @@ interface Props {
 
 export const InviteModal: FC<Props> = ({ room, open, onDismiss }) => {
   const { t } = useTranslation();
-  const roomSharedKey = useRoomSharedKey(room.roomId);
+  const e2eeSystem = useRoomEncryptionSystem(room.roomId);
+
   const url = useMemo(
-    () =>
-      getAbsoluteRoomUrl(room.roomId, room.name, roomSharedKey ?? undefined),
-    [room, roomSharedKey],
+    () => getAbsoluteRoomUrl(room.roomId, e2eeSystem, room.name),
+    [e2eeSystem, room.name, room.roomId],
   );
   const [, setCopied] = useClipboard(url);
   const [toastOpen, setToastOpen] = useState(false);

src/room/LayoutToggle.module.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2023 New Vector Ltd
+Copyright 2023-2024 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,22 +21,15 @@ limitations under the License.
   background: var(--cpd-color-bg-canvas-default);
   box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.5);
   display: flex;
+  position: relative;
 }
 
 .toggle input {
   appearance: none;
-  /*
-   * Safari puts a margin on these, which is not removed via appearance: none
-   * mobile safari also has them take up space in the DOM, so set width 0
-   */
+  /* Safari puts a margin on these, which is not removed via appearance: none */
   margin: 0;
-  width: 0;
-  outline: none !important;
-}
-
-.toggle label {
-  display: block;
-  padding: calc(2.5 * var(--cpd-space-1x));
+  block-size: var(--cpd-space-11x);
+  inline-size: var(--cpd-space-11x);
   cursor: pointer;
   border-radius: var(--cpd-radius-pill-effect);
   color: var(--cpd-color-icon-primary);
@@ -44,41 +37,52 @@ limitations under the License.
   box-shadow: var(--small-drop-shadow);
 }
 
+.toggle svg {
+  display: block;
+  position: absolute;
+  padding: calc(2.5 * var(--cpd-space-1x));
+  pointer-events: none;
+  color: var(--cpd-color-icon-primary);
+}
+
+.toggle svg:nth-child(2) {
+  inset-inline-start: 2px;
+}
+
+.toggle svg:nth-child(4) {
+  inset-inline-end: 2px;
+}
+
 @media (hover: hover) {
-  .toggle label:hover {
+  .toggle input:hover {
     background: var(--cpd-color-bg-action-secondary-hovered);
     box-shadow: none;
   }
 }
 
-.toggle label:active {
+.toggle input:active {
   background: var(--cpd-color-bg-action-secondary-hovered);
   box-shadow: none;
 }
 
-.toggle input:checked + label {
-  color: var(--cpd-color-icon-on-solid-primary);
+.toggle input:checked {
   background: var(--cpd-color-bg-action-primary-rest);
 }
 
+.toggle input:checked + svg {
+  color: var(--cpd-color-icon-on-solid-primary);
+}
+
 @media (hover: hover) {
-  .toggle input:checked + label:hover {
+  .toggle input:checked:hover {
     background: var(--cpd-color-bg-action-primary-hovered);
   }
 }
 
-.toggle input:checked + label:active {
+.toggle input:checked:active {
   background: var(--cpd-color-bg-action-primary-hovered);
 }
 
-.toggle label > svg {
-  display: block;
-}
-
-.toggle label:last-child {
-  margin-inline-start: 5px;
-}
-
-.toggle input:focus-visible + label {
-  outline: auto;
+.toggle input:first-child {
+  margin-inline-end: 5px;
 }

src/room/LayoutToggle.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2023 New Vector Ltd
+Copyright 2023-2024 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,11 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { ChangeEvent, FC, useCallback, useId } from "react";
+import { ChangeEvent, FC, TouchEvent, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { Tooltip } from "@vector-im/compound-web";
-import SpotlightIcon from "@vector-im/compound-design-tokens/icons/spotlight.svg?react";
-import GridIcon from "@vector-im/compound-design-tokens/icons/grid.svg?react";
+import {
+  SpotlightIcon,
+  GridIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
 import classNames from "classnames";
 
 import styles from "./LayoutToggle.module.css";
@@ -29,9 +31,15 @@ interface Props {
   layout: Layout;
   setLayout: (layout: Layout) => void;
   className?: string;
+  onTouchEnd?: (e: TouchEvent) => void;
 }
 
-export const LayoutToggle: FC<Props> = ({ layout, setLayout, className }) => {
+export const LayoutToggle: FC<Props> = ({
+  layout,
+  setLayout,
+  className,
+  onTouchEnd,
+}) => {
   const { t } = useTranslation();
 
   const onChange = useCallback(
@@ -39,37 +47,30 @@ export const LayoutToggle: FC<Props> = ({ layout, setLayout, className }) => {
     [setLayout],
   );
 
-  const spotlightId = useId();
-  const gridId = useId();
-
   return (
     <div className={classNames(styles.toggle, className)}>
-      <input
-        id={spotlightId}
-        type="radio"
-        name="layout"
-        value="spotlight"
-        checked={layout === "spotlight"}
-        onChange={onChange}
-      />
       <Tooltip label={t("layout_spotlight_label")}>
-        <label htmlFor={spotlightId}>
-          <SpotlightIcon aria-label={t("layout_spotlight_label")} />
-        </label>
+        <input
+          type="radio"
+          name="layout"
+          value="spotlight"
+          checked={layout === "spotlight"}
+          onChange={onChange}
+          onTouchEnd={onTouchEnd}
+        />
       </Tooltip>
-      <input
-        id={gridId}
-        type="radio"
-        name="layout"
-        value="grid"
-        checked={layout === "grid"}
-        onChange={onChange}
-      />
+      <SpotlightIcon aria-hidden width={24} height={24} />
       <Tooltip label={t("layout_grid_label")}>
-        <label htmlFor={gridId}>
-          <GridIcon aria-label={t("layout_grid_label")} />
-        </label>
+        <input
+          type="radio"
+          name="layout"
+          value="grid"
+          checked={layout === "grid"}
+          onChange={onChange}
+          onTouchEnd={onTouchEnd}
+        />
       </Tooltip>
+      <GridIcon aria-hidden width={24} height={24} />
     </div>
   );
 };

src/room/LobbyView.module.css

@@ -25,6 +25,18 @@ limitations under the License.
   height: 100%;
 }
 
+.wait {
+  color: var(--cpd-color-text-primary) !important;
+  background-color: var(--cpd-color-bg-canvas-default) !important;
+  /* relative colors are only supported on chromium based browsers */
+  background-color: rgb(
+    from var(--cpd-color-bg-canvas-default) r g b / 0.5
+  ) !important;
+}
+.wait > svg {
+  color: var(--cpd-color-theme-primary) !important;
+}
+
 @media (max-width: 500px) {
   .join {
     width: 100%;

src/room/LobbyView.tsx

@@ -21,8 +21,8 @@ import { Button, Link } from "@vector-im/compound-web";
 import classNames from "classnames";
 import { useHistory } from "react-router-dom";
 
-import styles from "./LobbyView.module.css";
 import inCallStyles from "./InCallView.module.css";
+import styles from "./LobbyView.module.css";
 import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
 import { useLocationNavigation } from "../useLocationNavigation";
 import { MatrixInfo, VideoPreview } from "./VideoPreview";
@@ -36,16 +36,19 @@ import {
 } from "../button/Button";
 import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal";
 import { useMediaQuery } from "../useMediaQuery";
+import { E2eeType } from "../e2ee/e2eeType";
 
 interface Props {
   client: MatrixClient;
   matrixInfo: MatrixInfo;
   muteStates: MuteStates;
   onEnter: () => void;
+  enterLabel?: JSX.Element | string;
   confineToRoom: boolean;
   hideHeader: boolean;
-  participantCount: number;
+  participantCount: number | null;
   onShareClick: (() => void) | null;
+  waitingForInvite?: boolean;
 }
 
 export const LobbyView: FC<Props> = ({
@@ -53,10 +56,12 @@ export const LobbyView: FC<Props> = ({
   matrixInfo,
   muteStates,
   onEnter,
+  enterLabel,
   confineToRoom,
   hideHeader,
   participantCount,
   onShareClick,
+  waitingForInvite,
 }) => {
   const { t } = useTranslation();
   useLocationNavigation();
@@ -104,7 +109,7 @@ export const LobbyView: FC<Props> = ({
                 id={matrixInfo.roomId}
                 name={matrixInfo.roomName}
                 avatarUrl={matrixInfo.roomAvatar}
-                encrypted={matrixInfo.roomEncrypted}
+                encrypted={matrixInfo.e2eeSystem.kind !== E2eeType.NONE}
                 participantCount={participantCount}
               />
             </LeftNav>
@@ -116,12 +121,16 @@ export const LobbyView: FC<Props> = ({
         <div className={styles.content}>
           <VideoPreview matrixInfo={matrixInfo} muteStates={muteStates}>
             <Button
-              className={styles.join}
-              size="lg"
-              onClick={onEnter}
+              className={classNames(styles.join, {
+                [styles.wait]: waitingForInvite,
+              })}
+              size={waitingForInvite ? "sm" : "lg"}
+              onClick={() => {
+                if (!waitingForInvite) onEnter();
+              }}
               data-testid="lobby_joinCall"
             >
-              {t("lobby.join_button")}
+              {enterLabel ?? t("lobby.join_button")}
             </Button>
           </VideoPreview>
           {!recentsButtonInFooter && recentsButton}

src/room/MuteStates.ts

@@ -14,16 +14,24 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Dispatch, SetStateAction, useMemo } from "react";
+import {
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useMemo,
+} from "react";
+import { IWidgetApiRequest } from "matrix-widget-api";
 
 import { MediaDevice, useMediaDevices } from "../livekit/MediaDevicesContext";
 import { useReactiveState } from "../useReactiveState";
+import { ElementWidgetActions, widget } from "../widget";
 
 /**
- * If there already is this many participants in the call, we automatically mute
- * the user
+ * If there already are this many participants in the call, we automatically mute
+ * the user.
  */
-const MUTE_PARTICIPANT_COUNT = 8;
+export const MUTE_PARTICIPANT_COUNT = 8;
 
 interface DeviceAvailable {
   enabled: boolean;
@@ -51,27 +59,85 @@ function useMuteState(
   device: MediaDevice,
   enabledByDefault: () => boolean,
 ): MuteState {
-  const [enabled, setEnabled] = useReactiveState<boolean>(
-    (prev) => device.available.length > 0 && (prev ?? enabledByDefault()),
+  const [enabled, setEnabled] = useReactiveState<boolean | undefined>(
+    (prev) =>
+      device.available.length > 0 ? (prev ?? enabledByDefault()) : undefined,
     [device],
   );
   return useMemo(
     () =>
       device.available.length === 0
         ? deviceUnavailable
-        : { enabled, setEnabled },
+        : {
+            enabled: enabled ?? false,
+            setEnabled: setEnabled as Dispatch<SetStateAction<boolean>>,
+          },
     [device, enabled, setEnabled],
   );
 }
 
-export function useMuteStates(participantCount: number): MuteStates {
+export function useMuteStates(): MuteStates {
   const devices = useMediaDevices();
 
-  const audio = useMuteState(
-    devices.audioInput,
-    () => participantCount <= MUTE_PARTICIPANT_COUNT,
-  );
+  const audio = useMuteState(devices.audioInput, () => true);
   const video = useMuteState(devices.videoInput, () => true);
 
+  useEffect(() => {
+    widget?.api.transport.send(ElementWidgetActions.DeviceMute, {
+      audio_enabled: audio.enabled,
+      video_enabled: video.enabled,
+    });
+  }, [audio, video]);
+
+  const onMuteStateChangeRequest = useCallback(
+    (ev: CustomEvent<IWidgetApiRequest>) => {
+      // First copy the current state into our new state.
+      const newState = {
+        audio_enabled: audio.enabled,
+        video_enabled: video.enabled,
+      };
+      // Update new state if there are any requested changes from the widget action
+      // in `ev.detail.data`.
+      if (
+        ev.detail.data.audio_enabled != null &&
+        typeof ev.detail.data.audio_enabled === "boolean"
+      ) {
+        audio.setEnabled?.(ev.detail.data.audio_enabled);
+        newState.audio_enabled = ev.detail.data.audio_enabled;
+      }
+      if (
+        ev.detail.data.video_enabled != null &&
+        typeof ev.detail.data.video_enabled === "boolean"
+      ) {
+        video.setEnabled?.(ev.detail.data.video_enabled);
+        newState.video_enabled = ev.detail.data.video_enabled;
+      }
+      // Always reply with the new (now "current") state.
+      // This allows to also use this action to just get the unaltered current state
+      // by using a fromWidget request with: `ev.detail.data = {}`
+      widget!.api.transport.reply(ev.detail, newState);
+    },
+    [audio, video],
+  );
+  useEffect(() => {
+    // We setup a event listener for the widget action ElementWidgetActions.DeviceMute.
+    if (widget) {
+      // only setup the listener in widget mode
+
+      widget.lazyActions.on(
+        ElementWidgetActions.DeviceMute,
+        onMuteStateChangeRequest,
+      );
+
+      return (): void => {
+        // return a call to `off` so that we always clean up our listener.
+        widget?.lazyActions.off(
+          ElementWidgetActions.DeviceMute,
+          onMuteStateChangeRequest,
+        );
+      };
+    }
+  }, [onMuteStateChangeRequest]);
+
   return useMemo(() => ({ audio, video }), [audio, video]);
 }

src/room/RoomPage.tsx

@@ -15,8 +15,9 @@ limitations under the License.
 */
 
 import { FC, useEffect, useState, useCallback, ReactNode } from "react";
-import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 import { logger } from "matrix-js-sdk/src/logger";
+import { useTranslation } from "react-i18next";
+import { CheckIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { useClientLegacy } from "../ClientContext";
 import { ErrorView, LoadingView } from "../FullScreenView";
@@ -25,11 +26,19 @@ import { GroupCallLoader } from "./GroupCallLoader";
 import { GroupCallView } from "./GroupCallView";
 import { useRoomIdentifier, useUrlParams } from "../UrlParams";
 import { useRegisterPasswordlessUser } from "../auth/useRegisterPasswordlessUser";
-import { useOptInAnalytics } from "../settings/useSetting";
 import { HomePage } from "../home/HomePage";
 import { platform } from "../Platform";
 import { AppSelectionModal } from "./AppSelectionModal";
 import { widget } from "../widget";
+import { GroupCallStatus } from "./useLoadGroupCall";
+import { LobbyView } from "./LobbyView";
+import { E2eeType } from "../e2ee/e2eeType";
+import { useProfile } from "../profile/useProfile";
+import { useMuteStates } from "./MuteStates";
+import {
+  useSetting,
+  optInAnalytics as optInAnalyticsSetting,
+} from "../settings/settings";
 
 export const RoomPage: FC = () => {
   const {
@@ -40,7 +49,7 @@ export const RoomPage: FC = () => {
     displayName,
     skipLobby,
   } = useUrlParams();
-
+  const { t } = useTranslation();
   const { roomAlias, roomId, viaServers } = useRoomIdentifier();
 
   const roomIdOrAlias = roomId ?? roomAlias;
@@ -48,17 +57,14 @@ export const RoomPage: FC = () => {
     logger.error("No room specified");
   }
 
-  const [optInAnalytics, setOptInAnalytics] = useOptInAnalytics();
   const { registerPasswordlessUser } = useRegisterPasswordlessUser();
   const [isRegistering, setIsRegistering] = useState(false);
 
-  useEffect(() => {
-    // During the beta, opt into analytics by default
-    if (optInAnalytics === null && setOptInAnalytics) setOptInAnalytics(true);
-  }, [optInAnalytics, setOptInAnalytics]);
-
   const { loading, authenticated, client, error, passwordlessUser } =
     useClientLegacy();
+  const { avatarUrl, displayName: userDisplayName } = useProfile(client);
+
+  const muteStates = useMuteStates();
 
   useEffect(() => {
     // If we've finished loading, are not already authed and we've been given a display name as
@@ -77,19 +83,87 @@ export const RoomPage: FC = () => {
     registerPasswordlessUser,
   ]);
 
+  const [optInAnalytics, setOptInAnalytics] = useSetting(optInAnalyticsSetting);
+  useEffect(() => {
+    // During the beta, opt into analytics by default
+    if (optInAnalytics === null && setOptInAnalytics) setOptInAnalytics(true);
+  }, [optInAnalytics, setOptInAnalytics]);
+
   const groupCallView = useCallback(
-    (rtcSession: MatrixRTCSession) => (
-      <GroupCallView
-        client={client!}
-        rtcSession={rtcSession}
-        isPasswordlessUser={passwordlessUser}
-        confineToRoom={confineToRoom}
-        preload={preload}
-        skipLobby={skipLobby}
-        hideHeader={hideHeader}
-      />
-    ),
-    [client, passwordlessUser, confineToRoom, preload, hideHeader, skipLobby],
+    (groupCallState: GroupCallStatus): JSX.Element => {
+      switch (groupCallState.kind) {
+        case "loaded":
+          return (
+            <GroupCallView
+              client={client!}
+              rtcSession={groupCallState.rtcSession}
+              isPasswordlessUser={passwordlessUser}
+              confineToRoom={confineToRoom}
+              preload={preload}
+              skipLobby={skipLobby}
+              hideHeader={hideHeader}
+              muteStates={muteStates}
+            />
+          );
+        case "waitForInvite":
+        case "canKnock": {
+          const knock =
+            groupCallState.kind === "canKnock" ? groupCallState.knock : null;
+          const label: string | JSX.Element =
+            groupCallState.kind === "canKnock" ? (
+              t("lobby.ask_to_join")
+            ) : (
+              <>
+                {t("lobby.waiting_for_invite")}
+                <CheckIcon />
+              </>
+            );
+          return (
+            <LobbyView
+              client={client!}
+              matrixInfo={{
+                userId: client!.getUserId() ?? "",
+                displayName: userDisplayName ?? "",
+                avatarUrl: avatarUrl ?? "",
+                roomAlias: null,
+                roomId: groupCallState.roomSummary.room_id,
+                roomName: groupCallState.roomSummary.name ?? "",
+                roomAvatar: groupCallState.roomSummary.avatar_url ?? null,
+                e2eeSystem: {
+                  kind: groupCallState.roomSummary[
+                    "im.nheko.summary.encryption"
+                  ]
+                    ? E2eeType.PER_PARTICIPANT
+                    : E2eeType.NONE,
+                },
+              }}
+              onEnter={(): void => knock?.()}
+              enterLabel={label}
+              waitingForInvite={groupCallState.kind === "waitForInvite"}
+              confineToRoom={confineToRoom}
+              hideHeader={hideHeader}
+              participantCount={null}
+              muteStates={muteStates}
+              onShareClick={null}
+            />
+          );
+        }
+        default:
+          return <> </>;
+      }
+    },
+    [
+      client,
+      passwordlessUser,
+      confineToRoom,
+      preload,
+      skipLobby,
+      hideHeader,
+      muteStates,
+      t,
+      userDisplayName,
+      avatarUrl,
+    ],
   );
 
   let content: ReactNode;
@@ -118,9 +192,9 @@ export const RoomPage: FC = () => {
     <>
       {content}
       {/* On Android and iOS, show a prompt to launch the mobile app. */}
-      {appPrompt && (platform === "android" || platform === "ios") && (
-        <AppSelectionModal roomId={roomId} />
-      )}
+      {appPrompt &&
+        (platform === "android" || platform === "ios") &&
+        roomId && <AppSelectionModal roomId={roomId} />}
     </>
   );
 };

src/room/VideoPreview.module.css

@@ -18,20 +18,12 @@ limitations under the License.
   margin-inline: var(--inline-content-inset);
   min-block-size: 0;
   block-size: 50vh;
-}
-
-.preview.content {
-  margin-inline: 0;
-}
-
-.content {
+  border-radius: var(--cpd-space-4x);
   position: relative;
-  block-size: 100%;
-  inline-size: 100%;
   overflow: hidden;
 }
 
-.content video {
+.preview > video {
   width: 100%;
   height: 100%;
   object-fit: cover;
@@ -69,12 +61,20 @@ limitations under the License.
   );
 }
 
-.preview.content .buttonBar {
-  padding-inline: var(--inline-content-inset);
-}
-
 @media (min-aspect-ratio: 1 / 1) {
-  .preview video {
+  .preview > video {
     aspect-ratio: 16 / 9;
   }
 }
+
+@media (max-width: 550px) {
+  .preview {
+    margin-inline: 0;
+    border-radius: 0;
+    block-size: 100%;
+  }
+
+  .buttonBar {
+    padding-inline: var(--inline-content-inset);
+  }
+}

src/room/VideoPreview.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 - 2023 New Vector Ltd
+Copyright 2022 - 2024 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,24 +14,20 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { useEffect, useMemo, useRef, FC, ReactNode } from "react";
+import { useEffect, useMemo, useRef, FC, ReactNode, useCallback } from "react";
 import useMeasure from "react-use-measure";
 import { ResizeObserver } from "@juggle/resize-observer";
 import { usePreviewTracks } from "@livekit/components-react";
-import {
-  CreateLocalTracksOptions,
-  LocalVideoTrack,
-  Track,
-} from "livekit-client";
+import { LocalVideoTrack, Track } from "livekit-client";
 import classNames from "classnames";
 import { logger } from "matrix-js-sdk/src/logger";
-import { Glass } from "@vector-im/compound-web";
 
 import { Avatar } from "../Avatar";
 import styles from "./VideoPreview.module.css";
 import { useMediaDevices } from "../livekit/MediaDevicesContext";
 import { MuteStates } from "./MuteStates";
-import { useMediaQuery } from "../useMediaQuery";
+import { useInitial } from "../useInitial";
+import { EncryptionSystem } from "../e2ee/sharedKeyManagement";
 
 export type MatrixInfo = {
   userId: string;
@@ -41,7 +37,7 @@ export type MatrixInfo = {
   roomName: string;
   roomAlias: string | null;
   roomAvatar: string | null;
-  roomEncrypted: boolean;
+  e2eeSystem: EncryptionSystem;
 };
 
 interface Props {
@@ -62,30 +58,42 @@ export const VideoPreview: FC<Props> = ({
   // 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,
-  };
+  const initialAudioOptions = useInitial(
+    () =>
+      muteStates.audio.enabled && { deviceId: devices.audioInput.selectedId },
+  );
 
-  const tracks = usePreviewTracks(
-    {
+  const localTrackOptions = useMemo(
+    () => ({
       // 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),
+      audio: Object.assign({}, initialAudioOptions),
       video: muteStates.video.enabled && {
         deviceId: devices.videoInput.selectedId,
       },
-    },
-    (error) => {
+    }),
+    [
+      initialAudioOptions,
+      devices.videoInput.selectedId,
+      muteStates.video.enabled,
+    ],
+  );
+
+  const onError = useCallback(
+    (error: Error) => {
       logger.error("Error while creating preview Tracks:", error);
       muteStates.audio.setEnabled?.(false);
       muteStates.video.setEnabled?.(false);
     },
+    [muteStates.audio, muteStates.video],
   );
+
+  const tracks = usePreviewTracks(localTrackOptions, onError);
+
   const videoTrack = useMemo(
     () =>
       tracks?.find((t) => t.kind === Track.Kind.Video) as
@@ -101,13 +109,13 @@ export const VideoPreview: FC<Props> = ({
     if (videoEl.current) {
       videoTrack?.attach(videoEl.current);
     }
-    return () => {
+    return (): void => {
       videoTrack?.detach();
     };
   }, [videoTrack]);
 
-  const content = (
-    <>
+  return (
+    <div className={classNames(styles.preview)} ref={previewRef}>
       <video
         ref={videoEl}
         muted
@@ -127,21 +135,6 @@ export const VideoPreview: FC<Props> = ({
         </div>
       )}
       <div className={styles.buttonBar}>{children}</div>
-    </>
-  );
-
-  return useMediaQuery("(max-width: 550px)") ? (
-    <div
-      className={classNames(styles.preview, styles.content)}
-      ref={previewRef}
-    >
-      {content}
     </div>
-  ) : (
-    <Glass className={styles.preview}>
-      <div className={styles.content} ref={previewRef}>
-        {content}
-      </div>
-    </Glass>
   );
 };

src/room/useActiveFocus.ts

@@ -21,33 +21,28 @@ import {
 import { useCallback, useEffect, useState } from "react";
 import { deepCompare } from "matrix-js-sdk/src/utils";
 import { logger } from "matrix-js-sdk/src/logger";
-
-import { LivekitFocus } from "../livekit/LivekitFocus";
-
-function getActiveFocus(
-  rtcSession: MatrixRTCSession,
-): LivekitFocus | undefined {
-  const oldestMembership = rtcSession.getOldestMembership();
-  const focus = oldestMembership?.getActiveFoci()[0] as LivekitFocus;
-
-  return focus;
-}
+import {
+  LivekitFocus,
+  isLivekitFocus,
+} from "matrix-js-sdk/src/matrixrtc/LivekitFocus";
 
 /**
  * Gets the currently active (livekit) focus for a MatrixRTC session
  * This logic is specific to livekit foci where the whole call must use one
  * and the same focus.
  */
-export function useActiveFocus(
+export function useActiveLivekitFocus(
   rtcSession: MatrixRTCSession,
 ): LivekitFocus | undefined {
-  const [activeFocus, setActiveFocus] = useState(() =>
-    getActiveFocus(rtcSession),
-  );
+  const [activeFocus, setActiveFocus] = useState(() => {
+    const f = rtcSession.getActiveFocus();
+    // Only handle foci with type="livekit" for now.
+    return !!f && isLivekitFocus(f) ? f : undefined;
+  });
 
   const onMembershipsChanged = useCallback(() => {
-    const newActiveFocus = getActiveFocus(rtcSession);
-
+    const newActiveFocus = rtcSession.getActiveFocus();
+    if (!!newActiveFocus && !isLivekitFocus(newActiveFocus)) return;
     if (!deepCompare(activeFocus, newActiveFocus)) {
       const oldestMembership = rtcSession.getOldestMembership();
       logger.warn(
@@ -64,7 +59,7 @@ export function useActiveFocus(
       onMembershipsChanged,
     );
 
-    return () => {
+    return (): void => {
       rtcSession.off(
         MatrixRTCSessionEvent.MembershipsChanged,
         onMembershipsChanged,

src/room/useFullscreen.ts

@@ -1,114 +0,0 @@
-/*
-Copyright 2023 New Vector Ltd
-
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { logger } from "matrix-js-sdk/src/logger";
-import { useCallback, useLayoutEffect, useRef } from "react";
-
-import { useReactiveState } from "../useReactiveState";
-import { useEventTarget } from "../useEvents";
-import { TileDescriptor } from "../state/CallViewModel";
-
-const isFullscreen = (): boolean =>
-  Boolean(document.fullscreenElement) ||
-  Boolean(document.webkitFullscreenElement);
-
-function enterFullscreen(): void {
-  if (document.body.requestFullscreen) {
-    document.body.requestFullscreen();
-  } else if (document.body.webkitRequestFullscreen) {
-    document.body.webkitRequestFullscreen();
-  } else {
-    logger.error("No available fullscreen API!");
-  }
-}
-
-function exitFullscreen(): void {
-  if (document.exitFullscreen) {
-    document.exitFullscreen();
-  } else if (document.webkitExitFullscreen) {
-    document.webkitExitFullscreen();
-  } else {
-    logger.error("No available fullscreen API!");
-  }
-}
-
-function useFullscreenChange(onFullscreenChange: () => void): void {
-  useEventTarget(document.body, "fullscreenchange", onFullscreenChange);
-  useEventTarget(document.body, "webkitfullscreenchange", onFullscreenChange);
-}
-
-/**
- * Provides callbacks for controlling the full-screen view, which can hold one
- * item at a time.
- */
-export function useFullscreen<T>(items: TileDescriptor<T>[]): {
-  fullscreenItem: TileDescriptor<T> | null;
-  toggleFullscreen: (itemId: string) => void;
-  exitFullscreen: () => void;
-} {
-  const [fullscreenItem, setFullscreenItem] =
-    useReactiveState<TileDescriptor<T> | null>(
-      (prevItem) =>
-        prevItem == null
-          ? null
-          : items.find((i) => i.id === prevItem.id) ?? null,
-      [items],
-    );
-
-  const latestItems = useRef<TileDescriptor<T>[]>(items);
-  latestItems.current = items;
-
-  const latestFullscreenItem = useRef<TileDescriptor<T> | null>(fullscreenItem);
-  latestFullscreenItem.current = fullscreenItem;
-
-  const toggleFullscreen = useCallback(
-    (itemId: string) => {
-      setFullscreenItem(
-        latestFullscreenItem.current === null
-          ? latestItems.current.find((i) => i.id === itemId) ?? null
-          : null,
-      );
-    },
-    [setFullscreenItem],
-  );
-
-  const exitFullscreenCallback = useCallback(
-    () => setFullscreenItem(null),
-    [setFullscreenItem],
-  );
-
-  useLayoutEffect(() => {
-    // Determine whether we need to change the fullscreen state
-    if (isFullscreen() !== (fullscreenItem !== null)) {
-      (fullscreenItem === null ? exitFullscreen : enterFullscreen)();
-    }
-  }, [fullscreenItem]);
-
-  // Detect when the user exits fullscreen through an external mechanism like
-  // browser chrome or the escape key
-  useFullscreenChange(
-    useCallback(() => {
-      if (!isFullscreen()) setFullscreenItem(null);
-    }, [setFullscreenItem]),
-  );
-
-  return {
-    fullscreenItem,
-    toggleFullscreen,
-    exitFullscreen: exitFullscreenCallback,
-  };
-}

src/room/useLoadGroupCall.ts

@@ -14,15 +14,22 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
-import { ClientEvent, MatrixClient } from "matrix-js-sdk/src/client";
+import { EventType } from "matrix-js-sdk/src/@types/event";
+import {
+  ClientEvent,
+  MatrixClient,
+  RoomSummary,
+} from "matrix-js-sdk/src/client";
 import { SyncState } from "matrix-js-sdk/src/sync";
-import { useTranslation } from "react-i18next";
 import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+import { RoomEvent, Room } from "matrix-js-sdk/src/models/room";
+import { KnownMembership } from "matrix-js-sdk/src/types";
+import { JoinRule } from "matrix-js-sdk";
+import { useTranslation } from "react-i18next";
 
-import type { Room } from "matrix-js-sdk/src/models/room";
-import type { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
+import { widget } from "../widget";
 
 export type GroupCallLoaded = {
   kind: "loaded";
@@ -38,14 +45,48 @@ export type GroupCallLoading = {
   kind: "loading";
 };
 
+export type GroupCallWaitForInvite = {
+  kind: "waitForInvite";
+  roomSummary: RoomSummary;
+};
+
+export type GroupCallCanKnock = {
+  kind: "canKnock";
+  roomSummary: RoomSummary;
+  knock: () => void;
+};
+
 export type GroupCallStatus =
   | GroupCallLoaded
   | GroupCallLoadFailed
-  | GroupCallLoading;
+  | GroupCallLoading
+  | GroupCallWaitForInvite
+  | GroupCallCanKnock;
 
-export interface GroupCallLoadState {
-  error?: Error;
-  groupCall?: GroupCall;
+export class CallTerminatedMessage extends Error {
+  /**
+   * @param messageBody The message explaining the kind of termination (kick, ban, knock reject, etc.) (translated)
+   */
+  public messageBody: string;
+  /**
+   * @param reason The user provided reason for the termination (kick/ban)
+   */
+  public reason?: string;
+  /**
+   *
+   * @param messageTitle The title of the call ended screen message (translated)
+   * @param messageBody The message explaining the kind of termination (kick, ban, knock reject, etc.) (translated)
+   * @param reason The user provided reason for the termination (kick/ban)
+   */
+  public constructor(
+    messageTitle: string,
+    messageBody: string,
+    reason?: string,
+  ) {
+    super(messageTitle);
+    this.messageBody = messageBody;
+    this.reason = reason;
+  }
 }
 
 export const useLoadGroupCall = (
@@ -53,36 +94,190 @@ export const useLoadGroupCall = (
   roomIdOrAlias: string,
   viaServers: string[],
 ): GroupCallStatus => {
-  const { t } = useTranslation();
   const [state, setState] = useState<GroupCallStatus>({ kind: "loading" });
+  const activeRoom = useRef<Room>();
+  const { t } = useTranslation();
+
+  const bannedError = useCallback(
+    (): CallTerminatedMessage =>
+      new CallTerminatedMessage(
+        t("group_call_loader.banned_heading"),
+        t("group_call_loader.banned_body"),
+        leaveReason(),
+      ),
+    [t],
+  );
+  const knockRejectError = useCallback(
+    (): CallTerminatedMessage =>
+      new CallTerminatedMessage(
+        t("group_call_loader.knock_reject_heading"),
+        t("group_call_loader.knock_reject_body"),
+        leaveReason(),
+      ),
+    [t],
+  );
+  const removeNoticeError = useCallback(
+    (): CallTerminatedMessage =>
+      new CallTerminatedMessage(
+        t("group_call_loader.call_ended_heading"),
+        t("group_call_loader.call_ended_body"),
+        leaveReason(),
+      ),
+    [t],
+  );
+
+  const leaveReason = (): string =>
+    activeRoom.current?.currentState
+      .getStateEvents(EventType.RoomMember, activeRoom.current?.myUserId)
+      ?.getContent().reason;
 
   useEffect(() => {
+    const getRoomByAlias = async (alias: string): Promise<Room> => {
+      // We lowercase the localpart when we create the room, so we must lowercase
+      // it here too (we just do the whole alias). We can't do the same to room IDs
+      // though.
+      // Also, we explicitly look up the room alias here. We previously just tried to
+      // join anyway but the js-sdk recreates the room if you pass the alias for a
+      // room you're already joined to (which it probably ought not to).
+      let room: Room | null = null;
+      const lookupResult = await client.getRoomIdForAlias(alias.toLowerCase());
+      logger.info(`${alias} resolved to ${lookupResult.room_id}`);
+      room = client.getRoom(lookupResult.room_id);
+      if (!room) {
+        logger.info(`Room ${lookupResult.room_id} not found, joining.`);
+        room = await client.joinRoom(lookupResult.room_id, {
+          viaServers: lookupResult.servers,
+        });
+      } else {
+        logger.info(`Already in room ${lookupResult.room_id}, not rejoining.`);
+      }
+      return room;
+    };
+
+    const getRoomByKnocking = async (
+      roomId: string,
+      viaServers: string[],
+      onKnockSent: () => void,
+    ): Promise<Room> => {
+      let joinedRoom: Room | null = null;
+      await client.knockRoom(roomId, { viaServers });
+      onKnockSent();
+      const invitePromise = new Promise<void>((resolve, reject) => {
+        client.on(
+          RoomEvent.MyMembership,
+          async (room, membership, prevMembership) => {
+            if (roomId !== room.roomId) return;
+            activeRoom.current = room;
+            if (
+              membership === KnownMembership.Invite &&
+              prevMembership === KnownMembership.Knock
+            ) {
+              await client.joinRoom(room.roomId, { viaServers });
+              joinedRoom = room;
+              logger.log("Auto-joined %s", room.roomId);
+              resolve();
+            }
+            if (membership === KnownMembership.Ban) reject(bannedError());
+            if (membership === KnownMembership.Leave)
+              reject(knockRejectError());
+          },
+        );
+      });
+      await invitePromise;
+      if (!joinedRoom) {
+        throw new Error("Failed to join room after knocking.");
+      }
+      return joinedRoom;
+    };
+
     const fetchOrCreateRoom = async (): Promise<Room> => {
       let room: Room | null = null;
       if (roomIdOrAlias[0] === "#") {
-        // We lowercase the localpart when we create the room, so we must lowercase
-        // it here too (we just do the whole alias). We can't do the same to room IDs
-        // though.
-        // Also, we explicitly look up the room alias here. We previously just tried to
-        // join anyway but the js-sdk recreates the room if you pass the alias for a
-        // room you're already joined to (which it probably ought not to).
-        const lookupResult = await client.getRoomIdForAlias(
-          roomIdOrAlias.toLowerCase(),
-        );
-        logger.info(`${roomIdOrAlias} resolved to ${lookupResult.room_id}`);
-        room = client.getRoom(lookupResult.room_id);
-        if (!room) {
-          logger.info(`Room ${lookupResult.room_id} not found, joining.`);
-          room = await client.joinRoom(lookupResult.room_id, {
-            viaServers: lookupResult.servers,
+        const alias = roomIdOrAlias;
+        // The call uses a room alias
+        room = await getRoomByAlias(alias);
+        activeRoom.current = room;
+      } else {
+        // The call uses a room_id
+        const roomId = roomIdOrAlias;
+
+        // first try if the room already exists
+        //  - in widget mode
+        //  - in SPA mode if the user already joined the room
+        room = client.getRoom(roomId);
+        activeRoom.current = room ?? undefined;
+        const membership = room?.getMyMembership();
+        if (membership === KnownMembership.Join) {
+          // room already joined so we are done here already.
+          return room!;
+        }
+        if (widget)
+          // in widget mode we never should reach this point. (getRoom should return the room.)
+          throw new Error(
+            "Room not found. The widget-api did not pass over the relevant room events/information.",
+          );
+
+        if (membership === KnownMembership.Ban) {
+          throw bannedError();
+        } else if (membership === KnownMembership.Invite) {
+          room = await client.joinRoom(roomId, {
+            viaServers,
           });
         } else {
-          logger.info(
-            `Already in room ${lookupResult.room_id}, not rejoining.`,
-          );
+          // If the room does not exist we first search for it with viaServers
+          let roomSummary: RoomSummary | undefined = undefined;
+          try {
+            roomSummary = await client.getRoomSummary(roomId, viaServers);
+          } catch (error) {
+            // If the room summary endpoint is not supported we let it be undefined and treat this case like
+            // `JoinRule.Public`.
+            // This is how the logic was done before: "we expect any room id passed to EC
+            // to be for a public call" Which is definitely not ideal but worth a try if fetching
+            // the summary crashes.
+            logger.warn(
+              `Could not load room summary to decide whether we want to join or knock.
+              EC will fallback to join as if this would be a public room.
+              Reach out to your homeserver admin to ask them about supporting the \`/summary\` endpoint (im.nheko.summary):`,
+              error,
+            );
+          }
+          if (
+            roomSummary === undefined ||
+            roomSummary.join_rule === JoinRule.Public
+          ) {
+            room = await client.joinRoom(roomId, {
+              viaServers,
+            });
+          } else if (roomSummary.join_rule === JoinRule.Knock) {
+            // bind room summary in this scope so we have it stored in a binding of type `RoomSummary`
+            // instead of `RoomSummary | undefined`. Because we use it in a promise the linter does not accept
+            // the type check from the if condition above.
+            const _roomSummary = roomSummary;
+            let knock: () => void = () => {};
+            const userPressedAskToJoinPromise: Promise<void> = new Promise(
+              (resolve) => {
+                if (_roomSummary.membership !== KnownMembership.Knock) {
+                  knock = resolve;
+                } else {
+                  // resolve immediately if the user already knocked
+                  resolve();
+                }
+              },
+            );
+            setState({ kind: "canKnock", roomSummary: _roomSummary, knock });
+            await userPressedAskToJoinPromise;
+            room = await getRoomByKnocking(
+              roomSummary.room_id,
+              viaServers,
+              () =>
+                setState({ kind: "waitForInvite", roomSummary: _roomSummary }),
+            );
+          } else {
+            throw new Error(
+              `Room ${roomSummary.room_id} is not joinable. This likely means, that the conference owner has changed the room settings to private.`,
+            );
+          }
         }
-      } else {
-        room = await client.joinRoom(roomIdOrAlias, { viaServers });
       }
 
       logger.info(
@@ -95,6 +290,7 @@ export const useLoadGroupCall = (
 
     const fetchOrCreateGroupCall = async (): Promise<MatrixRTCSession> => {
       const room = await fetchOrCreateRoom();
+      activeRoom.current = room;
       logger.debug(`Fetched / joined room ${roomIdOrAlias}`);
 
       const rtcSession = client.matrixRTC.getRoomSession(room);
@@ -119,11 +315,33 @@ export const useLoadGroupCall = (
       }
     };
 
-    waitForClientSyncing()
-      .then(fetchOrCreateGroupCall)
-      .then((rtcSession) => setState({ kind: "loaded", rtcSession }))
-      .catch((error) => setState({ kind: "failed", error }));
-  }, [client, roomIdOrAlias, viaServers, t]);
+    const observeMyMembership = async (): Promise<void> => {
+      await new Promise((_, reject) => {
+        client.on(RoomEvent.MyMembership, async (_, membership) => {
+          if (membership === KnownMembership.Leave) reject(removeNoticeError());
+          if (membership === KnownMembership.Ban) reject(bannedError());
+        });
+      });
+    };
+
+    if (state.kind === "loading") {
+      logger.log("Start loading group call");
+      waitForClientSyncing()
+        .then(fetchOrCreateGroupCall)
+        .then((rtcSession) => setState({ kind: "loaded", rtcSession }))
+        .then(observeMyMembership)
+        .catch((error) => setState({ kind: "failed", error }));
+    }
+  }, [
+    bannedError,
+    client,
+    knockRejectError,
+    removeNoticeError,
+    roomIdOrAlias,
+    state,
+    t,
+    viaServers,
+  ]);
 
   return state;
 };

src/room/usePageUnload.ts

@@ -50,7 +50,7 @@ export function usePageUnload(callback: () => void): void {
     // @ts-ignore
     window.addEventListener("beforeunload", onBeforeUnload);
 
-    return () => {
+    return (): void => {
       window.removeEventListener("pagehide", onBeforeUnload);
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore

src/rtcSessionHelpers.ts

@@ -15,29 +15,90 @@ limitations under the License.
 */
 
 import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+import { logger } from "matrix-js-sdk/src/logger";
+import {
+  LivekitFocus,
+  LivekitFocusActive,
+  isLivekitFocus,
+  isLivekitFocusConfig,
+} from "matrix-js-sdk/src/matrixrtc/LivekitFocus";
 
 import { PosthogAnalytics } from "./analytics/PosthogAnalytics";
-import { LivekitFocus } from "./livekit/LivekitFocus";
 import { Config } from "./config/Config";
 import { ElementWidgetActions, WidgetHelpers, widget } from "./widget";
 
-function makeFocus(livekitAlias: string): LivekitFocus {
-  const urlFromConf = Config.get().livekit!.livekit_service_url;
-  if (!urlFromConf) {
-    throw new Error("No livekit_service_url is configured!");
-  }
+const FOCI_WK_KEY = "org.matrix.msc4143.rtc_foci";
 
+export function makeActiveFocus(): LivekitFocusActive {
   return {
     type: "livekit",
-    livekit_service_url: urlFromConf,
-    livekit_alias: livekitAlias,
+    focus_selection: "oldest_membership",
   };
 }
 
-export function enterRTCSession(
+async function makePreferredLivekitFoci(
+  rtcSession: MatrixRTCSession,
+  livekitAlias: string,
+): Promise<LivekitFocus[]> {
+  logger.log("Start building foci_preferred list: ", rtcSession.room.roomId);
+
+  const preferredFoci: LivekitFocus[] = [];
+
+  // Make the Focus from the running rtc session the highest priority one
+  // This minimizes how often we need to switch foci during a call.
+  const focusInUse = rtcSession.getFocusInUse();
+  if (focusInUse && isLivekitFocus(focusInUse)) {
+    logger.log("Adding livekit focus from oldest member: ", focusInUse);
+    preferredFoci.push(focusInUse);
+  }
+
+  // Prioritize the client well known over the configured sfu.
+  const wellKnownFoci =
+    rtcSession.room.client.getClientWellKnown()?.[FOCI_WK_KEY];
+  if (Array.isArray(wellKnownFoci)) {
+    preferredFoci.push(
+      ...wellKnownFoci
+        .filter((f) => !!f)
+        .filter(isLivekitFocusConfig)
+        .map((wellKnownFocus) => {
+          logger.log("Adding livekit focus from well known: ", wellKnownFocus);
+          return { ...wellKnownFocus, livekit_alias: livekitAlias };
+        }),
+    );
+  }
+
+  const urlFromConf = Config.get().livekit?.livekit_service_url;
+  if (urlFromConf) {
+    const focusFormConf: LivekitFocus = {
+      type: "livekit",
+      livekit_service_url: urlFromConf,
+      livekit_alias: livekitAlias,
+    };
+    logger.log("Adding livekit focus from config: ", focusFormConf);
+    preferredFoci.push(focusFormConf);
+  }
+
+  if (preferredFoci.length === 0)
+    throw new Error(
+      `No livekit_service_url is configured so we could not create a focus.
+    Currently we skip computing a focus based on other users in the room.`,
+    );
+
+  return preferredFoci;
+
+  // TODO: we want to do something like this:
+  //
+  // const focusOtherMembers = await focusFromOtherMembers(
+  //   rtcSession,
+  //   livekitAlias,
+  // );
+  // if (focusOtherMembers) preferredFoci.push(focusOtherMembers);
+}
+
+export async function enterRTCSession(
   rtcSession: MatrixRTCSession,
   encryptMedia: boolean,
-): void {
+): Promise<void> {
   PosthogAnalytics.instance.eventCallEnded.cacheStartCall(new Date());
   PosthogAnalytics.instance.eventCallStarted.track(rtcSession.room.roomId);
 
@@ -47,8 +108,18 @@ export function enterRTCSession(
 
   // right now we assume everything is a room-scoped call
   const livekitAlias = rtcSession.room.roomId;
-
-  rtcSession.joinRoomSession([makeFocus(livekitAlias)], encryptMedia);
+  const useDeviceSessionMemberEvents =
+    Config.get().features?.feature_use_device_session_member_events;
+  rtcSession.joinRoomSession(
+    await makePreferredLivekitFoci(rtcSession, livekitAlias),
+    makeActiveFocus(),
+    {
+      manageMediaKeys: encryptMedia,
+      ...(useDeviceSessionMemberEvents !== undefined && {
+        useLegacyMemberEvents: !useDeviceSessionMemberEvents,
+      }),
+    },
+  );
 }
 
 const widgetPostHangupProcedure = async (

src/settings/ProfileSettingsTab.tsx

@@ -47,18 +47,18 @@ export const ProfileSettingsTab: FC<Props> = ({ client }) => {
   useEffect(() => {
     const form = formRef.current!;
     // Auto-save when the user dismisses this component
-    return () => {
+    return (): void => {
       if (formChanged.current) {
         const data = new FormData(form);
         const displayNameDataEntry = data.get("displayName");
         const avatar = data.get("avatar");
 
         const avatarSize =
-          typeof avatar == "string" ? avatar.length : avatar?.size ?? 0;
+          typeof avatar == "string" ? avatar.length : (avatar?.size ?? 0);
         const displayName =
           typeof displayNameDataEntry == "string"
             ? displayNameDataEntry
-            : displayNameDataEntry?.name ?? null;
+            : (displayNameDataEntry?.name ?? null);
 
         if (!displayName) {
           return;

src/settings/SettingsModal.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { ChangeEvent, FC, Key, ReactNode } from "react";
+import { ChangeEvent, FC, Key, ReactNode, useCallback } from "react";
 import { Item } from "@react-stately/collections";
 import { Trans, useTranslation } from "react-i18next";
 import { MatrixClient } from "matrix-js-sdk";
@@ -29,14 +29,8 @@ import OverflowIcon from "../icons/Overflow.svg?react";
 import UserIcon from "../icons/User.svg?react";
 import FeedbackIcon from "../icons/Feedback.svg?react";
 import { SelectInput } from "../input/SelectInput";
-import {
-  useOptInAnalytics,
-  useDeveloperSettingsTab,
-  useShowConnectionStats,
-  isFirefox,
-} from "./useSetting";
 import { FieldRow, InputField } from "../input/Input";
-import { Body, Caption } from "../typography/Typography";
+import { Caption } from "../typography/Typography";
 import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
 import { ProfileSettingsTab } from "./ProfileSettingsTab";
 import { FeedbackSettingsTab } from "./FeedbackSettingsTab";
@@ -46,6 +40,13 @@ import {
   useMediaDeviceNames,
 } from "../livekit/MediaDevicesContext";
 import { widget } from "../widget";
+import {
+  useSetting,
+  optInAnalytics as optInAnalyticsSetting,
+  developerSettingsTab as developerSettingsTabSetting,
+  duplicateTiles as duplicateTilesSetting,
+} from "./settings";
+import { isFirefox } from "../Platform";
 
 type SettingsTab =
   | "audio"
@@ -76,11 +77,11 @@ export const SettingsModal: FC<Props> = ({
 }) => {
   const { t } = useTranslation();
 
-  const [optInAnalytics, setOptInAnalytics] = useOptInAnalytics();
-  const [developerSettingsTab, setDeveloperSettingsTab] =
-    useDeveloperSettingsTab();
-  const [showConnectionStats, setShowConnectionStats] =
-    useShowConnectionStats();
+  const [optInAnalytics, setOptInAnalytics] = useSetting(optInAnalyticsSetting);
+  const [developerSettingsTab, setDeveloperSettingsTab] = useSetting(
+    developerSettingsTabSetting,
+  );
+  const [duplicateTiles, setDuplicateTiles] = useSetting(duplicateTilesSetting);
 
   // Generate a `SelectInput` with a list of devices for a given device kind.
   const generateDeviceSelection = (
@@ -238,23 +239,40 @@ export const SettingsModal: FC<Props> = ({
         </>
       }
     >
-      <FieldRow>
-        <Body className={styles.fieldRowText}>
-          {t("version", {
-            version: import.meta.env.VITE_APP_VERSION || "dev",
-          })}
-        </Body>
-      </FieldRow>
+      <p>
+        {t("version", {
+          productName: import.meta.env.VITE_PRODUCT_NAME || "Element Call",
+          version: import.meta.env.VITE_APP_VERSION || "dev",
+        })}
+      </p>
+      <p>
+        {t("crypto_version", {
+          version: client.getCrypto()?.getVersion() || "unknown",
+        })}
+      </p>
+      <p>
+        {t("matrix_id", {
+          id: client.getUserId() || "unknown",
+        })}
+      </p>
+      <p>
+        {t("device_id", {
+          id: client.getDeviceId() || "unknown",
+        })}
+      </p>
       <FieldRow>
         <InputField
-          id="showConnectionStats"
-          name="connection-stats"
-          label={t("settings.show_connection_stats_label")}
-          type="checkbox"
-          checked={showConnectionStats}
-          onChange={(e: ChangeEvent<HTMLInputElement>): void =>
-            setShowConnectionStats(e.target.checked)
-          }
+          id="duplicateTiles"
+          type="number"
+          label={t("settings.duplicate_tiles_label")}
+          value={duplicateTiles.toString()}
+          onChange={useCallback(
+            (event: ChangeEvent<HTMLInputElement>): void => {
+              const value = event.target.valueAsNumber;
+              setDuplicateTiles(Number.isNaN(value) ? 0 : value);
+            },
+            [setDuplicateTiles],
+          )}
         />
       </FieldRow>
     </TabItem>

src/settings/settings.ts

@@ -0,0 +1,94 @@
+/*
+Copyright 2024 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 { BehaviorSubject, Observable } from "rxjs";
+import { useObservableEagerState } from "observable-hooks";
+
+import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
+
+export class Setting<T> {
+  public constructor(key: string, defaultValue: T) {
+    this.key = `matrix-setting-${key}`;
+
+    const storedValue = localStorage.getItem(this.key);
+    let initialValue = defaultValue;
+    if (storedValue !== null) {
+      try {
+        initialValue = JSON.parse(storedValue);
+      } catch (e) {
+        logger.warn(`Invalid value stored for setting ${key}: ${storedValue}`);
+      }
+    }
+
+    this._value = new BehaviorSubject(initialValue);
+    this.value = this._value;
+  }
+
+  private readonly key: string;
+
+  private readonly _value: BehaviorSubject<T>;
+  public readonly value: Observable<T>;
+
+  public readonly setValue = (value: T): void => {
+    this._value.next(value);
+    localStorage.setItem(this.key, JSON.stringify(value));
+  };
+}
+
+/**
+ * React hook that returns a settings's current value and a setter.
+ */
+export function useSetting<T>(setting: Setting<T>): [T, (value: T) => void] {
+  return [useObservableEagerState(setting.value), setting.setValue];
+}
+
+// null = undecided
+export const optInAnalytics = new Setting<boolean | null>(
+  "opt-in-analytics",
+  null,
+);
+// TODO: This setting can be disabled. Work out an approach to disableable
+// settings thats works for Observables in addition to React.
+export const useOptInAnalytics = (): [
+  boolean | null,
+  ((value: boolean | null) => void) | null,
+] => {
+  const setting = useSetting(optInAnalytics);
+  return PosthogAnalytics.instance.isEnabled() ? setting : [false, null];
+};
+
+export const developerSettingsTab = new Setting(
+  "developer-settings-tab",
+  false,
+);
+
+export const duplicateTiles = new Setting("duplicate-tiles", 0);
+
+export const audioInput = new Setting<string | undefined>(
+  "audio-input",
+  undefined,
+);
+export const audioOutput = new Setting<string | undefined>(
+  "audio-output",
+  undefined,
+);
+export const videoInput = new Setting<string | undefined>(
+  "video-input",
+  undefined,
+);
+
+export const alwaysShowSelf = new Setting<boolean>("always-show-self", true);

src/settings/submit-rageshake.ts

@@ -298,13 +298,13 @@ export function useRageshakeRequest(): (
 
   const sendRageshakeRequest = useCallback(
     (roomId: string, rageshakeRequestId: string) => {
+      // @ts-expect-error - org.matrix.rageshake_request is not part of `keyof TimelineEvents` but it is okay to sent a custom event.
       client!.sendEvent(roomId, "org.matrix.rageshake_request", {
         request_id: rageshakeRequestId,
       });
     },
     [client],
   );
-
   return sendRageshakeRequest;
 }
 
@@ -334,7 +334,7 @@ export function useRageshakeRequestModal(
 
     client.on(ClientEvent.Event, onEvent);
 
-    return () => {
+    return (): void => {
       client.removeListener(ClientEvent.Event, onEvent);
     };
   }, [setOpen, roomId, client]);

src/settings/useSetting.ts

@@ -1,104 +0,0 @@
-/*
-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.
-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 { useCallback, useMemo } from "react";
-
-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];
-
-export const getSettingKey = (name: string): string => {
-  return `matrix-setting-${name}`;
-};
-// Like useState, but reads from and persists the value to localStorage
-export const useSetting = <T>(name: string, defaultValue: T): Setting<T> => {
-  const key = useMemo(() => getSettingKey(name), [name]);
-
-  const [item, setItem] = useLocalStorage(key);
-
-  const value = useMemo(
-    () => (item == null ? defaultValue : JSON.parse(item)),
-    [item, defaultValue],
-  );
-  const setValue = useCallback(
-    (value: T) => {
-      setItem(JSON.stringify(value));
-    },
-    [setItem],
-  );
-
-  return [value, setValue];
-};
-
-export const getSetting = <T>(name: string, defaultValue: T): T => {
-  const item = getLocalStorageItem(getSettingKey(name));
-  return item === null ? defaultValue : JSON.parse(item);
-};
-
-export const setSetting = <T>(name: string, newValue: T): void =>
-  setLocalStorageItem(getSettingKey(name), JSON.stringify(newValue));
-
-export const isFirefox = (): boolean => {
-  const { userAgent } = navigator;
-  return userAgent.includes("Firefox");
-};
-
-const canEnableSpatialAudio = (): boolean => {
-  // Spatial audio means routing audio through audio contexts. On Chrome,
-  // this bypasses the AEC processor and so breaks echo cancellation.
-  // We only allow spatial audio to be enabled on Firefox which we know
-  // passes audio context audio through the AEC algorithm.
-  // https://bugs.chromium.org/p/chromium/issues/detail?id=687574 is the
-  // chrome bug for this: once this is fixed and the updated version is deployed
-  // widely enough, we can allow spatial audio everywhere. It's currently in a
-  // chrome flag, so we could enable this in Electron if we enabled the chrome flag
-  // in the Electron wrapper.
-  return isFirefox();
-};
-
-export const useSpatialAudio = (): DisableableSetting<boolean> => {
-  const settingVal = useSetting("spatial-audio", false);
-  if (canEnableSpatialAudio()) return settingVal;
-
-  return [false, null];
-};
-
-// null = undecided
-export const useOptInAnalytics = (): DisableableSetting<boolean | null> => {
-  const settingVal = useSetting<boolean | null>("opt-in-analytics", null);
-  if (PosthogAnalytics.instance.isEnabled()) return settingVal;
-
-  return [false, null];
-};
-
-export const useDeveloperSettingsTab = (): Setting<boolean> =>
-  useSetting("developer-settings-tab", false);
-
-export const useShowConnectionStats = (): Setting<boolean> =>
-  useSetting("show-connection-stats", false);
-
-export const useAudioInput = (): Setting<string | undefined> =>
-  useSetting<string | undefined>("audio-input", undefined);
-export const useAudioOutput = (): Setting<string | undefined> =>
-  useSetting<string | undefined>("audio-output", undefined);
-export const useVideoInput = (): Setting<string | undefined> =>
-  useSetting<string | undefined>("video-input", undefined);

src/state/CallViewModel.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2023 New Vector Ltd
+Copyright 2023-2024 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.
@@ -16,25 +16,45 @@ limitations under the License.
 
 import {
   connectedParticipantsObserver,
+  observeParticipantEvents,
   observeParticipantMedia,
 } from "@livekit/components-core";
-import { Room as LivekitRoom, RemoteParticipant } from "livekit-client";
+import {
+  Room as LivekitRoom,
+  LocalParticipant,
+  ParticipantEvent,
+  RemoteParticipant,
+} from "livekit-client";
 import { Room as MatrixRoom, RoomMember } from "matrix-js-sdk/src/matrix";
 import { useEffect, useRef } from "react";
 import {
   EMPTY,
   Observable,
+  Subject,
+  audit,
   combineLatest,
   concat,
+  distinctUntilChanged,
+  filter,
+  fromEvent,
+  map,
+  merge,
   mergeAll,
   of,
+  race,
   sample,
   scan,
+  shareReplay,
+  skip,
   startWith,
-  takeUntil,
+  switchAll,
+  switchMap,
+  switchScan,
+  take,
+  throttleTime,
+  timer,
   zip,
 } from "rxjs";
-import { state } from "@react-rxjs/core";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { ViewModel } from "./ViewModel";
@@ -45,35 +65,182 @@ import {
 } from "../livekit/useECConnectionState";
 import { usePrevious } from "../usePrevious";
 import {
-  TileViewModel,
-  UserMediaTileViewModel,
-  ScreenShareTileViewModel,
-} from "./TileViewModel";
-import { finalizeValue } from "../observable-utils";
-
-// Represents something that should get a tile on the layout,
-// ie. a user's video feed or a screen share feed.
-export interface TileDescriptor<T> {
-  id: string;
-  focused: boolean;
-  isPresenter: boolean;
-  isSpeaker: boolean;
-  hasVideo: boolean;
-  local: boolean;
-  largeBaseSize: boolean;
-  placeNear?: string;
-  data: T;
-}
+  LocalUserMediaViewModel,
+  MediaViewModel,
+  RemoteUserMediaViewModel,
+  ScreenShareViewModel,
+  UserMediaViewModel,
+} from "./MediaViewModel";
+import { accumulate, finalizeValue } from "../observable-utils";
+import { ObservableScope } from "./ObservableScope";
+import { duplicateTiles } from "../settings/settings";
+import { isFirefox } from "../Platform";
 
 // How long we wait after a focus switch before showing the real participant
 // list again
 const POST_FOCUS_PARTICIPANT_UPDATE_DELAY_MS = 3000;
 
+// This is the number of participants that we think constitutes a "small" call
+// on mobile. No spotlight tile should be shown below this threshold.
+const smallMobileCallThreshold = 3;
+
+export interface GridLayout {
+  type: "grid";
+  spotlight?: MediaViewModel[];
+  grid: UserMediaViewModel[];
+}
+
+export interface SpotlightLandscapeLayout {
+  type: "spotlight-landscape";
+  spotlight: MediaViewModel[];
+  grid: UserMediaViewModel[];
+}
+
+export interface SpotlightPortraitLayout {
+  type: "spotlight-portrait";
+  spotlight: MediaViewModel[];
+  grid: UserMediaViewModel[];
+}
+
+export interface SpotlightExpandedLayout {
+  type: "spotlight-expanded";
+  spotlight: MediaViewModel[];
+  pip?: UserMediaViewModel;
+}
+
+export interface OneOnOneLayout {
+  type: "one-on-one";
+  local: LocalUserMediaViewModel;
+  remote: RemoteUserMediaViewModel;
+}
+
+export interface PipLayout {
+  type: "pip";
+  spotlight: MediaViewModel[];
+}
+
+/**
+ * A layout defining the media tiles present on screen and their visual
+ * arrangement.
+ */
+export type Layout =
+  | GridLayout
+  | SpotlightLandscapeLayout
+  | SpotlightPortraitLayout
+  | SpotlightExpandedLayout
+  | OneOnOneLayout
+  | PipLayout;
+
+export type GridMode = "grid" | "spotlight";
+
+export type WindowMode = "normal" | "narrow" | "flat" | "pip";
+
+/**
+ * Sorting bins defining the order in which media tiles appear in the layout.
+ */
+enum SortingBin {
+  /**
+   * Yourself, when the "always show self" option is on.
+   */
+  SelfAlwaysShown,
+  /**
+   * Participants that are sharing their screen.
+   */
+  Presenters,
+  /**
+   * Participants that have been speaking recently.
+   */
+  Speakers,
+  /**
+   * Participants with video.
+   */
+  Video,
+  /**
+   * Participants not sharing any video.
+   */
+  NoVideo,
+  /**
+   * Yourself, when the "always show self" option is off.
+   */
+  SelfNotAlwaysShown,
+}
+
+class UserMedia {
+  private readonly scope = new ObservableScope();
+  public readonly vm: UserMediaViewModel;
+  public readonly speaker: Observable<boolean>;
+  public readonly presenter: Observable<boolean>;
+
+  public constructor(
+    public readonly id: string,
+    member: RoomMember | undefined,
+    participant: LocalParticipant | RemoteParticipant,
+    callEncrypted: boolean,
+  ) {
+    this.vm =
+      participant instanceof LocalParticipant
+        ? new LocalUserMediaViewModel(id, member, participant, callEncrypted)
+        : new RemoteUserMediaViewModel(id, member, participant, callEncrypted);
+
+    this.speaker = this.vm.speaking.pipe(
+      // Require 1 s of continuous speaking to become a speaker, and 60 s of
+      // continuous silence to stop being considered a speaker
+      audit((s) =>
+        merge(
+          timer(s ? 1000 : 60000),
+          // If the speaking flag resets to its original value during this time,
+          // end the silencing window to stick with that original value
+          this.vm.speaking.pipe(filter((s1) => s1 !== s)),
+        ),
+      ),
+      startWith(false),
+      distinctUntilChanged(),
+      this.scope.bind(),
+      // Make this Observable hot so that the timers don't reset when you
+      // resubscribe
+      shareReplay(1),
+    );
+
+    this.presenter = observeParticipantEvents(
+      participant,
+      ParticipantEvent.TrackPublished,
+      ParticipantEvent.TrackUnpublished,
+      ParticipantEvent.LocalTrackPublished,
+      ParticipantEvent.LocalTrackUnpublished,
+    ).pipe(map((p) => p.isScreenShareEnabled));
+  }
+
+  public destroy(): void {
+    this.scope.end();
+    this.vm.destroy();
+  }
+}
+
+class ScreenShare {
+  public readonly vm: ScreenShareViewModel;
+
+  public constructor(
+    id: string,
+    member: RoomMember | undefined,
+    participant: LocalParticipant | RemoteParticipant,
+    callEncrypted: boolean,
+  ) {
+    this.vm = new ScreenShareViewModel(id, member, participant, callEncrypted);
+  }
+
+  public destroy(): void {
+    this.vm.destroy();
+  }
+}
+
+type MediaItem = UserMedia | ScreenShare;
+
 function findMatrixMember(
   room: MatrixRoom,
   id: string,
 ): RoomMember | undefined {
-  if (!id) return undefined;
+  if (id === "local")
+    return room.getMember(room.client.getUserId()!) ?? undefined;
 
   const parts = id.split(":");
   // must be at least 3 parts because we know the first part is a userId which must necessarily contain a colon
@@ -92,165 +259,564 @@ function findMatrixMember(
 
 // TODO: Move wayyyy more business logic from the call and lobby views into here
 export class CallViewModel extends ViewModel {
-  private readonly rawRemoteParticipants = state(
-    connectedParticipantsObserver(this.livekitRoom),
-  );
+  private readonly rawRemoteParticipants = connectedParticipantsObserver(
+    this.livekitRoom,
+  ).pipe(shareReplay(1));
 
   // Lists of participants to "hold" on display, even if LiveKit claims that
   // they've left
-  private readonly remoteParticipantHolds = zip(
-    this.connectionState,
-    this.rawRemoteParticipants.pipe(sample(this.connectionState)),
-    (s, ps) => {
-      // Whenever we switch focuses, we should retain all the previous
-      // participants for at least POST_FOCUS_PARTICIPANT_UPDATE_DELAY_MS ms to
-      // give their clients time to switch over and avoid jarring layout shifts
-      if (s === ECAddonConnectionState.ECSwitchingFocus) {
-        return concat(
-          // Hold these participants
-          of({ hold: ps }),
-          // Wait for time to pass and the connection state to have changed
-          Promise.all([
-            new Promise<void>((resolve) =>
-              setTimeout(resolve, POST_FOCUS_PARTICIPANT_UPDATE_DELAY_MS),
-            ),
-            new Promise<void>((resolve) => {
-              const subscription = this.connectionState
-                .pipe(takeUntil(this.destroyed))
-                .subscribe((s) => {
-                  if (s !== ECAddonConnectionState.ECSwitchingFocus) {
-                    resolve();
-                    subscription.unsubscribe();
-                  }
-                });
-            }),
-            // Then unhold them
-          ]).then(() => Promise.resolve({ unhold: ps })),
-        );
-      } else {
-        return EMPTY;
-      }
-    },
-  ).pipe(
-    mergeAll(),
-    // Aggregate the hold instructions into a single list showing which
-    // participants are being held
-    scan(
-      (holds, instruction) =>
+  private readonly remoteParticipantHolds: Observable<RemoteParticipant[][]> =
+    zip(
+      this.connectionState,
+      this.rawRemoteParticipants.pipe(sample(this.connectionState)),
+      (s, ps) => {
+        // Whenever we switch focuses, we should retain all the previous
+        // participants for at least POST_FOCUS_PARTICIPANT_UPDATE_DELAY_MS ms to
+        // give their clients time to switch over and avoid jarring layout shifts
+        if (s === ECAddonConnectionState.ECSwitchingFocus) {
+          return concat(
+            // Hold these participants
+            of({ hold: ps }),
+            // Wait for time to pass and the connection state to have changed
+            Promise.all([
+              new Promise<void>((resolve) =>
+                setTimeout(resolve, POST_FOCUS_PARTICIPANT_UPDATE_DELAY_MS),
+              ),
+              new Promise<void>((resolve) => {
+                const subscription = this.connectionState
+                  .pipe(this.scope.bind())
+                  .subscribe((s) => {
+                    if (s !== ECAddonConnectionState.ECSwitchingFocus) {
+                      resolve();
+                      subscription.unsubscribe();
+                    }
+                  });
+              }),
+              // Then unhold them
+            ]).then(() => Promise.resolve({ unhold: ps })),
+          );
+        } else {
+          return EMPTY;
+        }
+      },
+    ).pipe(
+      mergeAll(),
+      // Accumulate the hold instructions into a single list showing which
+      // participants are being held
+      accumulate([] as RemoteParticipant[][], (holds, instruction) =>
         "hold" in instruction
           ? [instruction.hold, ...holds]
           : holds.filter((h) => h !== instruction.unhold),
-      [] as RemoteParticipant[][],
-    ),
-    startWith([]),
-  );
+      ),
+    );
 
-  private readonly remoteParticipants = combineLatest(
-    [this.rawRemoteParticipants, this.remoteParticipantHolds],
-    (raw, holds) => {
-      const result = [...raw];
-      const resultIds = new Set(result.map((p) => p.identity));
+  private readonly remoteParticipants: Observable<RemoteParticipant[]> =
+    combineLatest(
+      [this.rawRemoteParticipants, this.remoteParticipantHolds],
+      (raw, holds) => {
+        const result = [...raw];
+        const resultIds = new Set(result.map((p) => p.identity));
 
-      // Incorporate the held participants into the list
-      for (const hold of holds) {
-        for (const p of hold) {
-          if (!resultIds.has(p.identity)) {
-            result.push(p);
-            resultIds.add(p.identity);
+        // Incorporate the held participants into the list
+        for (const hold of holds) {
+          for (const p of hold) {
+            if (!resultIds.has(p.identity)) {
+              result.push(p);
+              resultIds.add(p.identity);
+            }
           }
         }
-      }
 
-      return result;
-    },
+        return result;
+      },
+    );
+
+  private readonly mediaItems: Observable<MediaItem[]> = combineLatest([
+    this.remoteParticipants,
+    observeParticipantMedia(this.livekitRoom.localParticipant),
+    duplicateTiles.value,
+  ]).pipe(
+    scan(
+      (
+        prevItems,
+        [remoteParticipants, { participant: localParticipant }, duplicateTiles],
+      ) => {
+        const newItems = new Map(
+          function* (this: CallViewModel): Iterable<[string, MediaItem]> {
+            for (const p of [localParticipant, ...remoteParticipants]) {
+              const userMediaId = p === localParticipant ? "local" : p.identity;
+              const member = findMatrixMember(this.matrixRoom, userMediaId);
+              if (member === undefined)
+                logger.warn(
+                  `Ruh, roh! No matrix member found for SFU participant '${p.identity}': creating g-g-g-ghost!`,
+                );
+
+              // Create as many tiles for this participant as called for by
+              // the duplicateTiles option
+              for (let i = 0; i < 1 + duplicateTiles; i++) {
+                const userMediaId = `${p.identity}:${i}`;
+                yield [
+                  userMediaId,
+                  prevItems.get(userMediaId) ??
+                    new UserMedia(userMediaId, member, p, this.encrypted),
+                ];
+
+                if (p.isScreenShareEnabled) {
+                  const screenShareId = `${userMediaId}:screen-share`;
+                  yield [
+                    screenShareId,
+                    prevItems.get(screenShareId) ??
+                      new ScreenShare(screenShareId, member, p, this.encrypted),
+                  ];
+                }
+              }
+            }
+          }.bind(this)(),
+        );
+
+        for (const [id, t] of prevItems) if (!newItems.has(id)) t.destroy();
+        return newItems;
+      },
+      new Map<string, MediaItem>(),
+    ),
+    map((mediaItems) => [...mediaItems.values()]),
+    finalizeValue((ts) => {
+      for (const t of ts) t.destroy();
+    }),
+    shareReplay(1),
+  );
+
+  private readonly userMedia: Observable<UserMedia[]> = this.mediaItems.pipe(
+    map((mediaItems) =>
+      mediaItems.filter((m): m is UserMedia => m instanceof UserMedia),
+    ),
+  );
+
+  private readonly localUserMedia: Observable<LocalUserMediaViewModel> =
+    this.mediaItems.pipe(
+      map((ms) => ms.find((m) => m.vm.local)!.vm as LocalUserMediaViewModel),
+    );
+
+  private readonly screenShares: Observable<ScreenShare[]> =
+    this.mediaItems.pipe(
+      map((mediaItems) =>
+        mediaItems.filter((m): m is ScreenShare => m instanceof ScreenShare),
+      ),
+      shareReplay(1),
+    );
+
+  private readonly hasRemoteScreenShares: Observable<boolean> =
+    this.screenShares.pipe(
+      map((ms) => ms.some((m) => !m.vm.local)),
+      distinctUntilChanged(),
+    );
+
+  private readonly spotlightSpeaker: Observable<UserMediaViewModel> =
+    this.userMedia.pipe(
+      switchMap((mediaItems) =>
+        mediaItems.length === 0
+          ? of([])
+          : combineLatest(
+              mediaItems.map((m) =>
+                m.vm.speaking.pipe(map((s) => [m, s] as const)),
+              ),
+            ),
+      ),
+      scan<(readonly [UserMedia, boolean])[], UserMedia, null>(
+        (prev, mediaItems) => {
+          // Only remote users that are still in the call should be sticky
+          const [stickyMedia, stickySpeaking] =
+            (!prev?.vm.local && mediaItems.find(([m]) => m === prev)) || [];
+          // Decide who to spotlight:
+          // If the previous speaker is still speaking, stick with them rather
+          // than switching eagerly to someone else
+          return stickySpeaking
+            ? stickyMedia!
+            : // Otherwise, select any remote user who is speaking
+              (mediaItems.find(([m, s]) => !m.vm.local && s)?.[0] ??
+                // Otherwise, stick with the person who was last speaking
+                stickyMedia ??
+                // Otherwise, spotlight an arbitrary remote user
+                mediaItems.find(([m]) => !m.vm.local)?.[0] ??
+                // Otherwise, spotlight the local user
+                mediaItems.find(([m]) => m.vm.local)![0]);
+        },
+        null,
+      ),
+      distinctUntilChanged(),
+      map((speaker) => speaker.vm),
+      shareReplay(1),
+      throttleTime(1600, undefined, { leading: true, trailing: true }),
+    );
+
+  private readonly grid: Observable<UserMediaViewModel[]> = this.userMedia.pipe(
+    switchMap((mediaItems) => {
+      const bins = mediaItems.map((m) =>
+        combineLatest(
+          [
+            m.speaker,
+            m.presenter,
+            m.vm.videoEnabled,
+            m.vm instanceof LocalUserMediaViewModel
+              ? m.vm.alwaysShow
+              : of(false),
+          ],
+          (speaker, presenter, video, alwaysShow) => {
+            let bin: SortingBin;
+            if (m.vm.local)
+              bin = alwaysShow
+                ? SortingBin.SelfAlwaysShown
+                : SortingBin.SelfNotAlwaysShown;
+            else if (presenter) bin = SortingBin.Presenters;
+            else if (speaker) bin = SortingBin.Speakers;
+            else if (video) bin = SortingBin.Video;
+            else bin = SortingBin.NoVideo;
+
+            return [m, bin] as const;
+          },
+        ),
+      );
+      // Sort the media by bin order and generate a tile for each one
+      return bins.length === 0
+        ? of([])
+        : combineLatest(bins, (...bins) =>
+            bins.sort(([, bin1], [, bin2]) => bin1 - bin2).map(([m]) => m.vm),
+          );
+    }),
+  );
+
+  private readonly spotlightAndPip: Observable<
+    [Observable<MediaViewModel[]>, Observable<UserMediaViewModel | null>]
+  > = this.screenShares.pipe(
+    map((screenShares) =>
+      screenShares.length > 0
+        ? ([of(screenShares.map((m) => m.vm)), this.spotlightSpeaker] as const)
+        : ([
+            this.spotlightSpeaker.pipe(map((speaker) => [speaker!])),
+            this.spotlightSpeaker.pipe(
+              switchMap((speaker) =>
+                speaker.local
+                  ? of(null)
+                  : this.localUserMedia.pipe(
+                      switchMap((vm) =>
+                        vm.alwaysShow.pipe(
+                          map((alwaysShow) => (alwaysShow ? vm : null)),
+                        ),
+                      ),
+                    ),
+              ),
+            ),
+          ] as const),
+    ),
+  );
+
+  private readonly spotlight: Observable<MediaViewModel[]> =
+    this.spotlightAndPip.pipe(
+      switchMap(([spotlight]) => spotlight),
+      shareReplay(1),
+    );
+
+  private readonly pip: Observable<UserMediaViewModel | null> =
+    this.spotlightAndPip.pipe(switchMap(([, pip]) => pip));
+
+  /**
+   * The general shape of the window.
+   */
+  public readonly windowMode: Observable<WindowMode> = fromEvent(
+    window,
+    "resize",
+  ).pipe(
+    startWith(null),
+    map(() => {
+      const height = window.innerHeight;
+      const width = window.innerWidth;
+      if (height <= 400 && width <= 340) return "pip";
+      // Our layouts for flat windows are better at adapting to a small width
+      // than our layouts for narrow windows are at adapting to a small height,
+      // so we give "flat" precedence here
+      if (height <= 600) return "flat";
+      if (width <= 600) return "narrow";
+      return "normal";
+    }),
+    distinctUntilChanged(),
+    shareReplay(1),
+  );
+
+  private readonly spotlightExpandedToggle = new Subject<void>();
+  public readonly spotlightExpanded: Observable<boolean> =
+    this.spotlightExpandedToggle.pipe(
+      accumulate(false, (expanded) => !expanded),
+      shareReplay(1),
+    );
+
+  private readonly gridModeUserSelection = new Subject<GridMode>();
+  /**
+   * The layout mode of the media tile grid.
+   */
+  public readonly gridMode: Observable<GridMode> =
+    // If the user hasn't selected spotlight and somebody starts screen sharing,
+    // automatically switch to spotlight mode and reset when screen sharing ends
+    this.gridModeUserSelection.pipe(
+      startWith(null),
+      switchMap((userSelection) =>
+        (userSelection === "spotlight"
+          ? EMPTY
+          : combineLatest([this.hasRemoteScreenShares, this.windowMode]).pipe(
+              skip(userSelection === null ? 0 : 1),
+              map(
+                ([hasScreenShares, windowMode]): GridMode =>
+                  hasScreenShares || windowMode === "flat"
+                    ? "spotlight"
+                    : "grid",
+              ),
+            )
+        ).pipe(startWith(userSelection ?? "grid")),
+      ),
+      distinctUntilChanged(),
+      shareReplay(1),
+    );
+
+  public setGridMode(value: GridMode): void {
+    this.gridModeUserSelection.next(value);
+  }
+
+  private readonly oneOnOne: Observable<boolean> = combineLatest(
+    [this.grid, this.screenShares],
+    (grid, screenShares) =>
+      grid.length == 2 &&
+      // There might not be a remote tile if only the local user is in the call
+      // and they're using the duplicate tiles option
+      grid.some((vm) => !vm.local) &&
+      screenShares.length === 0,
+  );
+
+  private readonly gridLayout: Observable<Layout> = combineLatest(
+    [this.grid, this.spotlight],
+    (grid, spotlight) => ({
+      type: "grid",
+      spotlight: spotlight.some((vm) => vm instanceof ScreenShareViewModel)
+        ? spotlight
+        : undefined,
+      grid,
+    }),
+  );
+
+  private readonly spotlightLandscapeLayout: Observable<Layout> = combineLatest(
+    [this.grid, this.spotlight],
+    (grid, spotlight) => ({ type: "spotlight-landscape", spotlight, grid }),
+  );
+
+  private readonly spotlightPortraitLayout: Observable<Layout> = combineLatest(
+    [this.grid, this.spotlight],
+    (grid, spotlight) => ({ type: "spotlight-portrait", spotlight, grid }),
+  );
+
+  private readonly spotlightExpandedLayout: Observable<Layout> = combineLatest(
+    [this.spotlight, this.pip],
+    (spotlight, pip) => ({
+      type: "spotlight-expanded",
+      spotlight,
+      pip: pip ?? undefined,
+    }),
+  );
+
+  private readonly oneOnOneLayout: Observable<Layout> = this.grid.pipe(
+    map((grid) => ({
+      type: "one-on-one",
+      local: grid.find((vm) => vm.local) as LocalUserMediaViewModel,
+      remote: grid.find((vm) => !vm.local) as RemoteUserMediaViewModel,
+    })),
+  );
+
+  private readonly pipLayout: Observable<Layout> = this.spotlight.pipe(
+    map((spotlight): Layout => ({ type: "pip", spotlight })),
+  );
+
+  public readonly layout: Observable<Layout> = this.windowMode.pipe(
+    switchMap((windowMode) => {
+      switch (windowMode) {
+        case "normal":
+          return this.gridMode.pipe(
+            switchMap((gridMode) => {
+              switch (gridMode) {
+                case "grid":
+                  return this.oneOnOne.pipe(
+                    switchMap((oneOnOne) =>
+                      oneOnOne ? this.oneOnOneLayout : this.gridLayout,
+                    ),
+                  );
+                case "spotlight":
+                  return this.spotlightExpanded.pipe(
+                    switchMap((expanded) =>
+                      expanded
+                        ? this.spotlightExpandedLayout
+                        : this.spotlightLandscapeLayout,
+                    ),
+                  );
+              }
+            }),
+          );
+        case "narrow":
+          return this.oneOnOne.pipe(
+            switchMap((oneOnOne) =>
+              oneOnOne
+                ? // The expanded spotlight layout makes for a better one-on-one
+                  // experience in narrow windows
+                  this.spotlightExpandedLayout
+                : combineLatest(
+                    [this.grid, this.spotlight],
+                    (grid, spotlight) =>
+                      grid.length > smallMobileCallThreshold ||
+                      spotlight.some((vm) => vm instanceof ScreenShareViewModel)
+                        ? this.spotlightPortraitLayout
+                        : this.gridLayout,
+                  ).pipe(switchAll()),
+            ),
+          );
+        case "flat":
+          return this.gridMode.pipe(
+            switchMap((gridMode) => {
+              switch (gridMode) {
+                case "grid":
+                  // Yes, grid mode actually gets you a "spotlight" layout in
+                  // this window mode.
+                  return this.spotlightLandscapeLayout;
+                case "spotlight":
+                  return this.spotlightExpandedLayout;
+              }
+            }),
+          );
+        case "pip":
+          return this.pipLayout;
+      }
+    }),
+    shareReplay(1),
+  );
+
+  public showSpotlightIndicators: Observable<boolean> = this.layout.pipe(
+    map((l) => l.type !== "grid"),
+    distinctUntilChanged(),
+    shareReplay(1),
   );
 
   /**
-   * The media tiles to be displayed in the call view.
+   * Determines whether video should be shown for a certain piece of media
+   * appearing in the grid.
    */
-  public readonly tiles = state(
-    combineLatest([
-      this.remoteParticipants,
-      observeParticipantMedia(this.livekitRoom.localParticipant),
-    ]).pipe(
-      scan((ts, [remoteParticipants, { participant: localParticipant }]) => {
-        const ps = [localParticipant, ...remoteParticipants];
-        const tilesById = new Map(ts.map((t) => [t.id, t]));
-        const now = Date.now();
-        let allGhosts = true;
+  public showGridVideo(vm: MediaViewModel): Observable<boolean> {
+    return this.layout.pipe(
+      map(
+        (l) =>
+          !(
+            (l.type === "spotlight-landscape" ||
+              l.type === "spotlight-portrait") &&
+            // This media is already visible in the spotlight; avoid duplication
+            l.spotlight.some((spotlightVm) => spotlightVm === vm)
+          ),
+      ),
+      distinctUntilChanged(),
+    );
+  }
 
-        const newTiles = ps.flatMap((p) => {
-          const userMediaId = p.identity;
-          const member = findMatrixMember(this.matrixRoom, userMediaId);
-          allGhosts &&= member === undefined;
-          const spokeRecently =
-            p.lastSpokeAt !== undefined && now - +p.lastSpokeAt <= 10000;
+  public showSpeakingIndicators: Observable<boolean> = this.layout.pipe(
+    map((l) => l.type !== "one-on-one" && !l.type.startsWith("spotlight-")),
+    distinctUntilChanged(),
+    shareReplay(1),
+  );
 
-          // We always start with a local participant with the empty string as
-          // their ID before we're connected, this is fine and we'll be in
-          // "all ghosts" mode.
-          if (userMediaId !== "" && member === undefined) {
-            logger.warn(
-              `Ruh, roh! No matrix member found for SFU participant '${userMediaId}': creating g-g-g-ghost!`,
-            );
-          }
+  public readonly toggleSpotlightExpanded: Observable<(() => void) | null> =
+    this.windowMode.pipe(
+      switchMap((mode) =>
+        mode === "normal"
+          ? this.layout.pipe(
+              map(
+                (l) =>
+                  l.type === "spotlight-landscape" ||
+                  l.type === "spotlight-expanded",
+              ),
+            )
+          : of(false),
+      ),
+      distinctUntilChanged(),
+      map((enabled) =>
+        enabled ? (): void => this.spotlightExpandedToggle.next() : null,
+      ),
+      shareReplay(1),
+    );
 
-          const userMediaVm =
-            tilesById.get(userMediaId)?.data ??
-            new UserMediaTileViewModel(userMediaId, member, p, this.encrypted);
-          tilesById.delete(userMediaId);
+  private readonly screenTap = new Subject<void>();
+  private readonly screenHover = new Subject<void>();
+  private readonly screenUnhover = new Subject<void>();
 
-          const userMediaTile: TileDescriptor<TileViewModel> = {
-            id: userMediaId,
-            focused: false,
-            isPresenter: p.isScreenShareEnabled,
-            isSpeaker: (p.isSpeaking || spokeRecently) && !p.isLocal,
-            hasVideo: p.isCameraEnabled,
-            local: p.isLocal,
-            largeBaseSize: false,
-            data: userMediaVm,
-          };
+  /**
+   * Callback for when the user taps the call view.
+   */
+  public tapScreen(): void {
+    this.screenTap.next();
+  }
 
-          if (p.isScreenShareEnabled) {
-            const screenShareId = `${userMediaId}:screen-share`;
-            const screenShareVm =
-              tilesById.get(screenShareId)?.data ??
-              new ScreenShareTileViewModel(
-                screenShareId,
-                member,
-                p,
-                this.encrypted,
-              );
-            tilesById.delete(screenShareId);
+  /**
+   * Callback for when the user hovers over the call view.
+   */
+  public hoverScreen(): void {
+    this.screenHover.next();
+  }
 
-            const screenShareTile: TileDescriptor<TileViewModel> = {
-              id: screenShareId,
-              focused: true,
-              isPresenter: false,
-              isSpeaker: false,
-              hasVideo: true,
-              local: p.isLocal,
-              largeBaseSize: true,
-              placeNear: userMediaId,
-              data: screenShareVm,
-            };
-            return [userMediaTile, screenShareTile];
-          } else {
-            return [userMediaTile];
-          }
-        });
+  /**
+   * Callback for when the user stops hovering over the call view.
+   */
+  public unhoverScreen(): void {
+    this.screenUnhover.next();
+  }
 
-        // Any tiles left in the map are unused and should be destroyed
-        for (const t of tilesById.values()) t.data.destroy();
+  public readonly showHeader: Observable<boolean> = this.windowMode.pipe(
+    map((mode) => mode !== "pip" && mode !== "flat"),
+    distinctUntilChanged(),
+    shareReplay(1),
+  );
 
-        // If every item is a ghost, that probably means we're still connecting
-        // and shouldn't bother showing anything yet
-        return allGhosts ? [] : newTiles;
-      }, [] as TileDescriptor<TileViewModel>[]),
-      finalizeValue((ts) => {
-        for (const t of ts) t.data.destroy();
-      }),
-    ),
+  public readonly showFooter = this.windowMode.pipe(
+    switchMap((mode) => {
+      switch (mode) {
+        case "pip":
+          return of(false);
+        case "normal":
+        case "narrow":
+          return of(true);
+        case "flat":
+          // Sadly Firefox has some layering glitches that prevent the footer
+          // from appearing properly. They happen less often if we never hide
+          // the footer.
+          if (isFirefox()) return of(true);
+          // Show/hide the footer in response to interactions
+          return merge(
+            this.screenTap.pipe(map(() => "tap" as const)),
+            this.screenHover.pipe(map(() => "hover" as const)),
+          ).pipe(
+            switchScan(
+              (state, interaction) =>
+                interaction === "tap"
+                  ? state
+                    ? // Toggle visibility on tap
+                      of(false)
+                    : // Hide after a timeout
+                      timer(6000).pipe(
+                        map(() => false),
+                        startWith(true),
+                      )
+                  : // Show on hover and hide after a timeout
+                    race(timer(3000), this.screenUnhover.pipe(take(1))).pipe(
+                      map(() => false),
+                      startWith(true),
+                    ),
+              false,
+            ),
+            startWith(false),
+          );
+      }
+    }),
+    distinctUntilChanged(),
+    shareReplay(1),
   );
 
   public constructor(

src/state/MediaViewModel.ts

@@ -0,0 +1,302 @@
+/*
+Copyright 2023-2024 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 {
+  AudioSource,
+  TrackReferenceOrPlaceholder,
+  VideoSource,
+  observeParticipantEvents,
+  observeParticipantMedia,
+} from "@livekit/components-core";
+import {
+  LocalParticipant,
+  LocalTrack,
+  Participant,
+  ParticipantEvent,
+  RemoteParticipant,
+  Track,
+  TrackEvent,
+  facingModeFromLocalTrack,
+} from "livekit-client";
+import { RoomMember, RoomMemberEvent } from "matrix-js-sdk/src/matrix";
+import {
+  BehaviorSubject,
+  Observable,
+  combineLatest,
+  distinctUntilChanged,
+  distinctUntilKeyChanged,
+  fromEvent,
+  map,
+  of,
+  shareReplay,
+  startWith,
+  switchMap,
+} from "rxjs";
+import { useEffect } from "react";
+
+import { ViewModel } from "./ViewModel";
+import { useReactiveState } from "../useReactiveState";
+import { alwaysShowSelf } from "../settings/settings";
+
+// TODO: Move this naming logic into the view model
+export function useDisplayName(vm: MediaViewModel): string {
+  const [displayName, setDisplayName] = useReactiveState(
+    () => vm.member?.rawDisplayName ?? "[👻]",
+    [vm.member],
+  );
+  useEffect(() => {
+    if (vm.member) {
+      const updateName = (): void => {
+        setDisplayName(vm.member!.rawDisplayName);
+      };
+
+      vm.member!.on(RoomMemberEvent.Name, updateName);
+      return (): void => {
+        vm.member!.removeListener(RoomMemberEvent.Name, updateName);
+      };
+    }
+  }, [vm.member, setDisplayName]);
+
+  return displayName;
+}
+
+function observeTrackReference(
+  participant: Participant,
+  source: Track.Source,
+): Observable<TrackReferenceOrPlaceholder> {
+  return observeParticipantMedia(participant).pipe(
+    map(() => ({
+      participant,
+      publication: participant.getTrackPublication(source),
+      source,
+    })),
+    distinctUntilKeyChanged("publication"),
+    shareReplay(1),
+  );
+}
+
+abstract class BaseMediaViewModel extends ViewModel {
+  /**
+   * Whether the media belongs to the local user.
+   */
+  public readonly local = this.participant.isLocal;
+  /**
+   * The LiveKit video track for this media.
+   */
+  public readonly video: Observable<TrackReferenceOrPlaceholder>;
+  /**
+   * Whether there should be a warning that this media is unencrypted.
+   */
+  public readonly unencryptedWarning: Observable<boolean>;
+
+  public constructor(
+    /**
+     * An opaque identifier for this media.
+     */
+    public readonly id: string,
+    /**
+     * The Matrix room member to which this media belongs.
+     */
+    // TODO: Fully separate the data layer from the UI layer by keeping the
+    // member object internal
+    public readonly member: RoomMember | undefined,
+    protected readonly participant: LocalParticipant | RemoteParticipant,
+    callEncrypted: boolean,
+    audioSource: AudioSource,
+    videoSource: VideoSource,
+  ) {
+    super();
+    const audio = observeTrackReference(participant, audioSource);
+    this.video = observeTrackReference(participant, videoSource);
+    this.unencryptedWarning = combineLatest(
+      [audio, this.video],
+      (a, v) =>
+        callEncrypted &&
+        (a.publication?.isEncrypted === false ||
+          v.publication?.isEncrypted === false),
+    ).pipe(distinctUntilChanged(), shareReplay(1));
+  }
+}
+
+/**
+ * Some participant's media.
+ */
+export type MediaViewModel = UserMediaViewModel | ScreenShareViewModel;
+export type UserMediaViewModel =
+  | LocalUserMediaViewModel
+  | RemoteUserMediaViewModel;
+
+/**
+ * Some participant's user media.
+ */
+abstract class BaseUserMediaViewModel extends BaseMediaViewModel {
+  /**
+   * Whether the participant is speaking.
+   */
+  public readonly speaking = observeParticipantEvents(
+    this.participant,
+    ParticipantEvent.IsSpeakingChanged,
+  ).pipe(
+    map((p) => p.isSpeaking),
+    shareReplay(1),
+  );
+
+  /**
+   * Whether this participant is sending audio (i.e. is unmuted on their side).
+   */
+  public readonly audioEnabled: Observable<boolean>;
+  /**
+   * Whether this participant is sending video.
+   */
+  public readonly videoEnabled: Observable<boolean>;
+
+  private readonly _cropVideo = new BehaviorSubject(true);
+  /**
+   * Whether the tile video should be contained inside the tile or be cropped to fit.
+   */
+  public readonly cropVideo: Observable<boolean> = this._cropVideo;
+
+  public constructor(
+    id: string,
+    member: RoomMember | undefined,
+    participant: LocalParticipant | RemoteParticipant,
+    callEncrypted: boolean,
+  ) {
+    super(
+      id,
+      member,
+      participant,
+      callEncrypted,
+      Track.Source.Microphone,
+      Track.Source.Camera,
+    );
+
+    const media = observeParticipantMedia(participant).pipe(shareReplay(1));
+    this.audioEnabled = media.pipe(
+      map((m) => m.microphoneTrack?.isMuted === false),
+    );
+    this.videoEnabled = media.pipe(
+      map((m) => m.cameraTrack?.isMuted === false),
+    );
+  }
+
+  public toggleFitContain(): void {
+    this._cropVideo.next(!this._cropVideo.value);
+  }
+}
+
+/**
+ * The local participant's user media.
+ */
+export class LocalUserMediaViewModel extends BaseUserMediaViewModel {
+  /**
+   * Whether the video should be mirrored.
+   */
+  public readonly mirror = this.video.pipe(
+    switchMap((v) => {
+      const track = v.publication?.track;
+      if (!(track instanceof LocalTrack)) return of(false);
+      // Watch for track restarts, because they indicate a camera switch
+      return fromEvent(track, TrackEvent.Restarted).pipe(
+        startWith(null),
+        // Mirror only front-facing cameras (those that face the user)
+        map(() => facingModeFromLocalTrack(track).facingMode === "user"),
+      );
+    }),
+    shareReplay(1),
+  );
+
+  /**
+   * Whether to show this tile in a highly visible location near the start of
+   * the grid.
+   */
+  public readonly alwaysShow = alwaysShowSelf.value;
+  public readonly setAlwaysShow = alwaysShowSelf.setValue;
+
+  public constructor(
+    id: string,
+    member: RoomMember | undefined,
+    participant: LocalParticipant,
+    callEncrypted: boolean,
+  ) {
+    super(id, member, participant, callEncrypted);
+  }
+}
+
+/**
+ * A remote participant's user media.
+ */
+export class RemoteUserMediaViewModel extends BaseUserMediaViewModel {
+  private readonly _locallyMuted = new BehaviorSubject(false);
+  /**
+   * Whether we've disabled this participant's audio.
+   */
+  public readonly locallyMuted: Observable<boolean> = this._locallyMuted;
+
+  private readonly _localVolume = new BehaviorSubject(1);
+  /**
+   * The volume to which we've set this participant's audio, as a scalar
+   * multiplier.
+   */
+  public readonly localVolume: Observable<number> = this._localVolume;
+
+  public constructor(
+    id: string,
+    member: RoomMember | undefined,
+    participant: RemoteParticipant,
+    callEncrypted: boolean,
+  ) {
+    super(id, member, participant, callEncrypted);
+
+    // Sync the local mute state and volume with LiveKit
+    combineLatest([this._locallyMuted, this._localVolume], (muted, volume) =>
+      muted ? 0 : volume,
+    )
+      .pipe(this.scope.bind())
+      .subscribe((volume) => {
+        (this.participant as RemoteParticipant).setVolume(volume);
+      });
+  }
+
+  public toggleLocallyMuted(): void {
+    this._locallyMuted.next(!this._locallyMuted.value);
+  }
+
+  public setLocalVolume(value: number): void {
+    this._localVolume.next(value);
+  }
+}
+
+/**
+ * Some participant's screen share media.
+ */
+export class ScreenShareViewModel extends BaseMediaViewModel {
+  public constructor(
+    id: string,
+    member: RoomMember | undefined,
+    participant: LocalParticipant | RemoteParticipant,
+    callEncrypted: boolean,
+  ) {
+    super(
+      id,
+      member,
+      participant,
+      callEncrypted,
+      Track.Source.ScreenShareAudio,
+      Track.Source.ScreenShare,
+    );
+  }
+}

src/state/ObservableScope.ts

@@ -0,0 +1,40 @@
+/*
+Copyright 2024 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 { MonoTypeOperatorFunction, Subject, takeUntil } from "rxjs";
+
+/**
+ * A scope which limits the execution lifetime of its bound Observables.
+ */
+export class ObservableScope {
+  private readonly ended = new Subject<void>();
+
+  /**
+   * Binds an Observable to this scope, so that it completes when the scope
+   * ends.
+   */
+  public bind<T>(): MonoTypeOperatorFunction<T> {
+    return takeUntil(this.ended);
+  }
+
+  /**
+   * Ends the scope, causing any bound Observables to complete.
+   */
+  public end(): void {
+    this.ended.next();
+    this.ended.complete();
+  }
+}

src/state/TileViewModel.ts

@@ -1,242 +0,0 @@
-/*
-Copyright 2023 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import {
-  AudioSource,
-  TrackReferenceOrPlaceholder,
-  VideoSource,
-  observeParticipantEvents,
-  observeParticipantMedia,
-} from "@livekit/components-core";
-import { StateObservable, state } from "@react-rxjs/core";
-import {
-  LocalParticipant,
-  LocalTrack,
-  Participant,
-  ParticipantEvent,
-  RemoteParticipant,
-  Track,
-  TrackEvent,
-  facingModeFromLocalTrack,
-} from "livekit-client";
-import { RoomMember } from "matrix-js-sdk/src/matrix";
-import {
-  BehaviorSubject,
-  combineLatest,
-  distinctUntilChanged,
-  distinctUntilKeyChanged,
-  fromEvent,
-  map,
-  of,
-  startWith,
-  switchMap,
-  takeUntil,
-} from "rxjs";
-
-import { ViewModel } from "./ViewModel";
-
-function observeTrackReference(
-  participant: Participant,
-  source: Track.Source,
-): StateObservable<TrackReferenceOrPlaceholder> {
-  return state(
-    observeParticipantMedia(participant).pipe(
-      map(() => ({
-        participant,
-        publication: participant.getTrackPublication(source),
-        source,
-      })),
-      distinctUntilKeyChanged("publication"),
-    ),
-  );
-}
-
-abstract class BaseTileViewModel extends ViewModel {
-  /**
-   * Whether the tile belongs to the local user.
-   */
-  public readonly local = this.participant.isLocal;
-  /**
-   * The LiveKit video track to be shown on this tile.
-   */
-  public readonly video: StateObservable<TrackReferenceOrPlaceholder>;
-  /**
-   * Whether there should be a warning that this media is unencrypted.
-   */
-  public readonly unencryptedWarning: StateObservable<boolean>;
-
-  public constructor(
-    // TODO: This is only needed for full screen toggling and can be removed as
-    // soon as that code is moved into the view models
-    public readonly id: string,
-    /**
-     * The Matrix room member to which this tile belongs.
-     */
-    // TODO: Fully separate the data layer from the UI layer by keeping the
-    // member object internal
-    public readonly member: RoomMember | undefined,
-    protected readonly participant: LocalParticipant | RemoteParticipant,
-    callEncrypted: boolean,
-    audioSource: AudioSource,
-    videoSource: VideoSource,
-  ) {
-    super();
-    const audio = observeTrackReference(participant, audioSource);
-    this.video = observeTrackReference(participant, videoSource);
-    this.unencryptedWarning = state(
-      combineLatest(
-        [audio, this.video],
-        (a, v) =>
-          callEncrypted &&
-          (a.publication?.isEncrypted === false ||
-            v.publication?.isEncrypted === false),
-      ).pipe(distinctUntilChanged()),
-    );
-  }
-}
-
-/**
- * A tile displaying some media.
- */
-export type TileViewModel = UserMediaTileViewModel | ScreenShareTileViewModel;
-
-/**
- * A tile displaying some participant's user media.
- */
-export class UserMediaTileViewModel extends BaseTileViewModel {
-  /**
-   * Whether the video should be mirrored.
-   */
-  public readonly mirror = state(
-    this.video.pipe(
-      switchMap((v) => {
-        const track = v.publication?.track;
-        if (!(track instanceof LocalTrack)) return of(false);
-        // Watch for track restarts, because they indicate a camera switch
-        return fromEvent(track, TrackEvent.Restarted).pipe(
-          startWith(null),
-          // Mirror only front-facing cameras (those that face the user)
-          map(() => facingModeFromLocalTrack(track).facingMode === "user"),
-        );
-      }),
-    ),
-  );
-
-  /**
-   * Whether the participant is speaking.
-   */
-  public readonly speaking = state(
-    observeParticipantEvents(
-      this.participant,
-      ParticipantEvent.IsSpeakingChanged,
-    ).pipe(map((p) => p.isSpeaking)),
-  );
-
-  private readonly _locallyMuted = new BehaviorSubject(false);
-  /**
-   * Whether we've disabled this participant's audio.
-   */
-  public readonly locallyMuted = state(this._locallyMuted);
-
-  private readonly _localVolume = new BehaviorSubject(1);
-  /**
-   * The volume to which we've set this participant's audio, as a scalar
-   * multiplier.
-   */
-  public readonly localVolume = state(this._localVolume);
-
-  /**
-   * Whether this participant is sending audio (i.e. is unmuted on their side).
-   */
-  public readonly audioEnabled: StateObservable<boolean>;
-  /**
-   * Whether this participant is sending video.
-   */
-  public readonly videoEnabled: StateObservable<boolean>;
-
-  private readonly _cropVideo = new BehaviorSubject(true);
-  /**
-   * Whether the tile video should be contained inside the tile or be cropped to fit.
-   */
-  public readonly cropVideo = state(this._cropVideo);
-
-  public constructor(
-    id: string,
-    member: RoomMember | undefined,
-    participant: LocalParticipant | RemoteParticipant,
-    callEncrypted: boolean,
-  ) {
-    super(
-      id,
-      member,
-      participant,
-      callEncrypted,
-      Track.Source.Microphone,
-      Track.Source.Camera,
-    );
-
-    const media = observeParticipantMedia(participant);
-    this.audioEnabled = state(
-      media.pipe(map((m) => m.microphoneTrack?.isMuted === false)),
-    );
-    this.videoEnabled = state(
-      media.pipe(map((m) => m.cameraTrack?.isMuted === false)),
-    );
-
-    // Sync the local mute state and volume with LiveKit
-    if (!this.local)
-      combineLatest([this._locallyMuted, this._localVolume], (muted, volume) =>
-        muted ? 0 : volume,
-      )
-        .pipe(takeUntil(this.destroyed))
-        .subscribe((volume) => {
-          (this.participant as RemoteParticipant).setVolume(volume);
-        });
-  }
-
-  public toggleLocallyMuted(): void {
-    this._locallyMuted.next(!this._locallyMuted.value);
-  }
-
-  public toggleFitContain(): void {
-    this._cropVideo.next(!this._cropVideo.value);
-  }
-
-  public setLocalVolume(value: number): void {
-    this._localVolume.next(value);
-  }
-}
-
-/**
- * A tile displaying some participant's screen share.
- */
-export class ScreenShareTileViewModel extends BaseTileViewModel {
-  public constructor(
-    id: string,
-    member: RoomMember | undefined,
-    participant: LocalParticipant | RemoteParticipant,
-    callEncrypted: boolean,
-  ) {
-    super(
-      id,
-      member,
-      participant,
-      callEncrypted,
-      Track.Source.ScreenShareAudio,
-      Track.Source.ScreenShare,
-    );
-  }
-}

src/state/ViewModel.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2023 New Vector Ltd
+Copyright 2023-2024 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,20 +14,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Subject } from "rxjs";
+import { ObservableScope } from "./ObservableScope";
 
 /**
  * An MVVM view model.
  */
 export abstract class ViewModel {
-  protected readonly destroyed = new Subject<void>();
+  protected readonly scope = new ObservableScope();
 
   /**
    * Instructs the ViewModel to clean up its resources. If you forget to call
    * this, there may be memory leaks!
    */
   public destroy(): void {
-    this.destroyed.next();
-    this.destroyed.complete();
+    this.scope.end();
   }
 }

src/state/subscribe.tsx

@@ -1,49 +0,0 @@
-/*
-Copyright 2023 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import {
-  ForwardRefExoticComponent,
-  ForwardRefRenderFunction,
-  PropsWithoutRef,
-  RefAttributes,
-  forwardRef,
-} from "react";
-// eslint-disable-next-line no-restricted-imports
-import { Subscribe, RemoveSubscribe } from "@react-rxjs/core";
-
-/**
- * Wraps a React component that consumes Observables, resulting in a component
- * that safely subscribes to its Observables before rendering. The component
- * will return null until the subscriptions are created.
- */
-export function subscribe<P, R>(
-  render: ForwardRefRenderFunction<R, P>,
-): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<R>> {
-  const Subscriber = forwardRef<R, { p: P }>(({ p }, ref) => (
-    <RemoveSubscribe>{render(p, ref)}</RemoveSubscribe>
-  ));
-  Subscriber.displayName = "Subscriber";
-
-  // eslint-disable-next-line react/display-name
-  const OuterComponent = forwardRef<R, P>((p, ref) => (
-    <Subscribe>
-      <Subscriber ref={ref} p={p} />
-    </Subscribe>
-  ));
-  // Copy over the component's display name, default props, etc.
-  Object.assign(OuterComponent, render);
-  return OuterComponent;
-}

src/state/useObservable.ts

@@ -14,9 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { useRef } from "react";
+import { Ref, useCallback, useRef } from "react";
 import { BehaviorSubject, Observable } from "rxjs";
 
+import { useInitial } from "../useInitial";
+
 /**
  * React hook that creates an Observable from a changing value. The Observable
  * replays its current value upon subscription and emits whenever the value
@@ -28,3 +30,14 @@ export function useObservable<T>(value: T): Observable<T> {
   if (value !== subject.current.value) subject.current.next(value);
   return subject.current;
 }
+
+/**
+ * React hook that creates a ref and an Observable that emits any values
+ * stored in the ref. The Observable replays the value currently stored in the
+ * ref upon subscription.
+ */
+export function useObservableRef<T>(initialValue: T): [Observable<T>, Ref<T>] {
+  const subject = useInitial(() => new BehaviorSubject(initialValue));
+  const ref = useCallback((value: T) => subject.next(value), [subject]);
+  return [subject, ref];
+}

src/tile/GridTile.module.css

@@ -0,0 +1,72 @@
+/*
+Copyright 2022-2024 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.
+*/
+
+.tile {
+  --media-view-border-radius: var(--cpd-space-4x);
+  transition: outline-color ease 0.15s;
+  outline: var(--cpd-border-width-2) solid rgb(0 0 0 / 0);
+}
+
+/* Use a pseudo-element to create the expressive speaking border, since CSS
+borders don't support gradients */
+.tile::before {
+  content: "";
+  position: absolute;
+  z-index: -1; /* Put it below the outline */
+  opacity: 0; /* Hidden unless speaking */
+  transition: opacity ease 0.15s;
+  inset: calc(-1 * var(--cpd-border-width-4));
+  border-radius: var(--cpd-space-5x);
+  background: linear-gradient(
+      119deg,
+      rgba(13, 92, 189, 0.7) 0%,
+      rgba(13, 189, 168, 0.7) 100%
+    ),
+    linear-gradient(
+      180deg,
+      rgba(13, 92, 189, 0.9) 0%,
+      rgba(13, 189, 168, 0.9) 100%
+    );
+  background-blend-mode: overlay, normal;
+}
+
+.tile.speaking {
+  /* !important because speaking border should take priority over hover */
+  outline: var(--cpd-border-width-1) solid var(--cpd-color-bg-canvas-default) !important;
+}
+
+.tile.speaking::before {
+  opacity: 1;
+}
+
+@media (hover: hover) {
+  .tile:hover {
+    outline: var(--cpd-border-width-2) solid
+      var(--cpd-color-border-interactive-hovered);
+  }
+}
+
+.muteIcon[data-muted="true"] {
+  color: var(--cpd-color-icon-secondary);
+}
+
+.muteIcon[data-muted="false"] {
+  color: var(--cpd-color-icon-primary);
+}
+
+.volumeSlider {
+  width: 100%;
+}

src/tile/GridTile.tsx

@@ -0,0 +1,315 @@
+/*
+Copyright 2022-2024 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 {
+  ComponentProps,
+  ReactNode,
+  forwardRef,
+  useCallback,
+  useState,
+} from "react";
+import { animated } from "@react-spring/web";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import {
+  MicOnSolidIcon,
+  MicOffSolidIcon,
+  MicOffIcon,
+  OverflowHorizontalIcon,
+  VolumeOnIcon,
+  VolumeOffIcon,
+  VisibilityOnIcon,
+  UserProfileIcon,
+  ExpandIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
+import {
+  ContextMenu,
+  MenuItem,
+  ToggleMenuItem,
+  Menu,
+} from "@vector-im/compound-web";
+import { useObservableEagerState } from "observable-hooks";
+
+import styles from "./GridTile.module.css";
+import {
+  UserMediaViewModel,
+  useDisplayName,
+  LocalUserMediaViewModel,
+  RemoteUserMediaViewModel,
+} from "../state/MediaViewModel";
+import { Slider } from "../Slider";
+import { MediaView } from "./MediaView";
+import { useLatest } from "../useLatest";
+
+interface TileProps {
+  className?: string;
+  style?: ComponentProps<typeof animated.div>["style"];
+  targetWidth: number;
+  targetHeight: number;
+  displayName: string;
+  showVideo: boolean;
+  showSpeakingIndicators: boolean;
+}
+
+interface UserMediaTileProps extends TileProps {
+  vm: UserMediaViewModel;
+  mirror: boolean;
+  menuStart?: ReactNode;
+  menuEnd?: ReactNode;
+}
+
+const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
+  (
+    {
+      vm,
+      showVideo,
+      showSpeakingIndicators,
+      menuStart,
+      menuEnd,
+      className,
+      displayName,
+      ...props
+    },
+    ref,
+  ) => {
+    const { t } = useTranslation();
+    const video = useObservableEagerState(vm.video);
+    const unencryptedWarning = useObservableEagerState(vm.unencryptedWarning);
+    const audioEnabled = useObservableEagerState(vm.audioEnabled);
+    const videoEnabled = useObservableEagerState(vm.videoEnabled);
+    const speaking = useObservableEagerState(vm.speaking);
+    const cropVideo = useObservableEagerState(vm.cropVideo);
+    const onSelectFitContain = useCallback(
+      (e: Event) => {
+        e.preventDefault();
+        vm.toggleFitContain();
+      },
+      [vm],
+    );
+
+    const MicIcon = audioEnabled ? MicOnSolidIcon : MicOffSolidIcon;
+
+    const [menuOpen, setMenuOpen] = useState(false);
+    const menu = (
+      <>
+        {menuStart}
+        <ToggleMenuItem
+          Icon={ExpandIcon}
+          label={t("video_tile.change_fit_contain")}
+          checked={cropVideo}
+          onSelect={onSelectFitContain}
+        />
+        {menuEnd}
+      </>
+    );
+
+    const tile = (
+      <MediaView
+        ref={ref}
+        video={video}
+        member={vm.member}
+        unencryptedWarning={unencryptedWarning}
+        videoEnabled={videoEnabled && showVideo}
+        videoFit={cropVideo ? "cover" : "contain"}
+        className={classNames(className, styles.tile, {
+          [styles.speaking]: showSpeakingIndicators && speaking,
+        })}
+        nameTagLeadingIcon={
+          <MicIcon
+            width={20}
+            height={20}
+            aria-label={audioEnabled ? t("microphone_on") : t("microphone_off")}
+            data-muted={!audioEnabled}
+            className={styles.muteIcon}
+          />
+        }
+        displayName={displayName}
+        primaryButton={
+          <Menu
+            open={menuOpen}
+            onOpenChange={setMenuOpen}
+            title={displayName}
+            trigger={
+              <button aria-label={t("common.options")}>
+                <OverflowHorizontalIcon aria-hidden width={20} height={20} />
+              </button>
+            }
+            side="left"
+            align="start"
+          >
+            {menu}
+          </Menu>
+        }
+        {...props}
+      />
+    );
+
+    return (
+      <ContextMenu title={displayName} trigger={tile} hasAccessibleAlternative>
+        {menu}
+      </ContextMenu>
+    );
+  },
+);
+
+UserMediaTile.displayName = "UserMediaTile";
+
+interface LocalUserMediaTileProps extends TileProps {
+  vm: LocalUserMediaViewModel;
+  onOpenProfile: () => void;
+}
+
+const LocalUserMediaTile = forwardRef<HTMLDivElement, LocalUserMediaTileProps>(
+  ({ vm, onOpenProfile, ...props }, ref) => {
+    const { t } = useTranslation();
+    const mirror = useObservableEagerState(vm.mirror);
+    const alwaysShow = useObservableEagerState(vm.alwaysShow);
+    const latestAlwaysShow = useLatest(alwaysShow);
+    const onSelectAlwaysShow = useCallback(
+      (e: Event) => {
+        e.preventDefault();
+        vm.setAlwaysShow(!latestAlwaysShow.current);
+      },
+      [vm, latestAlwaysShow],
+    );
+
+    return (
+      <UserMediaTile
+        ref={ref}
+        vm={vm}
+        mirror={mirror}
+        menuStart={
+          <ToggleMenuItem
+            Icon={VisibilityOnIcon}
+            label={t("video_tile.always_show")}
+            checked={alwaysShow}
+            onSelect={onSelectAlwaysShow}
+          />
+        }
+        menuEnd={
+          <MenuItem
+            Icon={UserProfileIcon}
+            label={t("common.profile")}
+            onSelect={onOpenProfile}
+          />
+        }
+        {...props}
+      />
+    );
+  },
+);
+
+LocalUserMediaTile.displayName = "LocalUserMediaTile";
+
+interface RemoteUserMediaTileProps extends TileProps {
+  vm: RemoteUserMediaViewModel;
+}
+
+const RemoteUserMediaTile = forwardRef<
+  HTMLDivElement,
+  RemoteUserMediaTileProps
+>(({ vm, ...props }, ref) => {
+  const { t } = useTranslation();
+  const locallyMuted = useObservableEagerState(vm.locallyMuted);
+  const localVolume = useObservableEagerState(vm.localVolume);
+  const onSelectMute = useCallback(
+    (e: Event) => {
+      e.preventDefault();
+      vm.toggleLocallyMuted();
+    },
+    [vm],
+  );
+  const onChangeLocalVolume = useCallback(
+    (v: number) => vm.setLocalVolume(v),
+    [vm],
+  );
+
+  const VolumeIcon = locallyMuted ? VolumeOffIcon : VolumeOnIcon;
+
+  return (
+    <UserMediaTile
+      ref={ref}
+      vm={vm}
+      mirror={false}
+      menuStart={
+        <>
+          <ToggleMenuItem
+            Icon={MicOffIcon}
+            label={t("video_tile.mute_for_me")}
+            checked={locallyMuted}
+            onSelect={onSelectMute}
+          />
+          {/* TODO: Figure out how to make this slider keyboard accessible */}
+          <MenuItem as="div" Icon={VolumeIcon} label={null} onSelect={null}>
+            <Slider
+              className={styles.volumeSlider}
+              label={t("video_tile.volume")}
+              value={localVolume}
+              onValueChange={onChangeLocalVolume}
+              min={0.1}
+              max={1}
+              step={0.01}
+              disabled={locallyMuted}
+            />
+          </MenuItem>
+        </>
+      }
+      {...props}
+    />
+  );
+});
+
+RemoteUserMediaTile.displayName = "RemoteUserMediaTile";
+
+interface GridTileProps {
+  vm: UserMediaViewModel;
+  onOpenProfile: () => void;
+  targetWidth: number;
+  targetHeight: number;
+  className?: string;
+  style?: ComponentProps<typeof animated.div>["style"];
+  showVideo: boolean;
+  showSpeakingIndicators: boolean;
+}
+
+export const GridTile = forwardRef<HTMLDivElement, GridTileProps>(
+  ({ vm, onOpenProfile, ...props }, ref) => {
+    const displayName = useDisplayName(vm);
+
+    if (vm instanceof LocalUserMediaViewModel) {
+      return (
+        <LocalUserMediaTile
+          ref={ref}
+          vm={vm}
+          onOpenProfile={onOpenProfile}
+          displayName={displayName}
+          {...props}
+        />
+      );
+    } else {
+      return (
+        <RemoteUserMediaTile
+          ref={ref}
+          vm={vm}
+          displayName={displayName}
+          {...props}
+        />
+      );
+    }
+  },
+);
+
+GridTile.displayName = "GridTile";