Remove duplicate IntentAndPlatformDerivedConfiguration interface

.eslintrc.cjs

@@ -99,13 +99,6 @@ module.exports = {
         "jsdoc/require-param-description": "off",
       },
     },
-    {
-      files: ["playwright/**"],
-      rules: {
-        // Playwright as a `use` function that has nothing to do with React hooks.
-        "react-hooks/rules-of-hooks": "off",
-      },
-    },
   ],
   settings: {
     react: {

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,39 +0,0 @@
-<!-- Thanks for submitting a PR! Please ensure the following requirements are met in order for us to review your PR -->
-
-## Content
-
-<!-- Describe shortly what has been changed -->
-
-## Motivation and context
-
-<!-- Provide link to the corresponding issue if applicable or explain the context -->
-
-## Screenshots / GIFs
-
-<!--
-
-You can use a table like this to show screenshots comparison.
-Uncomment this markdown table below and edit the last line `|||`:
-|copy screenshot of before here|copy screenshot of after here|
-
-|Before|After|
-|-|-|
-|||
- -->
-
-## Tests
-
-<!-- Explain how you tested your development -->
-
-- Step 1
-- Step 2
-- Step ...
--
-
-## Checklist
-
-- [ ] I have read through [CONTRIBUTING.md](https://github.com/element-hq/element-call/blob/livekit/CONTRIBUTING.md).
-- [ ] Pull request includes screenshots or videos if containing UI changes
-- [ ] Tests written for new code (and old code if feasible).
-- [ ] Linter and other CI checks pass.
-- [ ] I have licensed the changes to Element by completing the [Contributor License Agreement (CLA)](https://cla-assistant.io/element-hq/element-call)

.github/workflows/blocked.yaml

@@ -1,16 +1,7 @@
 name: Prevent blocked
 on:
-  # zizmor: ignore[dangerous-triggers]
-  # Reason: This workflow does not checkout code or use secrets.
-  # It only reads labels to set a failure status on the PR.
   pull_request_target:
     types: [opened, labeled, unlabeled, synchronize]
-
-permissions:
-  pull-requests: read
-  # Required to fail the check on the PR
-  statuses: write
-
 jobs:
   prevent-blocked:
     name: Prevent blocked

.github/workflows/build-and-publish-docker.yaml

@@ -20,13 +20,10 @@ jobs:
     runs-on: ubuntu-latest
     permissions:
       contents: write # required to upload release asset
-      packages: write # needed for publishing packages to GHCR
-      id-token: write # needed for login into tailscale with GitHub OIDC Token
+      packages: write
     steps:
       - name: Check it out
         uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
-        with:
-          persist-credentials: false
 
       - name: 📥 Download artifact
         uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
@@ -37,64 +34,26 @@ jobs:
           path: dist
 
       - name: Log in to container registry
-        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
+        uses: docker/login-action@5e57cd118135c172c3672efd75eb46360885c0ef # v3.6.0
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Connect to Tailscale
-        uses: tailscale/github-action@306e68a486fd2350f2bfc3b19fcd143891a4a2d8 # v4
-        if: github.event_name != 'pull_request'
-        with:
-          oauth-client-id: ${{ secrets.TS_OAUTH_CLIENT_ID }}
-          audience: ${{ secrets.TS_AUDIENCE }}
-          tags: tag:github-actions
-
-      - name: Compute vault jwt role name
-        id: vault-jwt-role
-        if: github.event_name != 'pull_request'
-        run: |
-          echo "role_name=github_service_management_$( echo "${{ github.repository }}" | sed -r 's|[/-]|_|g')" | tee -a "$GITHUB_OUTPUT"
-
-      - name: Get team registry token
-        id: import-secrets
-        uses: hashicorp/vault-action@4c06c5ccf5c0761b6029f56cfb1dcf5565918a3b # v3
-        if: github.event_name != 'pull_request'
-        with:
-          url: https://vault.infra.ci.i.element.dev
-          role: ${{ steps.vault-jwt-role.outputs.role_name }}
-          path: service-management/github-actions
-          jwtGithubAudience: https://vault.infra.ci.i.element.dev
-          method: jwt
-          secrets: |
-            services/voip-repositories/secret/data/oci.element.io username | OCI_USERNAME ;
-            services/voip-repositories/secret/data/oci.element.io password | OCI_PASSWORD ;
-
-      - name: Login to oci.element.io Registry
-        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3
-        if: github.event_name != 'pull_request'
-        with:
-          registry: oci-push.vpn.infra.element.io
-          username: ${{ steps.import-secrets.outputs.OCI_USERNAME }}
-          password: ${{ steps.import-secrets.outputs.OCI_PASSWORD }}
-
       - name: Extract metadata (tags, labels) for Docker
         id: meta
-        uses: docker/metadata-action@c299e40c65443455700f0fdfc63efafe5b349051 # v5.10.0
+        uses: docker/metadata-action@318604b99e75e41977312d83839a89be02ca4893 # v5.9.0
         with:
-          images: |
-            ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
-            oci-push.vpn.infra.element.io/element-call
-          tags: ${{ inputs.docker_tags }}
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: ${{ inputs.docker_tags}}
           labels: |
             org.opencontainers.image.licenses=AGPL-3.0-only OR LicenseRef-Element-Commercial
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3.12.0
+        uses: docker/setup-buildx-action@e468171a9de216ec08956ac3ada2f0791b6bd435 # v3.11.1
 
       - name: Build and push Docker image
-        uses: docker/build-push-action@10e90e3645eae34f1e60eeb005ba3a3d33f178e8 # v6.19.2
+        uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83 # v6.18.0
         with:
           context: .
           platforms: linux/amd64,linux/arm64

.github/workflows/build-element-call.yaml

@@ -7,7 +7,7 @@ on:
         type: string
       package:
         type: string # This would ideally be a `choice` type, but that isn't supported yet
-        description: The package type to be built. Must be one of 'full', 'embedded', or 'sdk'
+        description: The package type to be built. Must be one of 'full' or 'embedded'
         required: true
       build_mode:
         type: string # This would ideally be a `choice` type, but that isn't supported yet
@@ -33,8 +33,6 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
-        with:
-          persist-credentials: false
       - name: Enable Corepack
         run: corepack enable
       - name: Yarn cache
@@ -45,7 +43,7 @@ jobs:
       - name: Install dependencies
         run: "yarn install --immutable"
       - name: Build Element Call
-        run: yarn run build:"$PACKAGE":"$BUILD_MODE"
+        run: ${{ format('yarn run build:{0}:{1}', inputs.package, inputs.build_mode) }}
         env:
           SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
           SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
@@ -54,8 +52,6 @@ jobs:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
           VITE_APP_VERSION: ${{ inputs.vite_app_version }}
           NODE_OPTIONS: "--max-old-space-size=4096"
-          PACKAGE: ${{ inputs.package }}
-          BUILD_MODE: ${{ inputs.build_mode }}
       - name: Upload Artifact
         uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
         with:

.github/workflows/build.yaml

@@ -49,9 +49,7 @@ jobs:
     permissions:
       contents: write
       packages: write
-      id-token: write
     uses: ./.github/workflows/build-and-publish-docker.yaml
-    secrets: inherit
     with:
       artifact_run_id: ${{ github.run_id }}
       docker_tags: |
@@ -71,17 +69,3 @@ jobs:
       SENTRY_URL: ${{ secrets.SENTRY_URL }}
       SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
       CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
-
-  build_sdk_element_call:
-    # Use the embedded package vite build
-    uses: ./.github/workflows/build-element-call.yaml
-    with:
-      package: sdk
-      vite_app_version: ${{ github.event.release.tag_name || github.sha }}
-      build_mode: ${{ github.event_name == 'pull_request' && contains(github.event.pull_request.labels.*.name, 'development build') && 'development' || 'production' }}
-    secrets:
-      SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
-      SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
-      SENTRY_URL: ${{ secrets.SENTRY_URL }}
-      SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-      CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}

.github/workflows/changelog-label.yml

@@ -1,16 +1,8 @@
 name: PR changelog label
 
 on:
-  # zizmor: ignore[dangerous-triggers]
-  # This is safe because we do not use actions/checkout or execute untrusted code.
-  # Using pull_request_target is necessary to allow status writes for PRs from forks.
   pull_request_target:
     types: [labeled, unlabeled, opened]
-
-permissions:
-  pull-requests: read
-  statuses: write
-
 jobs:
   pr-changelog-label:
     runs-on: ubuntu-latest

.github/workflows/deploy-to-netlify.yaml

@@ -14,10 +14,6 @@ on:
       deployment_ref:
         required: true
         type: string
-      package:
-        required: true
-        type: string
-        description: Which package to deploy - 'full', 'embedded', or 'sdk'
       artifact_run_id:
         required: false
         type: string
@@ -54,7 +50,7 @@ jobs:
         with:
           github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
           run-id: ${{ inputs.artifact_run_id }}
-          name: build-output-${{ inputs.package }}
+          name: build-output-full
           path: webapp
 
       - name: Add redirects file
@@ -62,23 +58,15 @@ jobs:
         run: curl -s https://raw.githubusercontent.com/element-hq/element-call/main/config/netlify_redirects > webapp/_redirects
 
       - name: Add config file
-        run: |
-          if [ "${INPUTS_PACKAGE}" = "full" ]; then
-            curl -s "https://raw.githubusercontent.com/${INPUTS_PR_HEAD_FULL_NAME}/${INPUTS_PR_HEAD_REF}/config/config_netlify_preview.json" > webapp/config.json
-          else
-            curl -s "https://raw.githubusercontent.com/${INPUTS_PR_HEAD_FULL_NAME}/${INPUTS_PR_HEAD_REF}/config/config_netlify_preview_sdk.json" > webapp/config.json
-          fi
-        env:
-          INPUTS_PACKAGE: ${{ inputs.package }}
-          INPUTS_PR_HEAD_FULL_NAME: ${{ inputs.pr_head_full_name }}
-          INPUTS_PR_HEAD_REF: ${{ inputs.pr_head_ref }}
+        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@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654 # v3.0
         with:
           publish-dir: webapp
           deploy-message: "Deploy from GitHub Actions"
-          alias: ${{ inputs.package == 'sdk' && format('pr{0}-sdk', inputs.pr_number) || format('pr{0}', inputs.pr_number) }}
+          alias: pr${{ inputs.pr_number }}
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

.github/workflows/lint.yaml

@@ -8,8 +8,6 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
-        with:
-          persist-credentials: false
       - name: Enable Corepack
         run: corepack enable
       - name: Yarn cache

.github/workflows/pr-deploy.yaml

@@ -1,7 +1,5 @@
 name: Deploy previews for PRs
 on:
-  # zizmor: ignore[dangerous-triggers]
-  # Reason: This is now restricted to internal PRs only using the 'if' condition below.
   workflow_run:
     workflows: ["Build"]
     types:
@@ -9,14 +7,7 @@ on:
 
 jobs:
   prdetails:
-    # Logic:
-    # 1. Build must be successful
-    # 2. Event must be a pull_request
-    # 3. Head repository must be the SAME as the base repository (No Forks!)
-    if: >
-      github.event.workflow_run.conclusion == 'success' && 
-      github.event.workflow_run.event == 'pull_request' &&
-      github.event.workflow_run.head_repository.full_name == github.repository
+    if: ${{ github.event.workflow_run.conclusion == 'success' && github.event.workflow_run.event == 'pull_request' }}
     runs-on: ubuntu-latest
     outputs:
       pr_number: ${{ steps.prdetails.outputs.pr_id }}
@@ -29,7 +20,7 @@ jobs:
           owner: ${{ github.event.workflow_run.head_repository.owner.login }}
           branch: ${{ github.event.workflow_run.head_branch }}
 
-  netlify-full:
+  netlify:
     needs: prdetails
     permissions:
       deployments: write
@@ -40,24 +31,6 @@ jobs:
       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 }}
       deployment_ref: ${{ needs.prdetails.outputs.pr_data_json && fromJSON(needs.prdetails.outputs.pr_data_json).head.sha || github.ref || github.head_ref }}
-      package: full
-    secrets:
-      ELEMENT_BOT_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
-      NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-      NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
-
-  netlify-sdk:
-    needs: prdetails
-    permissions:
-      deployments: write
-    uses: ./.github/workflows/deploy-to-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 }}
-      deployment_ref: ${{ needs.prdetails.outputs.pr_data_json && fromJSON(needs.prdetails.outputs.pr_data_json).head.sha || github.ref || github.head_ref }}
-      package: sdk
     secrets:
       ELEMENT_BOT_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
       NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
@@ -69,9 +42,7 @@ jobs:
     permissions:
       contents: write
       packages: write
-      id-token: write
     uses: ./.github/workflows/build-and-publish-docker.yaml
-    secrets: inherit
     with:
       artifact_run_id: ${{ github.event.workflow_run.id || github.run_id }}
       docker_tags: |

.github/workflows/publish-embedded-packages.yaml

@@ -22,18 +22,8 @@ jobs:
       TAG: ${{ steps.tag.outputs.TAG }}
     steps:
       - name: Calculate VERSION
-        # Safely store dynamic values in environment variables
-        # to prevent shell injection (template-injection)
-        run: |
-          # The logic is executed within the shell using the env variables
-          if [ "$EVENT_NAME" = "release" ]; then
-            echo "VERSION=$RELEASE_TAG" >> "$GITHUB_ENV"
-          else
-            echo "VERSION=v0.0.0-pre.0" >> "$GITHUB_ENV"
-          fi
-        env:
-          RELEASE_TAG: ${{ github.event.release.tag_name }}
-          EVENT_NAME: ${{ github.event_name }}
+        # We should only use the hard coded test value for a dry run
+        run: echo "VERSION=${{ github.event_name == 'release' && github.event.release.tag_name || 'v0.0.0-pre.0' }}" >> "$GITHUB_ENV"
       - id: dry_run
         name: Set DRY_RUN
         # We perform a dry run for all events except releases.
@@ -81,9 +71,7 @@ jobs:
       contents: write # required to upload release asset
     steps:
       - name: Determine filename
-        run: echo "FILENAME_PREFIX=element-call-embedded-${NEEDS_VERSIONING_OUTPUTS_UNPREFIXED_VERSION}" >> "$GITHUB_ENV"
-        env:
-          NEEDS_VERSIONING_OUTPUTS_UNPREFIXED_VERSION: ${{ needs.versioning.outputs.UNPREFIXED_VERSION }}
+        run: echo "FILENAME_PREFIX=element-call-embedded-${{ needs.versioning.outputs.UNPREFIXED_VERSION }}" >> "$GITHUB_ENV"
       - name: 📥 Download built element-call artifact
         uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
         with:
@@ -92,9 +80,9 @@ jobs:
           name: build-output-embedded
           path: ${{ env.FILENAME_PREFIX}}
       - name: Create Tarball
-        run: tar --numeric-owner -cvzf ${FILENAME_PREFIX}.tar.gz ${FILENAME_PREFIX}
+        run: tar --numeric-owner -cvzf ${{ env.FILENAME_PREFIX }}.tar.gz ${{ env.FILENAME_PREFIX }}
       - name: Create Checksum
-        run: find ${FILENAME_PREFIX} -type f -print0 | sort -z | xargs -0 sha256sum | tee ${FILENAME_PREFIX}.sha256
+        run: find ${{ env.FILENAME_PREFIX }} -type f -print0 | sort -z | xargs -0 sha256sum | tee ${{ env.FILENAME_PREFIX }}.sha256
       - name: Upload
         if: ${{ needs.versioning.outputs.DRY_RUN == 'false' }}
         uses: softprops/action-gh-release@a06a81a03ee405af7f2048a818ed3f03bbf83c7b # v2
@@ -116,8 +104,6 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
-        with:
-          persist-credentials: false
 
       - name: 📥 Download built element-call artifact
         uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
@@ -137,16 +123,13 @@ jobs:
       - name: Publish npm
         working-directory: embedded/web
         run: |
-          npm version ${NEEDS_VERSIONING_OUTPUTS_PREFIXED_VERSION} --no-git-tag-version
+          npm version ${{ needs.versioning.outputs.PREFIXED_VERSION }} --no-git-tag-version
           echo "ARTIFACT_VERSION=$(jq '.version' --raw-output package.json)" >> "$GITHUB_ENV"
-          npm publish --provenance --access public --tag ${NEEDS_VERSIONING_OUTPUTS_TAG} ${{ needs.versioning.outputs.DRY_RUN == 'true' && '--dry-run' || '' }}
-        env:
-          NEEDS_VERSIONING_OUTPUTS_PREFIXED_VERSION: ${{ needs.versioning.outputs.PREFIXED_VERSION }}
-          NEEDS_VERSIONING_OUTPUTS_TAG: ${{ needs.versioning.outputs.TAG }}
+          npm publish --provenance --access public --tag ${{ needs.versioning.outputs.TAG }} ${{ needs.versioning.outputs.DRY_RUN == 'true' && '--dry-run' || '' }}
 
       - id: artifact_version
         name: Output artifact version
-        run: echo "ARTIFACT_VERSION=${ARTIFACT_VERSION}" >> "$GITHUB_OUTPUT"
+        run: echo "ARTIFACT_VERSION=${{env.ARTIFACT_VERSION}}" >> "$GITHUB_OUTPUT"
 
   publish_android:
     needs: [build_element_call, versioning]
@@ -160,8 +143,6 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
-        with:
-          persist-credentials: false
 
       - name: 📥 Download built element-call artifact
         uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
@@ -172,7 +153,7 @@ jobs:
           path: embedded/android/lib/src/main/assets/element-call
 
       - name: ☕️ Setup Java
-        uses: actions/setup-java@c1e323688fd81a25caa38c78aa6df2d33d3e20d9 # v4
+        uses: actions/setup-java@c5195efecf7bdfc987ee8bae7a71cb8b11521c00 # v4
         with:
           distribution: "temurin"
           java-version: "17"
@@ -180,19 +161,16 @@ jobs:
       - name: Get artifact version
         # Anything that is not a final release will be tagged as a snapshot
         run: |
-          if [[ "${NEEDS_VERSIONING_OUTPUTS_TAG}" == "latest" ]]; then
-            echo "ARTIFACT_VERSION=${NEEDS_VERSIONING_OUTPUTS_UNPREFIXED_VERSION}" >> "$GITHUB_ENV"
-          elif [[ "${NEEDS_VERSIONING_OUTPUTS_TAG}" == "rc" ]]; then
-            echo "ARTIFACT_VERSION=${NEEDS_VERSIONING_OUTPUTS_UNPREFIXED_VERSION}" >> "$GITHUB_ENV"
+          if [[ "${{ needs.versioning.outputs.TAG }}" == "latest" ]]; then
+            echo "ARTIFACT_VERSION=${{ needs.versioning.outputs.UNPREFIXED_VERSION }}" >> "$GITHUB_ENV"
+          elif [[ "${{ needs.versioning.outputs.TAG }}" == "rc" ]]; then
+            echo "ARTIFACT_VERSION=${{ needs.versioning.outputs.UNPREFIXED_VERSION }}" >> "$GITHUB_ENV"
           else
-            echo "ARTIFACT_VERSION=${NEEDS_VERSIONING_OUTPUTS_UNPREFIXED_VERSION}-SNAPSHOT" >> "$GITHUB_ENV"
+            echo "ARTIFACT_VERSION=${{ needs.versioning.outputs.UNPREFIXED_VERSION }}-SNAPSHOT" >> "$GITHUB_ENV"
           fi
-        env:
-          NEEDS_VERSIONING_OUTPUTS_TAG: ${{ needs.versioning.outputs.TAG }}
-          NEEDS_VERSIONING_OUTPUTS_UNPREFIXED_VERSION: ${{ needs.versioning.outputs.UNPREFIXED_VERSION }}
 
       - name: Set version string
-        run: sed -i "s/0.0.0/${ARTIFACT_VERSION}/g" embedded/android/lib/src/main/kotlin/io/element/android/call/embedded/Version.kt
+        run: sed -i "s/0.0.0/${{ env.ARTIFACT_VERSION }}/g" embedded/android/lib/src/main/kotlin/io/element/android/call/embedded/Version.kt
 
       - name: Publish AAR
         working-directory: embedded/android
@@ -206,7 +184,7 @@ jobs:
 
       - id: artifact_version
         name: Output artifact version
-        run: echo "ARTIFACT_VERSION=${ARTIFACT_VERSION}" >> "$GITHUB_OUTPUT"
+        run: echo "ARTIFACT_VERSION=${{env.ARTIFACT_VERSION}}" >> "$GITHUB_OUTPUT"
 
   publish_ios:
     needs: [build_element_call, versioning]
@@ -222,7 +200,6 @@ jobs:
         uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
         with:
           path: element-call
-          persist-credentials: false
 
       - name: 📥 Download built element-call artifact
         uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
@@ -238,18 +215,15 @@ jobs:
           repository: element-hq/element-call-swift
           path: element-call-swift
           token: ${{ secrets.SWIFT_RELEASE_TOKEN }}
-          persist-credentials: false
 
       - name: Copy files
         run: rsync -a --delete --exclude .git element-call/embedded/ios/ element-call-swift
 
       - name: Get artifact version
-        run: echo "ARTIFACT_VERSION=${NEEDS_VERSIONING_OUTPUTS_UNPREFIXED_VERSION}" >> "$GITHUB_ENV"
-        env:
-          NEEDS_VERSIONING_OUTPUTS_UNPREFIXED_VERSION: ${{ needs.versioning.outputs.UNPREFIXED_VERSION }}
+        run: echo "ARTIFACT_VERSION=${{ needs.versioning.outputs.UNPREFIXED_VERSION }}" >> "$GITHUB_ENV"
 
       - name: Set version string
-        run: sed -i "s/0.0.0/${ARTIFACT_VERSION}/g" element-call-swift/Sources/EmbeddedElementCall/EmbeddedElementCall.swift
+        run: sed -i "s/0.0.0/${{ env.ARTIFACT_VERSION }}/g" element-call-swift/Sources/EmbeddedElementCall/EmbeddedElementCall.swift
 
       - name: Test build
         working-directory: element-call-swift
@@ -261,22 +235,17 @@ jobs:
           git config --global user.email "ci@element.io"
           git config --global user.name "Element CI"
           git add -A
-          git commit -am "Release ${NEEDS_VERSIONING_OUTPUTS_PREFIXED_VERSION}"
-          git tag -a ${ARTIFACT_VERSION} -m "${GITHUB_EVENT_RELEASE_HTML_URL}"
-        env:
-          NEEDS_VERSIONING_OUTPUTS_PREFIXED_VERSION: ${{ needs.versioning.outputs.PREFIXED_VERSION }}
-          GITHUB_EVENT_RELEASE_HTML_URL: ${{ github.event.release.html_url }}
+          git commit -am "Release ${{ needs.versioning.outputs.PREFIXED_VERSION }}"
+          git tag -a ${{ env.ARTIFACT_VERSION }} -m "${{ github.event.release.html_url }}"
 
       - name: Push
         working-directory: element-call-swift
         run: |
-          git push "https://x-access-token:${SWIFT_RELEASE_TOKEN}@github.com/element-hq/element-call-swift.git" --tags ${{ needs.versioning.outputs.DRY_RUN == 'true' && '--dry-run' || '' }}
-        env:
-          SWIFT_RELEASE_TOKEN: ${{ secrets.SWIFT_RELEASE_TOKEN }}
+          git push --tags ${{ needs.versioning.outputs.DRY_RUN == 'true' && '--dry-run' || '' }}
 
       - id: artifact_version
         name: Output artifact version
-        run: echo "ARTIFACT_VERSION=${ARTIFACT_VERSION}" >> "$GITHUB_OUTPUT"
+        run: echo "ARTIFACT_VERSION=${{env.ARTIFACT_VERSION}}" >> "$GITHUB_OUTPUT"
 
   release_notes:
     needs: [versioning, publish_npm, publish_android, publish_ios]
@@ -288,13 +257,9 @@ jobs:
     steps:
       - name: Log versions
         run: |
-          echo "NPM: ${NEEDS_PUBLISH_NPM_OUTPUTS_ARTIFACT_VERSION}"
-          echo "Android: ${NEEDS_PUBLISH_ANDROID_OUTPUTS_ARTIFACT_VERSION}"
-          echo "iOS: ${NEEDS_PUBLISH_IOS_OUTPUTS_ARTIFACT_VERSION}"
-        env:
-          NEEDS_PUBLISH_NPM_OUTPUTS_ARTIFACT_VERSION: ${{ needs.publish_npm.outputs.ARTIFACT_VERSION }}
-          NEEDS_PUBLISH_ANDROID_OUTPUTS_ARTIFACT_VERSION: ${{ needs.publish_android.outputs.ARTIFACT_VERSION }}
-          NEEDS_PUBLISH_IOS_OUTPUTS_ARTIFACT_VERSION: ${{ needs.publish_ios.outputs.ARTIFACT_VERSION }}
+          echo "NPM: ${{ needs.publish_npm.outputs.ARTIFACT_VERSION }}"
+          echo "Android: ${{ needs.publish_android.outputs.ARTIFACT_VERSION }}"
+          echo "iOS: ${{ needs.publish_ios.outputs.ARTIFACT_VERSION }}"
       - name: Add release notes
         if: ${{ needs.versioning.outputs.DRY_RUN == 'false' }}
         uses: softprops/action-gh-release@a06a81a03ee405af7f2048a818ed3f03bbf83c7b # v2

.github/workflows/publish.yaml

@@ -38,9 +38,9 @@ jobs:
           name: build-output-full
           path: ${{ env.FILENAME_PREFIX }}
       - name: Create Tarball
-        run: tar --numeric-owner --transform "s/dist/${FILENAME_PREFIX}/" -cvzf ${FILENAME_PREFIX}.tar.gz ${FILENAME_PREFIX}
+        run: tar --numeric-owner --transform "s/dist/${{ env.FILENAME_PREFIX }}/" -cvzf ${{ env.FILENAME_PREFIX }}.tar.gz ${{ env.FILENAME_PREFIX }}
       - name: Create Checksum
-        run: find ${FILENAME_PREFIX} -type f -print0 | sort -z | xargs -0 sha256sum | tee ${FILENAME_PREFIX}.sha256
+        run: find ${{ env.FILENAME_PREFIX }} -type f -print0 | sort -z | xargs -0 sha256sum | tee ${{ env.FILENAME_PREFIX }}.sha256
       - name: Upload
         uses: softprops/action-gh-release@a06a81a03ee405af7f2048a818ed3f03bbf83c7b # v2
         with:
@@ -55,9 +55,7 @@ jobs:
     permissions:
       contents: write
       packages: write
-      id-token: write
     uses: ./.github/workflows/build-and-publish-docker.yaml
-    secrets: inherit
     with:
       artifact_run_id: ${{ github.event.workflow_run.id || github.run_id }}
       docker_tags: |

.github/workflows/test.yaml

@@ -10,8 +10,6 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
-        with:
-          persist-credentials: false
       - name: Enable Corepack
         run: corepack enable
       - name: Yarn cache
@@ -24,7 +22,7 @@ jobs:
       - name: Vitest
         run: "yarn run test:coverage"
       - name: Upload to codecov
-        uses: codecov/codecov-action@671740ac38dd9b0130fbe1cec585b89eea48d3de # v5
+        uses: codecov/codecov-action@5a1091511ad55cbe89839c7260b706298ca349f7 # v5
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
         with:
@@ -36,8 +34,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
-        with:
-          persist-credentials: false
       - name: Enable Corepack
         run: corepack enable
       - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4

.github/workflows/translations-download.yaml

@@ -14,8 +14,6 @@ jobs:
     steps:
       - name: Checkout the code
         uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
-        with:
-          persist-credentials: false
 
       - name: Enable Corepack
         run: corepack enable
@@ -44,7 +42,7 @@ jobs:
 
       - name: Create Pull Request
         id: cpr
-        uses: peter-evans/create-pull-request@22a9089034f40e5a961c8808d113e2c98fb63676 # v7.0.11
+        uses: peter-evans/create-pull-request@84ae59a2cdc2258d6fa0732dd66352dddae2a412 # v7.0.9
         with:
           token: ${{ secrets.ELEMENT_BOT_TOKEN }}
           branch: actions/localazy-download

.github/workflows/translations-upload.yaml

@@ -15,8 +15,6 @@ jobs:
     steps:
       - name: Checkout the code
         uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
-        with:
-          persist-credentials: false
 
       - name: Upload
         uses: localazy/upload@27e6b5c0fddf4551596b42226b1c24124335d24a # v1

.github/workflows/zizmor.yml

@@ -1,23 +0,0 @@
-name: GitHub Actions Security Analysis with zizmor 🌈
-
-on:
-  push:
-    branches: ["livekit", "full-mesh"]
-  pull_request: {}
-
-permissions: {}
-
-jobs:
-  zizmor:
-    name: Run zizmor 🌈
-    runs-on: ubuntu-latest
-    permissions:
-      security-events: write # Required for upload-sarif (used by zizmor-action) to upload SARIF files.
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-        with:
-          persist-credentials: false
-
-      - name: Run zizmor 🌈
-        uses: zizmorcore/zizmor-action@71321a20a9ded102f6e9ce5718a2fcec2c4f70d8 # v0.5.2

README.md

@@ -3,7 +3,6 @@
 [![Chat](https://img.shields.io/matrix/webrtc:matrix.org)](https://matrix.to/#/#webrtc:matrix.org)
 [![Localazy](https://img.shields.io/endpoint?url=https%3A%2F%2Fconnect.localazy.com%2Fstatus%2Felement-call%2Fdata%3Fcontent%3Dall%26title%3Dlocalazy%26logo%3Dtrue)](https://localazy.com/p/element-call)
 [![License](https://img.shields.io/github/license/element-hq/element-call)](LICENSE-AGPL-3.0)
-[![Codecov](https://img.shields.io/codecov/c/github/element-hq/element-call)](https://app.codecov.io/gh/element-hq/element-call)
 
 [🎬 Live Demo 🎬](https://call.element.io)
 

backend/dev_homeserver-othersite.yaml

@@ -38,8 +38,6 @@ experimental_features:
   # MSC4222 needed for syncv2 state_after. This allow clients to
   # correctly track the state of the room.
   msc4222_enabled: true
-  # sticky events for MatrixRTC user state
-  msc4354_enabled: true
 
 # The maximum allowed duration by which sent events can be delayed, as
 # per MSC4140. Must be a positive value if set.  Defaults to no

backend/dev_homeserver.yaml

@@ -38,7 +38,7 @@ experimental_features:
   # MSC4222 needed for syncv2 state_after. This allow clients to
   # correctly track the state of the room.
   msc4222_enabled: true
-  # sticky events for MatrixRTC user state
+  # sticky events for matrixRTC user state
   msc4354_enabled: true
 
 # The maximum allowed duration by which sent events can be delayed, as

backend/dev_nginx.conf

@@ -181,10 +181,7 @@ server {
 
 }
 
-# Convenience reverse proxy for the call.m.localhost domain to element call
-# running on the host either via
-# - yarn dev --host or
-# - falling back to http (the element call docker container)
+# Convenience reverse proxy for the call.m.localhost domain to yarn dev --host
 server {
     listen                  80;
     listen                  [::]:80;
@@ -200,7 +197,7 @@ server {
     ssl_certificate         /root/ssl/cert.pem;
     ssl_certificate_key     /root/ssl/key.pem;
 
-    # 1. Attempt HTTPS first
+
     location ^~ / {
 
       proxy_set_header Host $host;
@@ -211,23 +208,8 @@ server {
       proxy_pass https://host.docker.internal:3000;
       proxy_ssl_verify              off;
 
-      # 2. Redirect specific errors (e.g., 502 Bad Gateway  or 504 Timeout)
-      # to the named fallback location
-      error_page 502 503 504 = @http_fallback;
-
-    }
-
-    # 3. Fallback location using HTTP
-    location @http_fallback {
-
-      proxy_set_header Host $host;
-      proxy_set_header X-Real-IP $remote_addr;
-      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-      proxy_set_header X-Forwarded-Proto $scheme;
-
-      proxy_pass http://host.docker.internal:8080;
-
     }
+    
     error_page   500 502 503 504  /50x.html;
 
 }

backend/playwright_homeserver-othersite.yaml

@@ -38,8 +38,6 @@ experimental_features:
   # MSC4222 needed for syncv2 state_after. This allow clients to
   # correctly track the state of the room.
   msc4222_enabled: true
-  # sticky events for MatrixRTC user state
-  msc4354_enabled: true
 
 # The maximum allowed duration by which sent events can be delayed, as
 # per MSC4140. Must be a positive value if set.  Defaults to no

backend/playwright_homeserver.yaml

@@ -38,8 +38,6 @@ experimental_features:
   # MSC4222 needed for syncv2 state_after. This allow clients to
   # correctly track the state of the room.
   msc4222_enabled: true
-  # sticky events for MatrixRTC user state
-  msc4354_enabled: true
 
 # The maximum allowed duration by which sent events can be delayed, as
 # per MSC4140. Must be a positive value if set.  Defaults to no

config/config_netlify_preview_sdk.json

@@ -1,16 +0,0 @@
-{
-  "default_server_config": {
-    "m.homeserver": {
-      "base_url": "https://call-unstable.ems.host",
-      "server_name": "call-unstable.ems.host"
-    }
-  },
-  "ssla": "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf",
-  "matrix_rtc_session": {
-    "wait_for_key_rotation_ms": 3000,
-    "membership_event_expiry_ms": 180000000,
-    "delayed_leave_event_delay_ms": 18000,
-    "delayed_leave_event_restart_ms": 4000,
-    "network_error_retry_ms": 100
-  }
-}

dev-backend-docker-compose.yml

@@ -3,7 +3,7 @@ networks:
 
 services:
   auth-service:
-    image: ghcr.io/element-hq/lk-jwt-service:sha-f8ddd00
+    image: ghcr.io/element-hq/lk-jwt-service:latest-ci
     pull_policy: always
     hostname: auth-server
     environment:
@@ -25,7 +25,7 @@ services:
       - ecbackend
 
   auth-service-1:
-    image: ghcr.io/element-hq/lk-jwt-service:sha-f8ddd00
+    image: ghcr.io/element-hq/lk-jwt-service:latest-ci
     pull_policy: always
     hostname: auth-server-1
     environment:
@@ -47,7 +47,7 @@ services:
       - ecbackend
 
   livekit:
-    image: livekit/livekit-server:v1.9.11
+    image: livekit/livekit-server:v1.9.4
     pull_policy: always
     hostname: livekit-sfu
     command: --dev --config /etc/livekit.yaml
@@ -67,7 +67,7 @@ services:
       - ecbackend
 
   livekit-1:
-    image: livekit/livekit-server:v1.9.11
+    image: livekit/livekit-server:v1.9.4
     pull_policy: always
     hostname: livekit-sfu-1
     command: --dev --config /etc/livekit.yaml
@@ -88,7 +88,7 @@ services:
 
   synapse:
     hostname: homeserver
-    image: ghcr.io/element-hq/synapse:latest
+    image: docker.io/matrixdotorg/synapse:latest
     pull_policy: always
     environment:
       - SYNAPSE_CONFIG_PATH=/data/cfg/homeserver.yaml
@@ -106,7 +106,7 @@ services:
 
   synapse-1:
     hostname: homeserver-1
-    image: ghcr.io/element-hq/synapse:latest
+    image: docker.io/matrixdotorg/synapse:latest
     pull_policy: always
     environment:
       - SYNAPSE_CONFIG_PATH=/data/cfg/homeserver.yaml

docs/self-hosting.md

@@ -152,40 +152,6 @@ handle {
 }
 ```
 
-Using Haproxy, you can achieve this by:
-
-```
-# Frontend
-    # Match /livekit/sfu/ path
-    acl is_sfu path_beg -i /livekit/sfu/
-    use_backend sfu_backend if is_sfu matrixrtc_domain
-
-    acl is_mxrtc_auth path_beg -i /sfu/get
-    use_backend mxrtc_auth_backend if is_mxrtc_auth matrixrtc_domain
-
-# Backend
-## MatrixRTC backend
-backend sfu_backend
-    server livekit 127.0.0.1:7880
-    http-request set-path %[path,regsub(^/livekit/sfu/,/)]
-    http-request set-header Host %[req.hdr(host)]
-    timeout server 120s
-    # WebSocket support
-    option forwardfor
-    option http-server-close
-    option http-buffer-request
-
-backend mxrtc_auth_backend
-    server sfu 127.0.0.1:8070
-    http-request set-header Host %[req.hdr(host)]
-    timeout server 120s
-    # WebSocket support
-    option forwardfor
-    option http-server-close
-    option http-buffer-request
-
-```
-
 #### MatrixRTC backend announcement
 
 > [!IMPORTANT]

docs/url-params.md

@@ -46,32 +46,32 @@ possible to support encryption.
 
 These parameters are relevant to both [widget](./embedded-standalone.md) and [standalone](./embedded-standalone.md) modes:
 
-| Name                                           | Values                                                                                               | Required for widget                                                                               | Required for SPA             | Description                                                                                                                                                                                                                                                                                                                                                                                         |
-| ---------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `intent`                                       | `start_call`, `join_existing`, `start_call_dm`, `join_existing_dm.                                   | No, defaults to `start_call`                                                                      | No, defaults to `start_call` | The intent is a special url parameter that defines the defaults for all the other parameters. In most cases it should be enough to only set the intent to setup element-call.                                                                                                                                                                                                                       |
-| `allowIceFallback`                             | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Allows use of fallback STUN servers for ICE if the user's homeserver doesn’t provide any.                                                                                                                                                                                                                                                                                                           |
-| `posthogUserId`                                | Posthog analytics ID                                                                                 | No                                                                                                | No                           | Available only with user's consent for sharing telemetry in Element Web.                                                                                                                                                                                                                                                                                                                            |
-| `appPrompt`                                    | `true` or `false`                                                                                    | No, defaults to `true`                                                                            | No, defaults to `true`       | Prompts the user to launch the native mobile app upon entering a room, applicable only on Android and iOS, and must be enabled in config.                                                                                                                                                                                                                                                           |
-| `confineToRoom`                                | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Keeps the user confined to the current call/room.                                                                                                                                                                                                                                                                                                                                                   |
-| `displayName`                                  |                                                                                                      | No                                                                                                | No                           | Display name used for auto-registration.                                                                                                                                                                                                                                                                                                                                                            |
-| `enableE2EE` (deprecated)                      | `true` or `false`                                                                                    | No, defaults to `true`                                                                            | No, defaults to `true`       | Legacy flag to enable end-to-end encryption, not used in the `livekit` branch.                                                                                                                                                                                                                                                                                                                      |
-| `fontScale`                                    | A decimal number such as `0.9`                                                                       | No, defaults to `1.0`                                                                             | No, defaults to `1.0`        | Factor by which to scale the interface's font size.                                                                                                                                                                                                                                                                                                                                                 |
-| `fonts`                                        |                                                                                                      | No                                                                                                | No                           | Defines the font(s) used by the interface. Multiple font parameters can be specified: `?font=font-one&font=font-two...`.                                                                                                                                                                                                                                                                            |
-| `header`                                       | `none`, `standard` or `app_bar`                                                                      | No, defaults to `standard`                                                                        | No, defaults to `standard`   | The style of headers to show. `standard` is the default arrangement, `none` hides the header entirely, and `app_bar` produces a header with a back button like you might see in mobile apps. The callback for the back button is `window.controls.onBackButtonPressed`.                                                                                                                             |
-| `hideScreensharing`                            | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Hides the screen-sharing button.                                                                                                                                                                                                                                                                                                                                                                    |
-| `homeserver`                                   |                                                                                                      | Not applicable                                                                                    | No                           | Homeserver for registering a new (guest) user, configures non-default guest user server when creating a spa link.                                                                                                                                                                                                                                                                                   |
-| `lang`                                         | [BCP 47](https://www.rfc-editor.org/info/bcp47) code                                                 | No                                                                                                | No                           | The language the app should use.                                                                                                                                                                                                                                                                                                                                                                    |
-| `password`                                     |                                                                                                      | No                                                                                                | No                           | E2EE password when using a shared secret. (For individual sender keys in embedded mode this is not required.)                                                                                                                                                                                                                                                                                       |
-| `perParticipantE2EE`                           | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Enables per participant encryption with Keys exchanged over encrypted matrix room messages.                                                                                                                                                                                                                                                                                                         |
-| `controlledAudioDevices`                       | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Whether the [global JS controls for audio devices](./controls.md#audio-devices) should be enabled, allowing the list of audio devices to be controlled by the app hosting Element Call.                                                                                                                                                                                                             |
-| `roomId`                                       | [Matrix Room ID](https://spec.matrix.org/v1.12/appendices/#room-ids)                                 | Yes                                                                                               | No                           | Anything about what room we're pointed to should be from useRoomIdentifier which parses the path and resolves alias with respect to the default server name, however roomId is an exception as we need the room ID in embedded widget mode, and not the room alias (or even the via params because we are not trying to join it). This is also not validated, where it is in `useRoomIdentifier()`. |
-| `showControls`                                 | `true` or `false`                                                                                    | No, defaults to `true`                                                                            | No, defaults to `true`       | Displays controls like mute, screen-share, invite, and hangup buttons during a call.                                                                                                                                                                                                                                                                                                                |
-| `skipLobby` (deprecated: use `intent` instead) | `true` or `false`                                                                                    | No. If `intent` is explicitly `start_call` then defaults to `true`. Otherwise defaults to `false` | No, defaults to `false`      | Skips the lobby to join a call directly, can be combined with preload in widget. When `true` the audio and video inputs will be muted by default. (This means there currently is no way to start without muted video if one wants to skip the lobby. Also not in widget mode.)                                                                                                                      |
-| `theme`                                        | One of: `light`, `dark`, `light-high-contrast`, `dark-high-contrast`                                 | No, defaults to `dark`                                                                            | No, defaults to `dark`       | UI theme to use.                                                                                                                                                                                                                                                                                                                                                                                    |
-| `viaServers`                                   | Comma separated list of [Matrix Server Names](https://spec.matrix.org/v1.12/appendices/#server-name) | Not applicable                                                                                    | No                           | Homeserver for joining a room, non-empty value required for rooms not on the user’s default homeserver.                                                                                                                                                                                                                                                                                             |
-| `sendNotificationType`                         | `ring` or `notification`                                                                             | No                                                                                                | No                           | Will send a "ring" or "notification" `m.rtc.notification` event if the user is the first one in the call.                                                                                                                                                                                                                                                                                           |
-| `autoLeaveWhenOthersLeft`                      | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Whether the app should automatically leave the call when there is no one left in the call.                                                                                                                                                                                                                                                                                                          |
-| `waitForCallPickup`                            | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | When sending a notification, show UI that the app is awaiting an answer, play a dial tone, and (in widget mode) auto-close the widget once the notification expires.                                                                                                                                                                                                                                |
+| Name                                                    | Values                                                                                               | Required for widget                                                                               | Required for SPA             | Description                                                                                                                                                                                                                                                                                                                                                                                         |
+| ------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `intent`                                                | `start_call`, `join_existing`, `start_call_dm`, `join_existing_dm.                                   | No, defaults to `start_call`                                                                      | No, defaults to `start_call` | The intent is a special url parameter that defines the defaults for all the other parameters. In most cases it should be enough to only set the intent to setup element-call.                                                                                                                                                                                                                       |
+| `allowIceFallback`                                      | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Allows use of fallback STUN servers for ICE if the user's homeserver doesn’t provide any.                                                                                                                                                                                                                                                                                                           |
+| `analyticsID` (deprecated: use `posthogUserId` instead) | Posthog analytics ID                                                                                 | No                                                                                                | No                           | Available only with user's consent for sharing telemetry in Element Web.                                                                                                                                                                                                                                                                                                                            |
+| `appPrompt`                                             | `true` or `false`                                                                                    | No, defaults to `true`                                                                            | No, defaults to `true`       | Prompts the user to launch the native mobile app upon entering a room, applicable only on Android and iOS, and must be enabled in config.                                                                                                                                                                                                                                                           |
+| `confineToRoom`                                         | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Keeps the user confined to the current call/room.                                                                                                                                                                                                                                                                                                                                                   |
+| `displayName`                                           |                                                                                                      | No                                                                                                | No                           | Display name used for auto-registration.                                                                                                                                                                                                                                                                                                                                                            |
+| `enableE2EE` (deprecated)                               | `true` or `false`                                                                                    | No, defaults to `true`                                                                            | No, defaults to `true`       | Legacy flag to enable end-to-end encryption, not used in the `livekit` branch.                                                                                                                                                                                                                                                                                                                      |
+| `fontScale`                                             | A decimal number such as `0.9`                                                                       | No, defaults to `1.0`                                                                             | No, defaults to `1.0`        | Factor by which to scale the interface's font size.                                                                                                                                                                                                                                                                                                                                                 |
+| `fonts`                                                 |                                                                                                      | No                                                                                                | No                           | Defines the font(s) used by the interface. Multiple font parameters can be specified: `?font=font-one&font=font-two...`.                                                                                                                                                                                                                                                                            |
+| `header`                                                | `none`, `standard` or `app_bar`                                                                      | No, defaults to `standard`                                                                        | No, defaults to `standard`   | The style of headers to show. `standard` is the default arrangement, `none` hides the header entirely, and `app_bar` produces a header with a back button like you might see in mobile apps. The callback for the back button is `window.controls.onBackButtonPressed`.                                                                                                                             |
+| `hideScreensharing`                                     | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Hides the screen-sharing button.                                                                                                                                                                                                                                                                                                                                                                    |
+| `homeserver`                                            |                                                                                                      | Not applicable                                                                                    | No                           | Homeserver for registering a new (guest) user, configures non-default guest user server when creating a spa link.                                                                                                                                                                                                                                                                                   |
+| `lang`                                                  | [BCP 47](https://www.rfc-editor.org/info/bcp47) code                                                 | No                                                                                                | No                           | The language the app should use.                                                                                                                                                                                                                                                                                                                                                                    |
+| `password`                                              |                                                                                                      | No                                                                                                | No                           | E2EE password when using a shared secret. (For individual sender keys in embedded mode this is not required.)                                                                                                                                                                                                                                                                                       |
+| `perParticipantE2EE`                                    | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Enables per participant encryption with Keys exchanged over encrypted matrix room messages.                                                                                                                                                                                                                                                                                                         |
+| `controlledAudioDevices`                                | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Whether the [global JS controls for audio devices](./controls.md#audio-devices) should be enabled, allowing the list of audio devices to be controlled by the app hosting Element Call.                                                                                                                                                                                                             |
+| `roomId`                                                | [Matrix Room ID](https://spec.matrix.org/v1.12/appendices/#room-ids)                                 | Yes                                                                                               | No                           | Anything about what room we're pointed to should be from useRoomIdentifier which parses the path and resolves alias with respect to the default server name, however roomId is an exception as we need the room ID in embedded widget mode, and not the room alias (or even the via params because we are not trying to join it). This is also not validated, where it is in `useRoomIdentifier()`. |
+| `showControls`                                          | `true` or `false`                                                                                    | No, defaults to `true`                                                                            | No, defaults to `true`       | Displays controls like mute, screen-share, invite, and hangup buttons during a call.                                                                                                                                                                                                                                                                                                                |
+| `skipLobby` (deprecated: use `intent` instead)          | `true` or `false`                                                                                    | No. If `intent` is explicitly `start_call` then defaults to `true`. Otherwise defaults to `false` | No, defaults to `false`      | Skips the lobby to join a call directly, can be combined with preload in widget. When `true` the audio and video inputs will be muted by default. (This means there currently is no way to start without muted video if one wants to skip the lobby. Also not in widget mode.)                                                                                                                      |
+| `theme`                                                 | One of: `light`, `dark`, `light-high-contrast`, `dark-high-contrast`                                 | No, defaults to `dark`                                                                            | No, defaults to `dark`       | UI theme to use.                                                                                                                                                                                                                                                                                                                                                                                    |
+| `viaServers`                                            | Comma separated list of [Matrix Server Names](https://spec.matrix.org/v1.12/appendices/#server-name) | Not applicable                                                                                    | No                           | Homeserver for joining a room, non-empty value required for rooms not on the user’s default homeserver.                                                                                                                                                                                                                                                                                             |
+| `sendNotificationType`                                  | `ring` or `notification`                                                                             | No                                                                                                | No                           | Will send a "ring" or "notification" `m.rtc.notification` event if the user is the first one in the call.                                                                                                                                                                                                                                                                                           |
+| `autoLeaveWhenOthersLeft`                               | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Whether the app should automatically leave the call when there is no one left in the call.                                                                                                                                                                                                                                                                                                          |
+| `waitForCallPickup`                                     | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | When sending a notification, show UI that the app is awaiting an answer, play a dial tone, and (in widget mode) auto-close the widget once the notification expires.                                                                                                                                                                                                                                |
 
 ### Widget-only parameters
 

embedded/android/gradle/libs.versions.toml

@@ -2,11 +2,11 @@
 # https://docs.gradle.org/current/userguide/platforms.html#sub::toml-dependencies-format
 
 [versions]
-android_gradle_plugin = "8.13.2"
+android_gradle_plugin = "8.13.1"
 
 [libraries]
 android_gradle_plugin = { module = "com.android.tools.build:gradle", version.ref = "android_gradle_plugin" }
 
 [plugins]
 android_library = { id = "com.android.library", version.ref = "android_gradle_plugin" }
-maven_publish = { id = "com.vanniktech.maven.publish", version = "0.36.0" }
+maven_publish = { id = "com.vanniktech.maven.publish", version = "0.35.0" }

embedded/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.4-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.3-all.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME

knip.ts

@@ -34,12 +34,6 @@ export default {
     // then Knip will flag it as a false positive
     // https://github.com/webpro-nl/knip/issues/766
     "@vector-im/compound-web",
-    // Yarn plugins are allowed to depend on packages provided by the Yarn
-    // runtime. These shouldn't be listed in package.json, because plugins
-    // should work before Yarn even installs dependencies for the first time.
-    // https://yarnpkg.com/advanced/plugin-tutorial#what-does-a-plugin-look-like
-    "@yarnpkg/core",
-    "@yarnpkg/parsers",
     "matrix-widget-api",
   ],
   ignoreExportsUsedInFile: true,

locales/en/app.json

@@ -116,7 +116,6 @@
     "matrix_rtc_transport_missing": "The server is not configured to work with {{brand}}. Please contact your server admin (Domain: {{domain}}, Error Code: {{ errorCode }}).",
     "membership_manager": "Membership Manager Error",
     "membership_manager_description": "The Membership Manager had to shut down. This is caused by many consequtive failed network requests.",
-    "no_matrix_2_authorization_service": "The authorization service for your media server (SFU) is out of date.",
     "open_elsewhere": "Opened in another tab",
     "open_elsewhere_description": "{{brand}} has been opened in another tab. If that doesn't sound right, try reloading the page.",
     "room_creation_restricted": "Failed to create call",
@@ -250,11 +249,11 @@
   "video_tile": {
     "always_show": "Always show",
     "camera_starting": "Video loading...",
+    "change_fit_contain": "Fit to frame",
     "collapse": "Collapse",
     "expand": "Expand",
     "mute_for_me": "Mute for me",
     "muted_for_me": "Muted for me",
-    "screen_share_volume": "Screen share volume",
     "volume": "Volume",
     "waiting_for_media": "Waiting for media..."
   }

package.json

@@ -13,9 +13,8 @@
     "build:embedded": "yarn build:full --config vite-embedded.config.js",
     "build:embedded:production": "yarn build:embedded",
     "build:embedded:development": "yarn build:embedded --mode development",
-    "build:sdk:development": "yarn build:sdk --mode development",
     "build:sdk": "yarn build:full --config vite-sdk.config.js",
-    "build:sdk:production": "yarn build:sdk",
+    "build:sdk:development": "yarn build:sdk --mode development",
     "serve": "vite preview",
     "prettier:check": "prettier -c .",
     "prettier:format": "prettier -w .",
@@ -43,12 +42,12 @@
     "@codecov/vite-plugin": "^1.3.0",
     "@fontsource/inconsolata": "^5.1.0",
     "@fontsource/inter": "^5.1.0",
-    "@formatjs/intl-durationformat": "^0.10.0",
+    "@formatjs/intl-durationformat": "^0.9.0",
     "@formatjs/intl-segmenter": "^11.7.3",
     "@livekit/components-core": "^0.12.0",
     "@livekit/components-react": "^2.0.0",
     "@livekit/protocol": "^1.42.2",
-    "@livekit/track-processors": "^0.7.1",
+    "@livekit/track-processors": "^0.6.0 || ^0.7.1",
     "@mediapipe/tasks-vision": "^0.10.18",
     "@playwright/test": "^1.57.0",
     "@radix-ui/react-dialog": "^1.0.4",
@@ -79,7 +78,7 @@
     "@vector-im/compound-design-tokens": "^6.0.0",
     "@vector-im/compound-web": "^8.0.0",
     "@vitejs/plugin-react": "^4.0.1",
-    "@vitest/coverage-v8": "^4.0.18",
+    "@vitest/coverage-v8": "^3.0.0",
     "babel-plugin-transform-vite-meta-env": "^1.0.3",
     "classnames": "^2.3.1",
     "copy-to-clipboard": "^3.3.3",
@@ -101,12 +100,12 @@
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-parser": "^9.1.0",
     "jsdom": "^26.0.0",
-    "knip": "^5.86.0",
+    "knip": "^5.27.2",
     "livekit-client": "^2.13.0",
     "lodash-es": "^4.17.21",
     "loglevel": "^1.9.1",
-    "matrix-js-sdk": "matrix-org/matrix-js-sdk#6e3efef0c5f660df47cf00874927dec1c75cc3cf",
-    "matrix-widget-api": "^1.16.1",
+    "matrix-js-sdk": "matrix-org/matrix-js-sdk#develop",
+    "matrix-widget-api": "^1.14.0",
     "node-stdlib-browser": "^1.3.1",
     "normalize.css": "^8.0.1",
     "observable-hooks": "^4.2.3",
@@ -118,7 +117,7 @@
     "qrcode": "^1.5.4",
     "react": "19",
     "react-dom": "19",
-    "react-i18next": "^16.0.0 <16.6.0",
+    "react-i18next": "^16.0.0 <16.1.0",
     "react-router-dom": "^7.0.0",
     "react-use-measure": "^2.1.1",
     "rxjs": "^7.8.1",
@@ -126,24 +125,18 @@
     "typescript": "^5.8.3",
     "typescript-eslint-language-service": "^5.0.5",
     "unique-names-generator": "^4.6.0",
-    "uuid": "^13.0.0",
     "vaul": "^1.0.0",
-    "vite": "^7.3.0",
+    "vite": "^7.0.0",
     "vite-plugin-generate-file": "^0.3.0",
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-node-stdlib-browser": "^0.2.1",
     "vite-plugin-svgr": "^4.0.0",
-    "vitest": "^4.0.18",
+    "vitest": "^3.0.0",
     "vitest-axe": "^1.0.0-pre.3"
   },
   "resolutions": {
     "@livekit/components-core/rxjs": "^7.8.1",
-    "@livekit/track-processors/@mediapipe/tasks-vision": "^0.10.18",
-    "minimatch": "^10.2.3",
-    "tar": "^7.5.11",
-    "glob": "^10.5.0",
-    "qs": "^6.14.1",
-    "js-yaml": "^4.1.1"
+    "@livekit/track-processors/@mediapipe/tasks-vision": "^0.10.18"
   },
   "packageManager": "yarn@4.7.0"
 }

playwright.config.ts

@@ -1,6 +1,5 @@
 /*
 Copyright 2025 New Vector Ltd.
-Copyright 2026 Element Creations Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.

playwright/access.spec.ts

@@ -7,8 +7,6 @@ Please see LICENSE in the repository root for full details.
 
 import { expect, test } from "@playwright/test";
 
-import { SpaHelpers } from "./spa-helpers.ts";
-
 test("Sign up a new account, then login, then logout", async ({ browser }) => {
   const userId = `test_user-id_${Date.now()}`;
 
@@ -71,7 +69,12 @@ test("As a guest, create a call, share link and other join", async ({
   // ========
   // ARRANGE: The first user creates a call as guest, join it, then click the invite button to copy the invite link
   // ========
-  await SpaHelpers.createCall(creatorPage, "Inviter", "Welcome");
+  await creatorPage.getByTestId("home_callName").click();
+  await creatorPage.getByTestId("home_callName").fill("Welcome");
+  await creatorPage.getByTestId("home_displayName").click();
+  await creatorPage.getByTestId("home_displayName").fill("Inviter");
+  await creatorPage.getByTestId("home_go").click();
+  await expect(creatorPage.locator("video")).toBeVisible();
 
   // join
   await creatorPage.getByTestId("lobby_joinCall").click();
@@ -79,7 +82,19 @@ test("As a guest, create a call, share link and other join", async ({
   await creatorPage.getByRole("radio", { name: "Spotlight" }).check();
 
   // Get the invite link
-  const inviteLink = await SpaHelpers.getCallInviteLink(creatorPage);
+  await creatorPage.getByRole("button", { name: "Invite" }).click();
+  await expect(
+    creatorPage.getByRole("heading", { name: "Invite to this call" }),
+  ).toBeVisible();
+  await expect(creatorPage.getByRole("img", { name: "QR Code" })).toBeVisible();
+  await expect(creatorPage.getByTestId("modal_inviteLink")).toBeVisible();
+  await expect(creatorPage.getByTestId("modal_inviteLink")).toBeVisible();
+  await creatorPage.getByTestId("modal_inviteLink").click();
+
+  const inviteLink = (await creatorPage.evaluate(
+    "navigator.clipboard.readText()",
+  )) as string;
+  expect(inviteLink).toContain("room/#/");
 
   // ========
   // ACT: The other user use the invite link to join the call as a guest
@@ -88,7 +103,13 @@ test("As a guest, create a call, share link and other join", async ({
     reducedMotion: "reduce",
   });
   const guestPage = await guestInviteeContext.newPage();
-  await SpaHelpers.joinCallFromInviteLink(guestPage, inviteLink);
+
+  await guestPage.goto(inviteLink);
+  await guestPage.getByTestId("joincall_displayName").fill("Invitee");
+  await expect(guestPage.getByTestId("joincall_joincall")).toBeVisible();
+  await guestPage.getByTestId("joincall_joincall").click();
+  await guestPage.getByTestId("lobby_joinCall").click();
+  await guestPage.getByRole("radio", { name: "Spotlight" }).check();
 
   // ========
   // ASSERT: check that there are two members in the call

playwright/create-call.spec.ts

@@ -22,8 +22,8 @@ test("Start a new call then leave and show the feedback screen", async ({
   await expect(page.getByTestId("lobby_joinCall")).toBeVisible();
 
   // Check the button toolbar
-  // await expect(page.getByRole('switch', { name: 'Mute microphone' })).toBeVisible();
-  // await expect(page.getByRole('switch', { name: 'Stop video' })).toBeVisible();
+  // await expect(page.getByRole('button', { name: 'Mute microphone' })).toBeVisible();
+  // await expect(page.getByRole('button', { name: 'Stop video' })).toBeVisible();
   await expect(page.getByRole("button", { name: "Settings" })).toBeVisible();
   await expect(page.getByRole("button", { name: "End call" })).toBeVisible();
 

playwright/fixtures/widget-user.ts

@@ -1,19 +1,22 @@
 /*
 Copyright 2025 New Vector Ltd.
-Copyright 2026 Element Creations Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type Page, test, expect, type JSHandle } from "@playwright/test";
+import {
+  type Browser,
+  type Page,
+  test,
+  expect,
+  type JSHandle,
+} from "@playwright/test";
 
 import type { MatrixClient } from "matrix-js-sdk";
-import { HOST1, TestHelpers } from "../widget/test-helpers.ts";
 
 export type UserBaseFixture = {
   mxId: string;
-  displayName: string;
   page: Page;
   clientHandle: JSHandle<MatrixClient>;
 };
@@ -25,10 +28,10 @@ export type BaseWidgetSetup = {
 
 export interface MyFixtures {
   asWidget: BaseWidgetSetup;
-  callType: "room" | "dm";
-  addUser: (username: string, host: string) => Promise<UserBaseFixture>;
 }
 
+const PASSWORD = "foobarbaz1!";
+
 // Minimal config.json for the local element-web instance
 const CONFIG_JSON = {
   default_server_config: {
@@ -62,91 +65,143 @@ const CONFIG_JSON = {
   },
 };
 
+/**
+ * Set the Element Call URL in the dev tool settings using `window.mxSettingsStore` via `page.evaluate`.
+ */
+const setDevToolElementCallDevUrl = process.env.USE_DOCKER
+  ? async (page: Page): Promise<void> => {
+      await page.evaluate(() => {
+        window.mxSettingsStore.setValue(
+          "Developer.elementCallUrl",
+          null,
+          "device",
+          "http://localhost:8080/room",
+        );
+      });
+    }
+  : async (page: Page): Promise<void> => {
+      await page.evaluate(() => {
+        window.mxSettingsStore.setValue(
+          "Developer.elementCallUrl",
+          null,
+          "device",
+          "https://localhost:3000/room",
+        );
+      });
+    };
+
+/**
+ * Registers a new user and returns page, clientHandle and mxId.
+ */
+async function registerUser(
+  browser: Browser,
+  username: string,
+): Promise<{ page: Page; clientHandle: JSHandle<MatrixClient>; mxId: string }> {
+  const userContext = await browser.newContext({
+    reducedMotion: "reduce",
+  });
+  const page = await userContext.newPage();
+  await page.goto("http://localhost:8081/#/welcome");
+  await page.getByRole("link", { name: "Create Account" }).click();
+  await page.getByRole("textbox", { name: "Username" }).fill(username);
+  await page
+    .getByRole("textbox", { name: "Password", exact: true })
+    .fill(PASSWORD);
+  await page.getByRole("textbox", { name: "Confirm password" }).click();
+  await page.getByRole("textbox", { name: "Confirm password" }).fill(PASSWORD);
+  await page.getByRole("button", { name: "Register" }).click();
+
+  await expect(
+    page.getByRole("heading", { name: `Welcome ${username}` }),
+  ).toBeVisible();
+
+  const browserUnsupportedToast = page
+    .getByText("Element does not support this browser")
+    .locator("..")
+    .locator("..");
+
+  // Dismiss incompatible browser toast
+  const dismissButton = browserUnsupportedToast.getByRole("button", {
+    name: "Dismiss",
+  });
+  try {
+    await expect(dismissButton).toBeVisible({ timeout: 700 });
+    await dismissButton.click();
+  } catch {
+    // dismissButton not visible, continue as normal
+  }
+
+  await setDevToolElementCallDevUrl(page);
+
+  const clientHandle = await page.evaluateHandle(() =>
+    window.mxMatrixClientPeg.get(),
+  );
+  const mxId = (await clientHandle.evaluate(
+    (cli: MatrixClient) => cli.getUserId(),
+    clientHandle,
+  ))!;
+
+  return { page, clientHandle, mxId };
+}
+
 export const widgetTest = test.extend<MyFixtures>({
-  // allow per-test override: `widgetTest.use({ callType: "dm" })`
-  callType: ["room", { option: true }],
-  asWidget: async ({ browser, context, callType }, pUse) => {
+  asWidget: async ({ browser, context }, pUse) => {
     await context.route(`http://localhost:8081/config.json*`, async (route) => {
       await route.fulfill({ json: CONFIG_JSON });
     });
 
-    const brooksDisplayName = `brooks_${Date.now()}`;
-    const whistlerDisplayName = `whistler_${Date.now()}`;
+    const userA = `brooks_${Date.now()}`;
+    const userB = `whistler_${Date.now()}`;
 
     // Register users
     const {
       page: ewPage1,
       clientHandle: brooksClientHandle,
       mxId: brooksMxId,
-    } = await TestHelpers.registerUser(browser, brooksDisplayName);
+    } = await registerUser(browser, userA);
     const {
       page: ewPage2,
       clientHandle: whistlerClientHandle,
       mxId: whistlerMxId,
-    } = await TestHelpers.registerUser(browser, whistlerDisplayName);
+    } = await registerUser(browser, userB);
 
     // Invite the second user
-    if (callType === "room") {
-      await TestHelpers.createRoom("Welcome Room", ewPage1);
+    await ewPage1
+      .getByRole("navigation", { name: "Room list" })
+      .getByRole("button", { name: "New conversation" })
+      .click();
 
-      await ewPage1
-        .getByRole("button", { name: "Invite to this room", exact: true })
-        .click();
-      await expect(
-        ewPage1.getByRole("heading", { name: "Invite to Welcome Room" }),
-      ).toBeVisible();
+    await ewPage1.getByRole("menuitem", { name: "New Room" }).click();
+    await ewPage1.getByRole("textbox", { name: "Name" }).fill("Welcome Room");
+    await ewPage1.getByRole("button", { name: "Create room" }).click();
+    await expect(ewPage1.getByText("You created this room.")).toBeVisible();
+    await expect(ewPage1.getByText("Encryption enabled")).toBeVisible();
 
-      // To get the invite textbox we need to specifically select within the
-      // dialog, since there is another textbox in the background (the message
-      // composer). In theory the composer shouldn't be visible to Playwright at
-      // all because the invite dialog has trapped focus, but the focus trap
-      // doesn't quite work right on Firefox.
-      await ewPage1.getByRole("dialog").getByRole("textbox").fill(whistlerMxId);
-      await ewPage1.getByRole("dialog").getByRole("textbox").click();
-      await ewPage1.getByRole("button", { name: "Invite" }).click();
+    await ewPage1
+      .getByRole("button", { name: "Invite to this room", exact: true })
+      .click();
+    await expect(
+      ewPage1.getByRole("heading", { name: "Invite to Welcome Room" }),
+    ).toBeVisible();
 
-      // Accept the invite
-      await expect(
-        ewPage2.getByRole("option", { name: "Welcome Room" }),
-      ).toBeVisible();
-      await ewPage2.getByRole("option", { name: "Welcome Room" }).click();
-      await ewPage2.getByRole("button", { name: "Accept" }).click();
-      await expect(
-        ewPage2
-          .getByRole("main")
-          .getByRole("heading", { name: "Welcome Room" }),
-      ).toBeVisible();
-    } else if (callType === "dm") {
-      await ewPage1
-        .getByRole("navigation", { name: "Room list" })
-        .getByRole("button", { name: "New conversation" })
-        .click();
+    // To get the invite textbox we need to specifically select within the
+    // dialog, since there is another textbox in the background (the message
+    // composer). In theory the composer shouldn't be visible to Playwright at
+    // all because the invite dialog has trapped focus, but the focus trap
+    // doesn't quite work right on Firefox.
+    await ewPage1.getByRole("dialog").getByRole("textbox").fill(whistlerMxId);
+    await ewPage1.getByRole("dialog").getByRole("textbox").click();
+    await ewPage1.getByRole("button", { name: "Invite" }).click();
 
-      await ewPage1.getByRole("menuitem", { name: "Start chat" }).click();
-      await ewPage1.getByRole("textbox", { name: "Search" }).click();
-      await ewPage1.getByRole("textbox", { name: "Search" }).fill(whistlerMxId);
-      await ewPage1.getByRole("button", { name: "Go" }).click();
-
-      // Wait and send the first message to create the DM
-      await expect(
-        ewPage1.getByText(/Send your first message to invite/),
-      ).toBeVisible();
-
-      await ewPage1.locator(".mx_BasicMessageComposer_input > div").click();
-      await ewPage1
-        .getByRole("textbox", { name: "Send a message…" })
-        .fill("Hello!");
-      await ewPage1.getByRole("button", { name: "Send message" }).click();
-
-      await expect(
-        ewPage1.getByText("This is the beginning of your"),
-      ).toBeVisible();
-
-      // Accept the DM invite from brooks
-      // This how playwright record selects the DM invite in the room list
-      await ewPage2.getByRole("option", { name: "Open room" }).click();
-      await ewPage2.getByRole("button", { name: "Start chatting" }).click();
-    }
+    // Accept the invite
+    await expect(
+      ewPage2.getByRole("option", { name: "Welcome Room" }),
+    ).toBeVisible();
+    await ewPage2.getByRole("option", { name: "Welcome Room" }).click();
+    await ewPage2.getByRole("button", { name: "Accept" }).click();
+    await expect(
+      ewPage2.getByRole("main").getByRole("heading", { name: "Welcome Room" }),
+    ).toBeVisible();
 
     // Renamed use to pUse, as a workaround for eslint error that was thinking this use was a react use.
     await pUse({
@@ -154,40 +209,12 @@ export const widgetTest = test.extend<MyFixtures>({
         mxId: brooksMxId,
         page: ewPage1,
         clientHandle: brooksClientHandle,
-        displayName: brooksDisplayName,
       },
       whistler: {
         mxId: whistlerMxId,
         page: ewPage2,
         clientHandle: whistlerClientHandle,
-        displayName: whistlerDisplayName,
       },
     });
   },
-
-  /**
-   * Provide a way to add additional users within a test.
-   * The returned user will be registered on the default homeserver, the name will be made unique by appending a timestamp.
-   */
-  addUser: async ({ browser }, use) => {
-    await use(
-      async (
-        username: string,
-        host: string = HOST1,
-      ): Promise<UserBaseFixture> => {
-        const uniqueSuffix = Date.now();
-        const { page, clientHandle, mxId } = await TestHelpers.registerUser(
-          browser,
-          `${username.toLowerCase()}_${uniqueSuffix}`,
-          host,
-        );
-        return {
-          mxId,
-          displayName: username,
-          page,
-          clientHandle,
-        };
-      },
-    );
-  },
 });

playwright/reconnect.spec.ts

@@ -49,12 +49,12 @@ test("can only interact with header and footer while reconnecting", async ({
   ).toBeVisible();
 
   // Tab order should jump directly from header to footer, skipping media tiles
-  await page.getByRole("switch", { name: "Mute microphone" }).focus();
+  await page.getByRole("button", { name: "Mute microphone" }).focus();
   await expect(
-    page.getByRole("switch", { name: "Mute microphone" }),
+    page.getByRole("button", { name: "Mute microphone" }),
   ).toBeFocused();
   await page.keyboard.press("Tab");
-  await expect(page.getByRole("switch", { name: "Stop video" })).toBeFocused();
+  await expect(page.getByRole("button", { name: "Stop video" })).toBeFocused();
   // Most critically, we should be able to press the hangup button
   await page.getByRole("button", { name: "End call" }).click();
 });

playwright/spa-call-sticky.spec.ts

@@ -1,135 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import {
-  expect,
-  type Page,
-  test,
-  type Request,
-  type Browser,
-} from "@playwright/test";
-
-import { SpaHelpers } from "./spa-helpers";
-
-async function setupTwoUserSpaCall(
-  browser: Browser,
-  page: Page,
-  browserName: string,
-): Promise<{ guestPage: Page }> {
-  test.skip(
-    browserName === "firefox",
-    "The is test is not working on firefox CI environment. No mic/audio device inputs so cam/mic are disabled",
-  );
-
-  await page.goto("/");
-
-  let androlHasSentStickyEvent = false;
-
-  await interceptEventSend(
-    page,
-    // This room is not encrypted, so the event is sent in clear
-    "org.matrix.msc4143.rtc.member",
-    (req) => {
-      androlHasSentStickyEvent =
-        androlHasSentStickyEvent || isStickySend(req.url());
-    },
-  );
-
-  await SpaHelpers.createCall(page, "Androl", "HelloCall", true, "2_0");
-
-  const inviteLink = await SpaHelpers.getCallInviteLink(page);
-
-  // Other
-  const guestInviteeContext = await browser.newContext({
-    reducedMotion: "reduce",
-  });
-  const guestPage = await guestInviteeContext.newPage();
-
-  await guestPage.goto("/");
-
-  let pevaraHasSentStickyEvent = false;
-
-  await interceptEventSend(
-    guestPage,
-    // This room is not encrypted, so the event is sent in clear
-    "org.matrix.msc4143.rtc.member",
-    (req) => {
-      pevaraHasSentStickyEvent =
-        pevaraHasSentStickyEvent || isStickySend(req.url());
-    },
-  );
-
-  await SpaHelpers.joinCallFromInviteLink(
-    guestPage,
-    inviteLink,
-    "Pevara",
-    "2_0",
-  );
-  // Assert both sides have sent sticky membership events
-  expect(androlHasSentStickyEvent).toEqual(true);
-  expect(pevaraHasSentStickyEvent).toEqual(true);
-
-  return { guestPage };
-}
-
-test("One to One call using matrix rtc 2.0 aka sticky events", async ({
-  browser,
-  page,
-  browserName,
-}) => {
-  const { guestPage } = await setupTwoUserSpaCall(browser, page, browserName);
-
-  await SpaHelpers.expectVideoTilesCount(page, 2);
-  await SpaHelpers.expectVideoTilesCount(guestPage, 2);
-});
-
-// This issue occurs when a member leave but does not clean up their sticky event.
-// If they rejoin they will use a new stickye key (stickyKey = member.id = UUID())
-// We end up with two memberships with the same user and device id. This previously
-// was a impossible case since that would be the same state event. Now its possible.
-// We need to ALWAYS key by userId, deviceId and member.id. This test checks that.
-test("One to One rejoin after improper leave does not crash EC", async ({
-  browser,
-  page,
-  browserName,
-}) => {
-  const { guestPage } = await setupTwoUserSpaCall(browser, page, browserName);
-
-  await SpaHelpers.expectVideoTilesCount(page, 2);
-  await SpaHelpers.expectVideoTilesCount(guestPage, 2);
-
-  await guestPage.reload();
-  await expect(guestPage.getByTestId("lobby_joinCall")).toBeVisible();
-
-  // Check if rejoining with the same browser context (device) breaks EC.
-  // This has happened on versions that do not consider the member.id as part of the key for a media tile.
-  await guestPage.getByTestId("lobby_joinCall").click();
-
-  // We cannot use the `expectVideoTilesCount` helper here since one of them is expected to show waiting for media
-  await expect(page.getByTestId("videoTile")).toHaveCount(3);
-  await expect(guestPage.getByTestId("videoTile")).toHaveCount(2);
-});
-
-function isStickySend(url: string): boolean {
-  return !!new URL(url).searchParams.get(
-    "org.matrix.msc4354.sticky_duration_ms",
-  );
-}
-
-async function interceptEventSend(
-  page: Page,
-  eventType: string,
-  callback: (request: Request) => void,
-): Promise<void> {
-  await page.route(
-    `**/_matrix/client/v3/rooms/**/send/${eventType}/**`,
-    async (route, req) => {
-      callback(req);
-      return route.continue();
-    },
-  );
-}

playwright/spa-helpers.ts

@@ -1,148 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { expect, type Page } from "@playwright/test";
-
-import { type RtcMode } from "./widget/test-helpers.ts";
-
-/**
- * Create and join a call from the SPA home page.
- *
- * @param page - The Playwright page object
- * @param userName - The display name to use for the call
- * @param callName - The name of the call to create
- * @param autoJoin - Whether to automatically join the call after creating it
- * @param mode - The RTC mode to use for the call
- */
-async function createCall(
-  page: Page,
-  userName: string,
-  callName: string,
-  autoJoin: boolean = false,
-  mode: RtcMode | undefined = undefined,
-): Promise<void> {
-  await page.getByTestId("home_callName").click();
-  await page.getByTestId("home_callName").fill(callName);
-  await page.getByTestId("home_displayName").click();
-  await page.getByTestId("home_displayName").fill(userName);
-  await page.getByTestId("home_go").click();
-
-  await expect(page.locator("video")).toBeVisible();
-  await expect(page.getByTestId("lobby_joinCall")).toBeVisible();
-
-  if (mode) {
-    await setRtcModeFromSettings(page, mode);
-  }
-
-  if (autoJoin) {
-    // Join the call
-    await page.getByTestId("lobby_joinCall").click();
-  }
-}
-
-/**
- * Get the invite link for the current call.
- */
-async function getCallInviteLink(page: Page): Promise<string> {
-  await page.getByRole("button", { name: "Invite" }).click();
-  await expect(
-    page.getByRole("heading", { name: "Invite to this call" }),
-  ).toBeVisible();
-  await expect(page.getByRole("img", { name: "QR Code" })).toBeVisible();
-  await expect(page.getByTestId("modal_inviteLink")).toBeVisible();
-  await expect(page.getByTestId("modal_inviteLink")).toBeVisible();
-  await page.getByTestId("modal_inviteLink").click();
-
-  const inviteLink = (await page.evaluate(
-    "navigator.clipboard.readText()",
-  )) as string;
-  expect(inviteLink).toContain("room/#/");
-
-  return inviteLink;
-}
-
-/**
- * Join a call from an invitation link.
- * @param page - The Playwright page object
- * @param inviteLink - The invite link to join
- * @param displayName - The display name to use when joining the call
- * @param mode - The RTC mode to use for the call
- */
-async function joinCallFromInviteLink(
-  page: Page,
-  inviteLink: string,
-  displayName: string = "Invitee",
-  mode: RtcMode | undefined = undefined,
-): Promise<void> {
-  await page.goto(inviteLink);
-  await page.getByTestId("joincall_displayName").fill(displayName);
-  await expect(page.getByTestId("joincall_joincall")).toBeVisible();
-  await page.getByTestId("joincall_joincall").click();
-
-  if (mode) {
-    await setRtcModeFromSettings(page, mode);
-  }
-
-  await page.getByTestId("lobby_joinCall").click();
-  await page.getByRole("radio", { name: "Spotlight" }).check();
-}
-
-async function setRtcModeFromSettings(
-  page: Page,
-  mode: RtcMode,
-): Promise<void> {
-  await page.getByRole("button", { name: "Settings" }).click();
-  await page.getByRole("tab", { name: "Preferences" }).click();
-  await page.getByText("Developer mode", { exact: true }).check(); // Idempotent:  won't uncheck if already checked
-
-  // Move to Developer tab now
-  await page.getByRole("tab", { name: "Developer" }).click();
-  if (mode == "legacy") {
-    await page.getByText("Legacy: state events").click();
-  } else if (mode == "2_0") {
-    await page.getByText("Matrix 2.0").click();
-  } else {
-    // compat
-    await page.getByText("Compatibility: state events").click();
-  }
-
-  await page.getByTestId("modal_close").click();
-}
-
-/**
- * Expect a certain number of video tiles to be present and visible.
- */
-async function expectVideoTilesCount(page: Page, count: number): Promise<void> {
-  await expect(page.getByTestId("videoTile")).toHaveCount(2);
-
-  // There are no other options than to wait for all media to be ready?
-  // Or it is too flaky :/
-  await page.waitForTimeout(3000);
-  // No one should be waiting for media
-  await expect(page.getByText("Waiting for media...")).not.toBeVisible();
-
-  // There should be 5 video elements, visible and autoplaying
-  const videoElements = await page.locator("video").all();
-  expect(videoElements.length).toBe(count);
-
-  const blockDisplayCount = await page
-    .locator("video")
-    .evaluateAll(
-      (videos: Element[]) =>
-        videos.filter(
-          (v: Element) => window.getComputedStyle(v).display === "block",
-        ).length,
-    );
-  expect(blockDisplayCount).toBe(count);
-}
-
-export const SpaHelpers = {
-  createCall,
-  getCallInviteLink,
-  joinCallFromInviteLink,
-  expectVideoTilesCount,
-};

playwright/widget/federated-call.test.ts

@@ -1,86 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { expect, test } from "@playwright/test";
-
-import { widgetTest } from "../fixtures/widget-user";
-import { HOST1, HOST2, type RtcMode, TestHelpers } from "./test-helpers";
-
-const modePairs: [RtcMode, RtcMode][] = [
-  ["compat", "compat"],
-  ["legacy", "legacy"],
-  ["legacy", "compat"],
-  ["compat", "legacy"],
-];
-
-modePairs.forEach(([rtcMode1, rtcMode2]) => {
-  widgetTest(
-    `Test federated call with rtc modes ${rtcMode1} and ${rtcMode2}`,
-    async ({ addUser, browserName }) => {
-      test.skip(
-        browserName === "firefox",
-        "The is test is not working on firefox CI environment. No mic/audio device inputs so cam/mic are disabled",
-      );
-
-      const florian = await addUser("floriant", HOST1);
-      const timo = await addUser("timo", HOST2);
-
-      const roomName = "Call Room";
-
-      await TestHelpers.createRoom(roomName, florian.page, [timo.mxId]);
-
-      await TestHelpers.acceptRoomInvite(roomName, timo.page);
-
-      await florian.page.pause();
-
-      await TestHelpers.openWidgetSetEmbeddedElementCallRtcModeCloseWidget(
-        florian.page,
-        rtcMode1,
-      );
-      await TestHelpers.openWidgetSetEmbeddedElementCallRtcModeCloseWidget(
-        timo.page,
-        rtcMode2,
-      );
-
-      await TestHelpers.startCallInCurrentRoom(florian.page, false);
-      await TestHelpers.joinCallFromLobby(florian.page);
-
-      // timo joins
-      await TestHelpers.joinCallInCurrentRoom(timo.page);
-
-      // We should see 2 video tiles everywhere now
-      for (const user of [timo, florian]) {
-        const frame = user.page
-          .locator('iframe[title="Element Call"]')
-          .contentFrame();
-        await expect(frame.getByTestId("videoTile")).toHaveCount(2);
-
-        // There are no other options than to wait for all media to be ready?
-        // Or it is too flaky :/
-        await user.page.waitForTimeout(3000);
-        // No one should be waiting for media
-        await expect(frame.getByText("Waiting for media...")).not.toBeVisible();
-
-        // There should be 2 video elements, visible and autoplaying
-        const videoElements = await frame.locator("video").all();
-        expect(videoElements.length).toBe(2);
-
-        const blockDisplayCount = await frame
-          .locator("video")
-          .evaluateAll(
-            (videos: Element[]) =>
-              videos.filter(
-                (v: Element) => window.getComputedStyle(v).display === "block",
-              ).length,
-          );
-        expect(blockDisplayCount).toBe(2);
-      }
-
-      // await florian.page.pause();
-    },
-  );
-});

playwright/widget/hotswap-legacy-compat.test.ts

@@ -1,104 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { expect, test } from "@playwright/test";
-
-import { widgetTest } from "../fixtures/widget-user";
-import { HOST1, HOST2, TestHelpers } from "./test-helpers";
-
-// ## Issue
-// This test reproduces an issue with the publisher.
-// When switching local focus, we need to recreate the publisher.
-// This failed because of a dead lock in the old publishers destruction.
-//
-// There are numerus ways to enforece this situation:
-//  - oldest member swap (manually set the oldest member focus and leave with the prev oldest member)
-//    This almost never happens in the real worls since clients will set their preferredFoci list to what the oldest member is.
-//  - switch from oldest member to multi sfu as the NOT the first joiner + the first joiner is on a different sfu than your preferred sfu.
-//
-// This test uses the "switch from oldest member to multi sfu" approach.
-//
-// It is a copy of federated-call.test.ts in the `["legacy", "legacy"]` setup,
-// which once connected will make the second user switch to multi sfu.
-widgetTest(
-  `Test swapping publisher from ${HOST1} to ${HOST2}`,
-  async ({ addUser, browserName }) => {
-    test.skip(
-      browserName === "firefox",
-      "The is test is not working on firefox CI environment. No mic/audio device inputs so cam/mic are disabled",
-    );
-
-    const florian = await addUser("floriant", HOST1);
-    const timo = await addUser("timo", HOST2);
-
-    const roomName = "Call Room";
-
-    await TestHelpers.createRoom(roomName, florian.page, [timo.mxId]);
-
-    await TestHelpers.acceptRoomInvite(roomName, timo.page);
-
-    await florian.page.pause();
-
-    await TestHelpers.openWidgetSetEmbeddedElementCallRtcModeCloseWidget(
-      florian.page,
-      "legacy",
-    );
-    await TestHelpers.openWidgetSetEmbeddedElementCallRtcModeCloseWidget(
-      timo.page,
-      "legacy",
-    );
-
-    await TestHelpers.startCallInCurrentRoom(florian.page, false);
-    await TestHelpers.joinCallFromLobby(florian.page);
-
-    // timo joins
-    await TestHelpers.joinCallInCurrentRoom(timo.page);
-
-    // We should see 2 video tiles everywhere now
-    for (const user of [timo, florian]) {
-      const frame = user.page
-        .locator('iframe[title="Element Call"]')
-        .contentFrame();
-      await expect(frame.getByTestId("videoTile")).toHaveCount(2);
-
-      // There are no other options than to wait for all media to be ready?
-      // Or it is too flaky :/
-      await user.page.waitForTimeout(3000);
-      // No one should be waiting for media
-      await expect(frame.getByText("Waiting for media...")).not.toBeVisible();
-
-      // There should be 2 video elements, visible and autoplaying
-      const videoElements = await frame.locator("video").all();
-      expect(videoElements.length).toBe(2);
-
-      const blockDisplayCount = await frame
-        .locator("video")
-        .evaluateAll(
-          (videos: Element[]) =>
-            videos.filter(
-              (v: Element) => window.getComputedStyle(v).display === "block",
-            ).length,
-        );
-      expect(blockDisplayCount).toBe(2);
-    }
-
-    // now we switch the mode for timo (second joiner on multi-sfu HOST2 but currently HOST1)
-    await TestHelpers.setEmbeddedElementCallRtcMode(timo.page, "compat");
-    await timo.page.waitForTimeout(3000);
-    const blockDisplayCount = await timo.page
-      .locator('iframe[title="Element Call"]')
-      .contentFrame()
-      .locator("video")
-      .evaluateAll(
-        (videos: Element[]) =>
-          videos.filter(
-            (v: Element) => window.getComputedStyle(v).display === "block",
-          ).length,
-      );
-    expect(blockDisplayCount).toBe(2);
-  },
-);

playwright/widget/huddle-call.test.ts

@@ -1,135 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { expect, test } from "@playwright/test";
-
-import { widgetTest } from "../fixtures/widget-user.ts";
-import { HOST1, TestHelpers } from "./test-helpers.ts";
-
-widgetTest("Create and join a group call", async ({ addUser, browserName }) => {
-  test.skip(
-    browserName === "firefox",
-    "The is test is not working on firefox CI environment. No mic/audio device inputs so cam/mic are disabled",
-  );
-
-  test.slow(); // We are registering multiple users here, give it more time
-
-  const valere = await addUser("Valere", HOST1);
-  const timo = await addUser("Timo", HOST1);
-  const robin = await addUser("Robin", HOST1);
-  const halfshot = await addUser("Halfshot", HOST1);
-  const florian = await addUser("florian", HOST1);
-
-  const roomName = "Group Call Room";
-  await TestHelpers.createRoom(roomName, valere.page, [
-    timo.mxId,
-    robin.mxId,
-    halfshot.mxId,
-    florian.mxId,
-  ]);
-
-  for (const user of [timo, robin, halfshot, florian]) {
-    // Accept the invite
-    // This isn't super stable to get this as this super generic locator,
-    // but it works for now.
-    await TestHelpers.acceptRoomInvite(roomName, user.page);
-  }
-
-  // Start the call as Valere
-  await TestHelpers.startCallInCurrentRoom(valere.page, false);
-  await expect(
-    valere.page.locator('iframe[title="Element Call"]'),
-  ).toBeVisible();
-
-  await TestHelpers.joinCallFromLobby(valere.page);
-
-  for (const user of [timo, robin, halfshot, florian]) {
-    await TestHelpers.joinCallInCurrentRoom(user.page);
-  }
-
-  for (const user of [timo, robin, halfshot, florian]) {
-    const frame = user.page
-      .locator('iframe[title="Element Call"]')
-      .contentFrame();
-    // No lobby, should start with video on
-    await expect(
-      frame.getByRole("switch", { name: "Stop video", checked: true }),
-    ).toBeVisible();
-  }
-
-  // We should see 5 video tiles everywhere now
-  for (const user of [valere, timo, robin, halfshot, florian]) {
-    const frame = user.page
-      .locator('iframe[title="Element Call"]')
-      .contentFrame();
-    await expect(frame.getByTestId("videoTile")).toHaveCount(5);
-    for (const participant of [valere, timo, robin, halfshot, florian]) {
-      // Check the names are correct
-      await expect(frame.getByText(participant.displayName)).toBeVisible();
-    }
-
-    // There is no other options than to wait for all media to be ready?
-    // Or it is too flaky :/
-    await user.page.waitForTimeout(5000);
-    // No one should be waiting for media
-    await expect(frame.getByText("Waiting for media...")).not.toBeVisible();
-
-    // There should be 5 video elements, visible and autoplaying
-    const videoElements = await frame.locator("video").all();
-    expect(videoElements.length).toBe(5);
-    await expect(frame.locator("video[autoplay]")).toHaveCount(5);
-
-    const blockDisplayCount = await frame
-      .locator("video")
-      .evaluateAll(
-        (videos: Element[]) =>
-          videos.filter(
-            (v: Element) => window.getComputedStyle(v).display === "block",
-          ).length,
-      );
-    expect(blockDisplayCount).toBe(5);
-  }
-
-  // Quickly test muting one participant to see it reflects and that our asserts works
-  const florianFrame = florian.page
-    .locator('iframe[title="Element Call"]')
-    .contentFrame();
-  const florianVideoButton = florianFrame.getByRole("switch", {
-    name: /video/,
-  });
-  await expect(florianVideoButton).toHaveAccessibleName("Stop video");
-  await expect(florianVideoButton).toBeChecked();
-  await florianVideoButton.click();
-  // Now the button should indicate we can start video
-  await expect(florianVideoButton).toHaveAccessibleName("Start video");
-  await expect(florianVideoButton).not.toBeChecked();
-
-  // wait a bit for the state to propagate
-  await valere.page.waitForTimeout(3000);
-  {
-    const frame = valere.page
-      .locator('iframe[title="Element Call"]')
-      .contentFrame();
-
-    const videoElements = await frame.locator("video").all();
-    expect(videoElements.length).toBe(5);
-
-    const blockDisplayCount = await frame
-      .locator("video")
-      .evaluateAll(
-        (videos: Element[]) =>
-          videos.filter(
-            (v: Element) => window.getComputedStyle(v).display === "block",
-          ).length,
-      );
-
-    // out of 5 ONLY 4 are visible (display:block) !!
-    // XXX we need to be better at our HTML markup and accessibility, it would make
-    // this kind of stuff way easier to test if we could look out for aria attributes.
-    expect(blockDisplayCount).toBe(4);
-  }
-});

playwright/widget/pip-call-button-interaction.test.ts

@@ -1,73 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { expect, test } from "@playwright/test";
-
-import { widgetTest } from "../fixtures/widget-user.ts";
-import { HOST1, TestHelpers } from "./test-helpers.ts";
-
-widgetTest("Footer interaction in PiP", async ({ addUser, browserName }) => {
-  test.skip(
-    browserName === "firefox",
-    "The is test is not working on firefox CI environment. No mic/audio device inputs so cam/mic are disabled",
-  );
-
-  test.slow();
-
-  const valere = await addUser("Valere", HOST1);
-
-  const callRoom = "CallRoom";
-  await TestHelpers.createRoom("CallRoom", valere.page);
-
-  await TestHelpers.createRoom("OtherRoom", valere.page);
-
-  await TestHelpers.switchToRoomNamed(valere.page, callRoom);
-
-  // Start the call as Valere
-  await TestHelpers.startCallInCurrentRoom(valere.page, false);
-  await expect(
-    valere.page.locator('iframe[title="Element Call"]'),
-  ).toBeVisible();
-
-  await TestHelpers.joinCallFromLobby(valere.page);
-  // wait a bit so that the PIP has rendered
-  await valere.page.waitForTimeout(600);
-
-  // Switch to the other room, the call should go to PIP
-  await TestHelpers.switchToRoomNamed(valere.page, "OtherRoom");
-
-  // We should see the PIP overlay
-  const iFrame = valere.page
-    .locator('iframe[title="Element Call"]')
-    .contentFrame();
-
-  {
-    // Check for a bug where the video had the wrong fit in PIP
-    const audioBtn = iFrame.getByRole("switch", { name: /microphone/ });
-    const videoBtn = iFrame.getByRole("switch", { name: /video/ });
-    await expect(
-      iFrame.getByRole("button", { name: "End call" }),
-    ).toBeVisible();
-    await expect(audioBtn).toBeVisible();
-    await expect(videoBtn).toBeVisible();
-    await expect(audioBtn).toHaveAccessibleName("Mute microphone");
-    await expect(audioBtn).toBeChecked();
-    await expect(videoBtn).toHaveAccessibleName("Stop video");
-    await expect(videoBtn).toBeChecked();
-
-    await videoBtn.click();
-    await audioBtn.click();
-
-    // stop hovering on any of the buttons
-    await iFrame.getByTestId("videoTile").hover();
-
-    await expect(audioBtn).toHaveAccessibleName("Unmute microphone");
-    await expect(audioBtn).toBeChecked();
-    await expect(videoBtn).toHaveAccessibleName("Start video");
-    await expect(videoBtn).not.toBeChecked();
-  }
-});

playwright/widget/pip-call.test.ts

@@ -1,72 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { expect, test } from "@playwright/test";
-
-import { widgetTest } from "../fixtures/widget-user.ts";
-import { HOST1, TestHelpers } from "./test-helpers.ts";
-
-widgetTest("Put call in PIP", async ({ addUser, browserName }) => {
-  test.skip(
-    browserName === "firefox",
-    "The is test is not working on firefox CI environment. No mic/audio device inputs so cam/mic are disabled",
-  );
-
-  test.slow();
-
-  const valere = await addUser("Valere", HOST1);
-  const timo = await addUser("Timo", HOST1);
-
-  const callRoom = "TeamRoom";
-  await TestHelpers.createRoom(callRoom, valere.page, [timo.mxId]);
-
-  await TestHelpers.createRoom("DoubleTask", valere.page);
-
-  await TestHelpers.acceptRoomInvite(callRoom, timo.page);
-
-  await TestHelpers.switchToRoomNamed(valere.page, callRoom);
-
-  // Start the call as Valere
-  await TestHelpers.startCallInCurrentRoom(valere.page, false);
-  await expect(
-    valere.page.locator('iframe[title="Element Call"]'),
-  ).toBeVisible();
-
-  await TestHelpers.joinCallFromLobby(valere.page);
-
-  await TestHelpers.joinCallInCurrentRoom(timo.page);
-
-  const frame = timo.page
-    .locator('iframe[title="Element Call"]')
-    .contentFrame();
-
-  // check that the video is on
-  await expect(
-    frame.getByRole("switch", { name: "Stop video", checked: true }),
-  ).toBeVisible();
-
-  // Switch to the other room, the call should go to PIP
-  await TestHelpers.switchToRoomNamed(valere.page, "DoubleTask");
-
-  // We should see the PIP overlay
-  await expect(valere.page.getByTestId("widget-pip-container")).toBeVisible();
-
-  {
-    // wait a bit so that the PIP has rendered the video
-    await valere.page.waitForTimeout(600);
-
-    // Check for a bug where the video had the wrong fit in PIP
-    const frame = valere.page
-      .locator('iframe[title="Element Call"]')
-      .contentFrame();
-    const videoElements = await frame.locator("video").all();
-    expect(videoElements.length).toBe(1);
-
-    const pipVideo = videoElements[0];
-    await expect(pipVideo).toHaveCSS("object-fit", "cover");
-  }
-});

playwright/widget/test-helpers.ts

@@ -1,291 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import {
-  type Browser,
-  expect,
-  type JSHandle,
-  type Page,
-} from "@playwright/test";
-import { type MatrixClient } from "matrix-js-sdk";
-
-const PASSWORD = "foobarbaz1!";
-
-export const HOST1 = "https://app.m.localhost/#/welcome";
-export const HOST2 = "https://app.othersite.m.localhost/#/welcome";
-
-export type RtcMode = "legacy" | "compat" | "2_0";
-
-export class TestHelpers {
-  public static async startCallInCurrentRoom(
-    page: Page,
-    voice: boolean = false,
-  ): Promise<void> {
-    const buttonName = voice ? "Voice call" : "Video call";
-    await expect(page.getByRole("button", { name: buttonName })).toBeVisible();
-    await page.getByRole("button", { name: buttonName }).click();
-
-    await expect(
-      page.getByRole("menuitem", { name: "Element Call" }),
-    ).toBeVisible();
-
-    await page.getByRole("menuitem", { name: "Element Call" }).click();
-  }
-
-  public static async joinCallFromLobby(page: Page): Promise<void> {
-    await expect(
-      page
-        .locator('iframe[title="Element Call"]')
-        .contentFrame()
-        .getByTestId("lobby_joinCall"),
-    ).toBeVisible();
-
-    await page
-      .locator('iframe[title="Element Call"]')
-      .contentFrame()
-      .getByTestId("lobby_joinCall")
-      .click();
-  }
-
-  public static async joinCallInCurrentRoom(
-    page: Page,
-    audioOnly: boolean = false,
-  ): Promise<void> {
-    // This is the header button that notifies about an ongoing call
-    const label = audioOnly ? "Voice call started" : "Video call started";
-    await expect(page.getByText(label)).toBeVisible();
-    await expect(page.getByRole("button", { name: "Join" })).toBeVisible();
-    await page.getByRole("button", { name: "Join" }).click();
-  }
-
-  /**
-   * Registers a new user and returns page, clientHandle and mxId.
-   */
-  public static async registerUser(
-    browser: Browser,
-    username: string,
-    host: string = HOST1,
-  ): Promise<{
-    page: Page;
-    clientHandle: JSHandle<MatrixClient>;
-    mxId: string;
-  }> {
-    const userContext = await browser.newContext({
-      reducedMotion: "reduce",
-    });
-    const page = await userContext.newPage();
-    await page.goto(host);
-    await page.getByRole("link", { name: "Create Account" }).click();
-    await page.getByRole("textbox", { name: "Username" }).fill(username);
-    await page.getByRole("textbox", { name: "Password", exact: true }).click();
-    await page
-      .getByRole("textbox", { name: "Password", exact: true })
-      .fill(PASSWORD);
-    await page.getByRole("textbox", { name: "Confirm password" }).click();
-    await page
-      .getByRole("textbox", { name: "Confirm password" })
-      .fill(PASSWORD);
-    await page.getByRole("button", { name: "Register" }).click();
-
-    await expect(
-      page.getByRole("heading", { name: `Welcome ${username}` }),
-    ).toBeVisible({
-      // Increase timeout as registration can be slow :/
-      timeout: 15_000,
-    });
-
-    await this.maybeDismissBrowserNotSupportedToast(page);
-    await this.maybeDismissServiceWorkerWarningToast(page);
-
-    await TestHelpers.setDevToolElementCallDevUrl(page);
-
-    const clientHandle = await page.evaluateHandle(() =>
-      window.mxMatrixClientPeg.get(),
-    );
-    const mxId = (await clientHandle.evaluate(
-      (cli: MatrixClient) => cli.getUserId(),
-      clientHandle,
-    ))!;
-
-    return { page, clientHandle, mxId };
-  }
-
-  private static async maybeDismissBrowserNotSupportedToast(
-    page: Page,
-  ): Promise<void> {
-    const browserUnsupportedToast = page
-      .getByText("Element does not support this browser")
-      .locator("..")
-      .locator("..");
-
-    // Dismiss incompatible browser toast
-    const dismissButton = browserUnsupportedToast.getByRole("button", {
-      name: "Dismiss",
-    });
-    try {
-      await expect(dismissButton).toBeVisible({ timeout: 700 });
-      await dismissButton.click();
-    } catch {
-      // dismissButton not visible, continue as normal
-    }
-  }
-
-  private static async maybeDismissServiceWorkerWarningToast(
-    page: Page,
-  ): Promise<void> {
-    const toast = page
-      .locator(".mx_Toast_toast")
-      .getByText("Failed to load service worker");
-
-    try {
-      await expect(toast).toBeVisible({ timeout: 700 });
-      await page
-        .locator(".mx_Toast_toast")
-        .getByRole("button", { name: "OK" })
-        .click();
-    } catch {
-      // toast not visible, continue as normal
-    }
-  }
-
-  public static async createRoom(
-    name: string,
-    page: Page,
-    andInvite: string[] = [],
-  ): Promise<void> {
-    await page
-      .getByRole("navigation", { name: "Room list" })
-      .getByRole("button", { name: "New conversation" })
-      .click();
-
-    await page.getByRole("menuitem", { name: "New Room" }).click();
-    await page.getByRole("textbox", { name: "Name" }).fill(name);
-    await page.getByRole("button", { name: "Create room" }).click();
-    await expect(page.getByText("You created this room.")).toBeVisible();
-    await expect(page.getByText("Encryption enabled")).toBeVisible();
-
-    // Invite users if any
-    if (andInvite.length > 0) {
-      await page
-        .getByRole("button", { name: "Invite to this room", exact: true })
-        .click();
-
-      const inviteInput = page.getByRole("dialog").getByRole("textbox");
-      for (const mxId of andInvite) {
-        await inviteInput.focus();
-        await inviteInput.fill(mxId);
-        await inviteInput.press("Enter");
-      }
-
-      await page.getByRole("button", { name: "Invite" }).click();
-    }
-  }
-
-  /**
-   * Accepts a room invite using the room name.
-   * Locatest the invite in the room list.
-   *
-   */
-  public static async acceptRoomInvite(
-    roomName: string,
-    page: Page,
-  ): Promise<void> {
-    await expect(page.getByRole("option", { name: roomName })).toBeVisible();
-    await page.getByRole("option", { name: roomName }).click();
-    await page.getByRole("button", { name: "Accept" }).click();
-
-    await expect(
-      page.getByRole("main").getByRole("heading", { name: roomName }),
-    ).toBeVisible();
-  }
-
-  /**
-   * Opens the widget and then goes to the settings to set the RTC mode.
-   * then closes the widget lobby.
-   *
-   * intended to be used before joining!
-   *
-   * WORKS IF A ROOM IS CURRENTLY OPENED IN THE PAGE
-   */
-  public static async openWidgetSetEmbeddedElementCallRtcModeCloseWidget(
-    page: Page,
-    mode: RtcMode,
-  ): Promise<void> {
-    await page.getByRole("button", { name: "Video call" }).click();
-    await page.getByRole("menuitem", { name: "Element Call" }).click();
-    await TestHelpers.setEmbeddedElementCallRtcMode(page, mode);
-    await page.getByRole("button", { name: "Close lobby" }).click();
-  }
-  /**
-   * Goes to the settings to set the RTC mode.
-   * then closes the settings modal.
-   *
-   * WORKS IF A ROOM IS CURRENTLY SHOWING THE EC WIDGET
-   */
-  public static async setEmbeddedElementCallRtcMode(
-    page: Page,
-    mode: RtcMode,
-  ): Promise<void> {
-    const iframe = page.locator('iframe[title="Element Call"]').contentFrame();
-
-    await iframe.getByRole("button", { name: "Settings" }).click();
-    await iframe.getByRole("tab", { name: "Preferences" }).click();
-
-    // await iframe.getByText("Developer mode", { exact: true }).click();
-    await iframe.getByText("Developer mode", { exact: true }).check(); // Idempotent:  won't uncheck if already checked
-
-    // Move to Developer tab now
-    await iframe.getByRole("tab", { name: "Developer" }).click();
-    if (mode == "legacy") {
-      await iframe.getByText("Legacy: state events").click();
-    } else if (mode == "2_0") {
-      await iframe.getByText("Matrix 2.0").click();
-    } else {
-      // compat
-      await iframe.getByText("Compatibility: state events").click();
-    }
-    await iframe.getByTestId("modal_close").click();
-  }
-
-  /**
-   * Sets the current Element Web app to use the dev Element Call URL.
-   * @param page - The EW page
-   */
-  public static async setDevToolElementCallDevUrl(page: Page): Promise<void> {
-    if (process.env.USE_DOCKER) {
-      await page.evaluate(() => {
-        window.mxSettingsStore.setValue(
-          "Developer.elementCallUrl",
-          null,
-          "device",
-          "https://call.m.localhost/room",
-        );
-      });
-    } else {
-      await page.evaluate(() => {
-        window.mxSettingsStore.setValue(
-          "Developer.elementCallUrl",
-          null,
-          "device",
-          "https://localhost:3000/room",
-        );
-      });
-    }
-  }
-
-  /**
-   * Switches to a room in the room list by its name.
-   * @param page - The EW page
-   * @param roomName - The name of the room to switch to
-   */
-  public static async switchToRoomNamed(
-    page: Page,
-    roomName: string,
-  ): Promise<void> {
-    await page.getByRole("option", { name: `Open room ${roomName}` }).click();
-  }
-}

playwright/widget/voice-call-dm.spec.ts

@@ -1,232 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { expect, test } from "@playwright/test";
-
-import { widgetTest } from "../fixtures/widget-user.ts";
-import { TestHelpers } from "./test-helpers.ts";
-
-widgetTest.use({ callType: "dm" });
-
-widgetTest(
-  "Start a new voice call in DM as widget",
-  async ({ asWidget, browserName }) => {
-    test.skip(
-      browserName === "firefox",
-      "The is test is not working on firefox CI environment. No mic/audio device inputs so cam/mic are disabled",
-    );
-
-    test.slow(); // Triples the timeout
-
-    const { brooks, whistler } = asWidget;
-
-    await TestHelpers.startCallInCurrentRoom(brooks.page, true);
-
-    await expect(
-      brooks.page.locator('iframe[title="Element Call"]'),
-    ).toBeVisible();
-
-    const brooksFrame = brooks.page
-      .locator('iframe[title="Element Call"]')
-      .contentFrame();
-
-    // We should show a ringing overlay, let's check for that
-    await expect(
-      brooksFrame.getByText(`Waiting for ${whistler.displayName} to join…`),
-    ).toBeVisible();
-
-    await expect(whistler.page.getByText("Incoming voice call")).toBeVisible();
-    await whistler.page.getByRole("button", { name: "Accept" }).click();
-
-    await expect(
-      whistler.page.locator('iframe[title="Element Call"]'),
-    ).toBeVisible();
-
-    const whistlerFrame = whistler.page
-      .locator('iframe[title="Element Call"]')
-      .contentFrame();
-
-    // ASSERT the button states for whistler (the callee)
-    // video should be off by default in a voice call
-    await expect(
-      whistlerFrame.getByRole("switch", {
-        name: "Start video",
-        checked: false,
-      }),
-    ).toBeVisible();
-    // audio should be on for the voice call
-    await expect(
-      whistlerFrame.getByRole("switch", {
-        name: "Mute microphone",
-        checked: true,
-      }),
-    ).toBeVisible();
-
-    // ASSERT the button states for brools (the caller)
-    // video should be off by default in a voice call
-    await expect(
-      whistlerFrame.getByRole("switch", {
-        name: "Start video",
-        checked: false,
-      }),
-    ).toBeVisible();
-    // audio should be on for the voice call
-    await expect(
-      whistlerFrame.getByRole("switch", {
-        name: "Mute microphone",
-        checked: true,
-      }),
-    ).toBeVisible();
-
-    // In order to confirm that the call is disconnected we will check that the message composer is shown again.
-    // So first we need to confirm that it is hidden when in the call.
-    await expect(
-      whistler.page.locator(".mx_BasicMessageComposer"),
-    ).not.toBeVisible();
-    await expect(
-      brooks.page.locator(".mx_BasicMessageComposer"),
-    ).not.toBeVisible();
-
-    // ASSERT hanging up on one side ends the call for both
-    await brooksFrame.getByRole("button", { name: "End call" }).click();
-
-    // The widget should be closed on both sides and the timeline should be back on screen
-    await expect(
-      whistler.page.locator(".mx_BasicMessageComposer"),
-    ).toBeVisible();
-    await expect(brooks.page.locator(".mx_BasicMessageComposer")).toBeVisible();
-  },
-);
-
-widgetTest(
-  "Start a new video call in DM as widget",
-  async ({ asWidget, browserName }) => {
-    test.skip(
-      browserName === "firefox",
-      "The is test is not working on firefox CI environment. No mic/audio device inputs so cam/mic are disabled",
-    );
-
-    test.slow(); // Triples the timeout
-
-    const { brooks, whistler } = asWidget;
-
-    await TestHelpers.startCallInCurrentRoom(brooks.page, false);
-
-    await expect(
-      brooks.page.locator('iframe[title="Element Call"]'),
-    ).toBeVisible();
-
-    const brooksFrame = brooks.page
-      .locator('iframe[title="Element Call"]')
-      .contentFrame();
-
-    // We should show a ringing overlay, let's check for that
-    await expect(
-      brooksFrame.getByText(`Waiting for ${whistler.displayName} to join…`),
-    ).toBeVisible();
-
-    await expect(whistler.page.getByText("Incoming video call")).toBeVisible();
-    await whistler.page.getByRole("button", { name: "Accept" }).click();
-
-    await expect(
-      whistler.page.locator('iframe[title="Element Call"]'),
-    ).toBeVisible();
-
-    const whistlerFrame = whistler.page
-      .locator('iframe[title="Element Call"]')
-      .contentFrame();
-
-    // ASSERT the button states for whistler (the callee)
-    // video should be off by default in a video call
-    await expect(
-      whistlerFrame.getByRole("switch", { name: "Stop video", checked: true }),
-    ).toBeVisible();
-    // audio should be on too
-    await expect(
-      whistlerFrame.getByRole("switch", {
-        name: "Mute microphone",
-        checked: true,
-      }),
-    ).toBeVisible();
-
-    // ASSERT the button states for brools (the caller)
-    // video should be off by default in a video call
-    await expect(
-      whistlerFrame.getByRole("switch", { name: "Stop video", checked: true }),
-    ).toBeVisible();
-    // audio should be on too
-    await expect(
-      whistlerFrame.getByRole("switch", {
-        name: "Mute microphone",
-        checked: true,
-      }),
-    ).toBeVisible();
-
-    // In order to confirm that the call is disconnected we will check that the message composer is shown again.
-    // So first we need to confirm that it is hidden when in the call.
-    await expect(
-      whistler.page.locator(".mx_BasicMessageComposer"),
-    ).not.toBeVisible();
-    await expect(
-      brooks.page.locator(".mx_BasicMessageComposer"),
-    ).not.toBeVisible();
-
-    // ASSERT hanging up on one side ends the call for both
-    await brooksFrame.getByRole("button", { name: "End call" }).click();
-
-    // The widget should be closed on both sides and the timeline should be back on screen
-    await expect(
-      whistler.page.locator(".mx_BasicMessageComposer"),
-    ).toBeVisible();
-    await expect(brooks.page.locator(".mx_BasicMessageComposer")).toBeVisible();
-  },
-);
-
-widgetTest(
-  "Decline a new video call in DM as widget",
-  async ({ asWidget, browserName }) => {
-    test.skip(
-      browserName === "firefox",
-      "The is test is not working on firefox CI environment. No mic/audio device inputs so cam/mic are disabled",
-    );
-
-    test.slow(); // Triples the timeout
-
-    const { brooks, whistler } = asWidget;
-
-    await TestHelpers.startCallInCurrentRoom(brooks.page, false);
-
-    await expect(
-      brooks.page.locator('iframe[title="Element Call"]'),
-    ).toBeVisible();
-
-    const brooksFrame = brooks.page
-      .locator('iframe[title="Element Call"]')
-      .contentFrame();
-
-    // We should show a ringing overlay, let's check for that
-    await expect(
-      brooksFrame.getByText(`Waiting for ${whistler.displayName} to join…`),
-    ).toBeVisible();
-
-    await expect(whistler.page.getByText("Incoming video call")).toBeVisible();
-    await whistler.page.getByRole("button", { name: "Decline" }).click();
-
-    await expect(
-      whistler.page.locator('iframe[title="Element Call"]'),
-    ).not.toBeVisible();
-
-    // The widget should be closed and the timeline should be back on screen
-    await expect(
-      brooks.page.locator('iframe[title="Element Call"]'),
-    ).not.toBeVisible();
-
-    await expect(
-      brooks.page.getByText("This is the beginning of your"),
-    ).toBeVisible();
-  },
-);

sdk/README.md

@@ -1,4 +1,4 @@
-# SDK mode (EXPERIMENTAL)
+# SDK mode
 
 EC can be build in sdk mode. This will result in a compiled js file that can be imported in very simple webapps.
 
@@ -6,40 +6,16 @@ It allows to use matrixRTC in combination with livekit without relying on elemen
 
 This is done by instantiating the call view model and exposing some useful behaviors (observables) and methods.
 
-This folder contains an example index.html file that showcases the sdk in use (hosted on localhost:8123 with a webserver allowing cors (for example `npx serve -l 81234 --cors`)) as a godot engine HTML export template.
-
-## Getting started
-
-To get started run
-
-```
-yarn
-yarn build:sdk
-```
-
-in the repository root.
-
-It will create a `dist` folder containing the compiled js file.
-
-This file needs to be hosted. Locally (via `npx serve -l 81234 --cors`) or on a remote server.
-
-Now you just need to add the widget to element web via:
-
-```
-/addwidget http://localhost:3000?widgetId=$matrix_widget_id&perParticipantE2EE=true&userId=$matrix_user_id&deviceId=$org.matrix.msc3819.matrix_device_id&baseUrl=$org.matrix.msc4039.matrix_base_url&roomId=$matrix_room_id
-```
+This folder contains an example index.html file that showcases the sdk in use (hosted on localhost:8123 with a webserver ellowing cors (for example `npx serve -l 81234 --cors`)) as a godot engine HTML export template.
 
 ## Widgets
 
-The sdk mode is particularly interesting to be used in widgets. In widgets you do not need to pay attention to matrix login/cs api ...
-To create a widget see the example `index.html` file in this folder. And add it to EW via:
+The sdk mode is particularly interesting to be used in widgets where you do not need to pay attention to matrix login/cs api ...
+To create a widget see the example index.html file in this folder. And add it to EW via:
 `/addwidget <widgetUrl>` (see **url parameters** for more details on `<widgetUrl>`)
 
 ### url parameters
 
-The url parameters are needed to pass initial data to the widget. They will automatically be used
-by the matrixRTCSdk to start the postmessage widget api (communication between the client (e.g. Element Web) and the widget)
-
 ```
 widgetId = $matrix_widget_id
 perParticipantE2EE = true

sdk/helper.ts

@@ -12,12 +12,15 @@ Please see LICENSE in the repository root for full details.
 import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
 import { scan } from "rxjs";
 
-import { type WidgetHelpers } from "../src/widget";
+import { widget as _widget } from "../src/widget";
 import { type LivekitRoomItem } from "../src/state/CallViewModel/CallViewModel";
 
 export const logger = rootLogger.getChild("[MatrixRTCSdk]");
 
-export const tryMakeSticky = (widget: WidgetHelpers): void => {
+if (!_widget) throw Error("No widget. This webapp can only start as a widget");
+export const widget = _widget;
+
+export const tryMakeSticky = (): void => {
   logger.info("try making sticky MatrixRTCSdk");
   void widget.api
     .setAlwaysOnScreen(true)

sdk/index.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <html>
   <head>
-    <title>MatrixRTC Widget</title>
+    <title>Godot MatrixRTC Widget</title>
     <meta charset="utf-8" />
     <script type="module">
       // TODO use the url where the matrixrtc-sdk.js file from dist is hosted
@@ -9,7 +9,7 @@
 
       try {
         window.matrixRTCSdk = await createMatrixRTCSdk(
-          "com.github.toger5.rtc-application-type", // rtc application type
+          "com.github.toger5.godot-game",
         );
         console.info("createMatrixRTCSdk was created!");
       } catch (e) {
@@ -17,6 +17,16 @@
       }
       const sdk = window.matrixRTCSdk;
 
+      // This is the main bridging interface to godot
+      window.matrixRTCSdkGodot = {
+        dataObs: sdk.data$,
+        memberObs: sdk.members$,
+        // join: sdk.join, // lets stick with autojoin for now
+        sendData: sdk.sendData,
+        leave: sdk.leave,
+        connectedObs: sdk.connected$,
+      };
+
       console.info("matrixRTCSdk join ", sdk);
       const connectionState = sdk.join();
       console.info("matrixRTCSdk joined");
@@ -28,13 +38,15 @@
         const child = document.createElement("p");
         child.innerHTML = JSON.stringify(data);
         div.appendChild(child);
+        // TODO forward to godot
       });
 
       sdk.members$.subscribe((memberObjects) => {
+        // reset div
         const div = document.getElementById("members");
         div.innerHTML = "<h3>Members:</h3>";
 
-        // Create member list
+        // create member list
         const members = memberObjects.map((member) => member.membership.sender);
         console.info("members changed", members);
         for (const m of members) {
@@ -50,10 +62,17 @@
         const div = document.getElementById("connect_status");
         div.innerHTML = connected ? "Connected" : "Disconnected";
       });
+
+      let engine = new Engine($GODOT_CONFIG);
+      engine.startGame();
     </script>
+    <!--// TODO use it as godot HTML template-->
+    <script src="$GODOT_URL"></script>
   </head>
   <body>
+    <canvas id="canvas"></canvas>
     <div
+      id="overlay"
       style="position: absolute; top: 0; right: 0; background-color: #ffffff10"
     >
       <div id="connect_status"></div>

sdk/main.ts

@@ -1,13 +1,11 @@
 /*
-Copyright 2025-2026 Element Creations Ltd.
+Copyright 2025 Element Creations Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
 /**
- * EXPERIMENTAL
- *
  * This file is the entrypoint for the sdk build of element call: `yarn build:sdk`
  * use in widgets.
  * It exposes the `createMatrixRTCSdk` which creates the `MatrixRTCSdk` interface (see below) that
@@ -32,8 +30,8 @@ import {
 } from "rxjs";
 import {
   type CallMembership,
+  MatrixRTCSession,
   MatrixRTCSessionEvent,
-  MatrixRTCSessionManager,
 } from "matrix-js-sdk/lib/matrixrtc";
 import {
   type Room as LivekitRoom,
@@ -52,12 +50,14 @@ import { getUrlParams } from "../src/UrlParams";
 import { MuteStates } from "../src/state/MuteStates";
 import { MediaDevices } from "../src/state/MediaDevices";
 import { E2eeType } from "../src/e2ee/e2eeType";
-import { currentAndPrev, logger, TEXT_LK_TOPIC, tryMakeSticky } from "./helper";
 import {
-  ElementWidgetActions,
-  widget as _widget,
-  initializeWidget,
-} from "../src/widget";
+  currentAndPrev,
+  logger,
+  TEXT_LK_TOPIC,
+  tryMakeSticky,
+  widget,
+} from "./helper";
+import { ElementWidgetActions } from "../src/widget";
 import { type Connection } from "../src/state/CallViewModel/remoteMembers/Connection";
 
 interface MatrixRTCSdk {
@@ -68,13 +68,7 @@ interface MatrixRTCSdk {
   join: () => void;
   /** @throws on leave errors */
   leave: () => void;
-  /**
-   * Ends the rtc sdk. This will unsubscribe any event listeners. And end the associated scope.
-   * No updates can be received from the rtc sdk. The sdk cannot be restarted after.
-   * A new sdk needs to be created via createMatrixRTCSdk.
-   */
-  stop: () => void;
-  data$: Observable<{ rtcBackendIdentity: string; data: string }>;
+  data$: Observable<{ sender: string; data: string }>;
   /**
    * flattened list of members
    */
@@ -85,54 +79,34 @@ interface MatrixRTCSdk {
       participant: LocalParticipant | RemoteParticipant | null;
     }[]
   >;
-  /**
-   * flattened local members
-   */
-  localMember$: Behavior<{
-    connection: Connection | null;
-    membership: CallMembership;
-    participant: LocalParticipant | null;
-  } | null>;
   /** Use the LocalMemberConnectionState returned from `join` for a more detailed connection state  */
   connected$: Behavior<boolean>;
   sendData?: (data: unknown) => Promise<void>;
-  sendRoomMessage?: (message: string) => Promise<void>;
 }
 
 export async function createMatrixRTCSdk(
   application: string = "m.call",
   id: string = "",
-  sticky: boolean = false,
 ): Promise<MatrixRTCSdk> {
-  const scope = new ObservableScope();
-
-  // widget client
-  initializeWidget(application, true);
-  const widget = _widget;
-  if (!widget) throw Error("No widget. This webapp can only start as a widget");
+  logger.info("Hello");
   const client = await widget.client;
   logger.info("client created");
-
-  // url params
+  const scope = new ObservableScope();
   const { roomId } = getUrlParams();
   if (roomId === null) throw Error("could not get roomId from url params");
+
   const room = client.getRoom(roomId);
   if (room === null) throw Error("could not get room from client");
 
-  // rtc session
-  const slot = { application, id };
-  const rtcSessionManager = new MatrixRTCSessionManager(logger, client, slot);
-  rtcSessionManager.start();
-  const rtcSession = rtcSessionManager.getRoomSession(room);
-
-  // media devices
   const mediaDevices = new MediaDevices(scope);
-  const muteStates = new MuteStates(scope, mediaDevices, {
-    audioEnabled: false,
-    videoEnabled: false,
-  });
-
-  // call view model
+  const muteStates = new MuteStates(scope, mediaDevices, constant(true));
+  const slot = { application, id };
+  const rtcSession = new MatrixRTCSession(
+    client,
+    room,
+    MatrixRTCSession.sessionMembershipsForSlot(room, slot),
+    slot,
+  );
   const callViewModel = createCallViewModel$(
     scope,
     rtcSession,
@@ -145,9 +119,8 @@ export async function createMatrixRTCSdk(
     constant({ supported: false, processor: undefined }),
   );
   logger.info("CallViewModelCreated");
-
   // create data listener
-  const data$ = new Subject<{ rtcBackendIdentity: string; data: string }>();
+  const data$ = new Subject<{ sender: string; data: string }>();
 
   const lkTextStreamHandlerFunction = async (
     reader: TextStreamReader,
@@ -169,7 +142,7 @@ export async function createMatrixRTCSdk(
     if (participants && participants.includes(participantInfo.identity)) {
       const text = await reader.readAll();
       logger.info(`Received text: ${text}`);
-      data$.next({ rtcBackendIdentity: participantInfo.identity, data: text });
+      data$.next({ sender: participantInfo.identity, data: text });
     } else {
       logger.warn(
         "Received text from unknown participant",
@@ -259,16 +232,6 @@ export async function createMatrixRTCSdk(
     }
   };
 
-  const sendRoomMessage = async (message: string): Promise<void> => {
-    const messageString = JSON.stringify(message);
-    logger.info("try sending to room: ", messageString);
-    try {
-      await client.sendTextMessage(room.roomId, message);
-    } catch (e) {
-      logger.error("failed sending to room: ", messageString, e);
-    }
-  };
-
   // after hangup gets called
   const leaveSubs = callViewModel.leave$.subscribe(() => {
     const scheduleWidgetCloseOnLeave = async (): Promise<void> => {
@@ -296,6 +259,9 @@ export async function createMatrixRTCSdk(
 
     // schedule close first and then leave (scope.end)
     void scheduleWidgetCloseOnLeave();
+
+    // actual hangup (ending scope will send the leave event.. its kinda odd. since you might end up closing the widget too fast)
+    scope.end();
   });
 
   logger.info("createMatrixRTCSdk done");
@@ -303,40 +269,15 @@ export async function createMatrixRTCSdk(
   return {
     join: (): void => {
       // first lets try making the widget sticky
-      if (sticky) tryMakeSticky(widget);
+      tryMakeSticky();
       callViewModel.join();
     },
     leave: (): void => {
-      callViewModel.leave();
-    },
-    stop: (): void => {
+      callViewModel.hangup();
       leaveSubs.unsubscribe();
       livekitRoomItemsSub.unsubscribe();
-      scope.end();
     },
     data$,
-    localMember$: scope.behavior(
-      callViewModel.localMatrixLivekitMember$.pipe(
-        tap((member) =>
-          logger.info("localMatrixLivekitMember$ next: ", member),
-        ),
-        switchMap((member) => {
-          if (member === null) return of(null);
-          return combineLatest([
-            member.connection$,
-            member.membership$,
-            member.participant.value$,
-          ]).pipe(
-            map(([connection, membership, participant]) => ({
-              connection,
-              membership,
-              participant,
-            })),
-          );
-        }),
-        tap((member) => logger.info("localMember$ next: ", member)),
-      ),
-    ),
     connected$: callViewModel.connected$,
     members$: scope.behavior(
       callViewModel.matrixLivekitMembers$.pipe(
@@ -363,6 +304,5 @@ export async function createMatrixRTCSdk(
       [],
     ),
     sendData,
-    sendRoomMessage,
   };
 }

src/RTCConnectionStats.tsx

@@ -20,7 +20,6 @@ interface Props {
   audio?: RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats;
   video?: RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats;
   focusUrl?: string;
-  rtcBackendIdentity?: string;
 }
 
 const extractDomain = (url: string): string => {
@@ -38,7 +37,6 @@ export const RTCConnectionStats: FC<Props> = ({
   audio,
   video,
   focusUrl,
-  rtcBackendIdentity,
   ...rest
 }) => {
   const [showModal, setShowModal] = useState(false);
@@ -73,9 +71,6 @@ export const RTCConnectionStats: FC<Props> = ({
           </pre>
         </div>
       </Modal>
-      <Text as="span" size="xs" title="rtcBackendIdentity">
-        rtcBackendIdentity:{rtcBackendIdentity}
-      </Text>
       {focusUrl && (
         <div>
           <Text as="span" size="xs" title="focusURL">

src/UrlParams.test.ts

@@ -1,6 +1,5 @@
 /*
 Copyright 2023, 2024 New Vector Ltd.
-Copyright 2026 Element Creations Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
@@ -257,6 +256,8 @@ describe("UrlParams", () => {
       skipLobby: false,
       returnToLobby: false,
       sendNotificationType: "notification",
+      defaultAudioEnabled: true,
+      defaultVideoEnabled: true,
     });
     it("use no-intent-defaults with unknown intent", () => {
       expect(computeUrlParams()).toMatchObject(noIntentDefaults);
@@ -394,6 +395,8 @@ describe("UrlParams", () => {
         expect.any(Object),
         "configuration:",
         expect.any(Object),
+        "intentAndPlatformDerivedConfiguration:",
+        {},
       );
     });
   });

src/UrlParams.ts

@@ -1,6 +1,5 @@
 /*
 Copyright 2022-2024 New Vector Ltd.
-Copyright 2026 Element Creations Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
@@ -248,12 +247,21 @@ export interface UrlConfiguration {
   callIntent?: RTCCallIntent;
 }
 
+interface IntentAndPlatformDerivedConfiguration {
+  defaultAudioEnabled?: boolean;
+  defaultVideoEnabled?: boolean;
+}
+
 // If you need to add a new flag to this interface, prefer a name that describes
 // a specific behavior (such as 'confineToRoom'), rather than one that describes
 // the situations that call for this behavior ('isEmbedded'). This makes it
 // clearer what each flag means, and helps us avoid coupling Element Call's
 // behavior to the needs of specific consumers.
-export interface UrlParams extends UrlProperties, UrlConfiguration {}
+export interface UrlParams
+  extends
+    UrlProperties,
+    UrlConfiguration,
+    IntentAndPlatformDerivedConfiguration {}
 
 // This is here as a stopgap, but what would be far nicer is a function that
 // takes a UrlParams and returns a query string. That would enable us to
@@ -453,6 +461,29 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => {
       };
   }
 
+  const intentAndPlatformDerivedConfiguration: IntentAndPlatformDerivedConfiguration =
+    {};
+  // Desktop also includes web. Its anything that is not mobile.
+  const desktopMobile = platform === "desktop" ? "desktop" : "mobile";
+  switch (desktopMobile) {
+    case "desktop":
+    case "mobile":
+      switch (intent) {
+        case UserIntent.StartNewCall:
+        case UserIntent.JoinExistingCall:
+        case UserIntent.StartNewCallDM:
+        case UserIntent.JoinExistingCallDM:
+          intentAndPlatformDerivedConfiguration.defaultAudioEnabled = true;
+          intentAndPlatformDerivedConfiguration.defaultVideoEnabled = true;
+          break;
+        case UserIntent.StartNewCallDMVoice:
+        case UserIntent.JoinExistingCallDMVoice:
+          intentAndPlatformDerivedConfiguration.defaultAudioEnabled = true;
+          intentAndPlatformDerivedConfiguration.defaultVideoEnabled = false;
+          break;
+      }
+  }
+
   const properties: UrlProperties = {
     widgetId,
     parentUrl,
@@ -473,7 +504,8 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => {
     homeserver: !isWidget ? parser.getParam("homeserver") : null,
     posthogApiHost: parser.getParam("posthogApiHost"),
     posthogApiKey: parser.getParam("posthogApiKey"),
-    posthogUserId: parser.getParam("posthogUserId"),
+    posthogUserId:
+      parser.getParam("posthogUserId") ?? parser.getParam("analyticsID"),
     rageshakeSubmitUrl: parser.getParam("rageshakeSubmitUrl"),
     sentryDsn: parser.getParam("sentryDsn"),
     sentryEnvironment: parser.getParam("sentryEnvironment"),
@@ -516,12 +548,15 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => {
     properties,
     "configuration:",
     configuration,
+    "intentAndPlatformDerivedConfiguration:",
+    intentAndPlatformDerivedConfiguration,
   );
 
   return {
     ...properties,
     ...intentPreset,
     ...pickBy(configuration, (v?: unknown) => v !== undefined),
+    ...intentAndPlatformDerivedConfiguration,
   };
 };
 

src/__snapshots__/AppBar.test.tsx.snap

@@ -21,7 +21,7 @@ exports[`AppBar > renders 1`] = `
           tabindex="0"
         >
           <div
-            class="_indicator-icon_147l5_17"
+            class="_indicator-icon_zr2a0_17"
             style="--cpd-icon-button-size: 100%;"
           >
             <svg

src/button/Button.tsx

@@ -1,6 +1,5 @@
 /*
 Copyright 2022-2024 New Vector Ltd.
-Copyright 2026 Element Creations Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
@@ -22,25 +21,22 @@ import {
 import styles from "./Button.module.css";
 
 interface MicButtonProps extends ComponentPropsWithoutRef<"button"> {
-  enabled: boolean;
-  size?: "sm" | "lg";
+  muted: boolean;
 }
 
-export const MicButton: FC<MicButtonProps> = ({ enabled, ...props }) => {
+export const MicButton: FC<MicButtonProps> = ({ muted, ...props }) => {
   const { t } = useTranslation();
-  const Icon = enabled ? MicOnSolidIcon : MicOffSolidIcon;
-  const label = enabled
-    ? t("mute_microphone_button_label")
-    : t("unmute_microphone_button_label");
+  const Icon = muted ? MicOffSolidIcon : MicOnSolidIcon;
+  const label = muted
+    ? t("unmute_microphone_button_label")
+    : t("mute_microphone_button_label");
 
   return (
     <Tooltip label={label}>
       <CpdButton
         iconOnly
         Icon={Icon}
-        kind={enabled ? "primary" : "secondary"}
-        role="switch"
-        aria-checked={enabled}
+        kind={muted ? "primary" : "secondary"}
         {...props}
       />
     </Tooltip>
@@ -48,25 +44,22 @@ export const MicButton: FC<MicButtonProps> = ({ enabled, ...props }) => {
 };
 
 interface VideoButtonProps extends ComponentPropsWithoutRef<"button"> {
-  enabled: boolean;
-  size?: "sm" | "lg";
+  muted: boolean;
 }
 
-export const VideoButton: FC<VideoButtonProps> = ({ enabled, ...props }) => {
+export const VideoButton: FC<VideoButtonProps> = ({ muted, ...props }) => {
   const { t } = useTranslation();
-  const Icon = enabled ? VideoCallSolidIcon : VideoCallOffSolidIcon;
-  const label = enabled
-    ? t("stop_video_button_label")
-    : t("start_video_button_label");
+  const Icon = muted ? VideoCallOffSolidIcon : VideoCallSolidIcon;
+  const label = muted
+    ? t("start_video_button_label")
+    : t("stop_video_button_label");
 
   return (
     <Tooltip label={label}>
       <CpdButton
         iconOnly
         Icon={Icon}
-        kind={enabled ? "primary" : "secondary"}
-        role="switch"
-        aria-checked={enabled}
+        kind={muted ? "primary" : "secondary"}
         {...props}
       />
     </Tooltip>
@@ -75,7 +68,6 @@ export const VideoButton: FC<VideoButtonProps> = ({ enabled, ...props }) => {
 
 interface ShareScreenButtonProps extends ComponentPropsWithoutRef<"button"> {
   enabled: boolean;
-  size: "sm" | "lg";
 }
 
 export const ShareScreenButton: FC<ShareScreenButtonProps> = ({
@@ -93,19 +85,13 @@ export const ShareScreenButton: FC<ShareScreenButtonProps> = ({
         iconOnly
         Icon={ShareScreenSolidIcon}
         kind={enabled ? "primary" : "secondary"}
-        role="switch"
-        aria-checked={enabled}
         {...props}
       />
     </Tooltip>
   );
 };
 
-interface EndCallButtonProps extends ComponentPropsWithoutRef<"button"> {
-  size?: "sm" | "lg";
-}
-
-export const EndCallButton: FC<EndCallButtonProps> = ({
+export const EndCallButton: FC<ComponentPropsWithoutRef<"button">> = ({
   className,
   ...props
 }) => {
@@ -124,10 +110,9 @@ export const EndCallButton: FC<EndCallButtonProps> = ({
   );
 };
 
-interface SettingsButtonProps extends ComponentPropsWithoutRef<"button"> {
-  size?: "sm" | "lg";
-}
-export const SettingsButton: FC<SettingsButtonProps> = (props) => {
+export const SettingsButton: FC<ComponentPropsWithoutRef<"button">> = (
+  props,
+) => {
   const { t } = useTranslation();
 
   return (

src/button/ReactionToggleButton.test.tsx

@@ -18,8 +18,7 @@ import { getBasicCallViewModelEnvironment } from "../utils/test-viewmodel";
 import { alice, local, localRtcMember } from "../utils/test-fixtures";
 import { type MockRTCSession } from "../utils/test";
 import { ReactionsSenderProvider } from "../reactions/useReactionsSender";
-import { initializeWidget } from "../widget";
-initializeWidget();
+
 vi.mock("livekit-client/e2ee-worker?worker");
 
 const localIdent = `${localRtcMember.userId}:${localRtcMember.deviceId}`;

src/button/ReactionToggleButton.tsx

@@ -166,7 +166,6 @@ export function ReactionPopupMenu({
 interface ReactionToggleButtonProps extends ComponentPropsWithoutRef<"button"> {
   identifier: string;
   vm: CallViewModel;
-  size?: "sm" | "lg";
 }
 
 export function ReactionToggleButton({

src/button/__snapshots__/ReactionToggleButton.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`Can close reaction dialog 1`] = `
     aria-expanded="true"
     aria-haspopup="true"
     aria-labelledby="_r_bb_"
-    class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
+    class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
     data-kind="primary"
     data-size="lg"
     role="button"
@@ -44,7 +44,7 @@ exports[`Can fully expand emoji picker 1`] = `
     aria-expanded="true"
     aria-haspopup="true"
     aria-labelledby="_r_7m_"
-    class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
+    class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
     data-kind="primary"
     data-size="lg"
     role="button"
@@ -75,7 +75,7 @@ exports[`Can lower hand 1`] = `
     aria-expanded="false"
     aria-haspopup="true"
     aria-labelledby="_r_36_"
-    class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
+    class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
     data-kind="secondary"
     data-size="lg"
     role="button"
@@ -109,7 +109,7 @@ exports[`Can open menu 1`] = `
     aria-expanded="true"
     aria-haspopup="true"
     aria-labelledby="_r_0_"
-    class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
+    class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
     data-kind="primary"
     data-size="lg"
     role="button"
@@ -140,7 +140,7 @@ exports[`Can raise hand 1`] = `
     aria-expanded="false"
     aria-haspopup="true"
     aria-labelledby="_r_1j_"
-    class="_button_13vu4_8 raisedButton _has-icon_13vu4_60 _icon-only_13vu4_53"
+    class="_button_vczzf_8 raisedButton _has-icon_vczzf_57 _icon-only_vczzf_50"
     data-kind="primary"
     data-size="lg"
     role="button"

src/config/ConfigOptions.ts

@@ -1,6 +1,5 @@
 /*
 Copyright 2022-2024 New Vector Ltd.
-Copyright 2026 Element Creations Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
@@ -164,6 +163,10 @@ export interface ResolvedConfigOptions extends ConfigOptions {
     };
   };
   ssla: string;
+  media_devices: {
+    enable_audio: boolean;
+    enable_video: boolean;
+  };
   app_prompt: boolean;
 }
 
@@ -178,5 +181,9 @@ export const DEFAULT_CONFIG: ResolvedConfigOptions = {
     feature_use_device_session_member_events: true,
   },
   ssla: "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf",
+  media_devices: {
+    enable_audio: true,
+    enable_video: true,
+  },
   app_prompt: true,
 };

src/e2ee/matrixKeyProvider.ts

@@ -6,13 +6,11 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { BaseKeyProvider } from "livekit-client";
+import { logger } from "matrix-js-sdk/lib/logger";
 import {
   type MatrixRTCSession,
   MatrixRTCSessionEvent,
 } from "matrix-js-sdk/lib/matrixrtc";
-import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
-import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
-const logger = rootLogger.getChild("[MatrixKeyProvider]");
 
 export class MatrixKeyProvider extends BaseKeyProvider {
   private rtcSession?: MatrixRTCSession;
@@ -44,8 +42,7 @@ export class MatrixKeyProvider extends BaseKeyProvider {
   private onEncryptionKeyChanged = (
     encryptionKey: Uint8Array<ArrayBuffer>,
     encryptionKeyIndex: number,
-    membershipParts: CallMembershipIdentityParts,
-    rtcBackendIdentity: string,
+    participantId: string,
   ): void => {
     crypto.subtle
       .importKey("raw", encryptionKey, "HKDF", false, [
@@ -56,17 +53,17 @@ export class MatrixKeyProvider extends BaseKeyProvider {
         (keyMaterial) => {
           this.onSetEncryptionKey(
             keyMaterial,
-            rtcBackendIdentity,
+            participantId,
             encryptionKeyIndex,
           );
 
           logger.debug(
-            `Sent new key to livekit room=${this.rtcSession?.room.roomId} participantId=${rtcBackendIdentity} (before hash: ${membershipParts.userId}:${membershipParts.deviceId}) encryptionKeyIndex=${encryptionKeyIndex}`,
+            `Sent new key to livekit room=${this.rtcSession?.room.roomId} participantId=${participantId} encryptionKeyIndex=${encryptionKeyIndex}`,
           );
         },
         (e) => {
           logger.error(
-            `Failed to create key material from buffer for livekit room=${this.rtcSession?.room.roomId} participantId before hash=${membershipParts.userId}:${membershipParts.deviceId} encryptionKeyIndex=${encryptionKeyIndex}`,
+            `Failed to create key material from buffer for livekit room=${this.rtcSession?.room.roomId} participantId=${participantId} encryptionKeyIndex=${encryptionKeyIndex}`,
             e,
           );
         },

src/grid/TileWrapper.tsx

@@ -27,13 +27,7 @@ interface Props<M, R extends HTMLElement> {
       state: Parameters<Handler<"drag", EventTypes["drag"]>>[0],
     ) => void
   > | null;
-  /**
-   * The width this tile will have once its animations have settled.
-   */
   targetWidth: number;
-  /**
-   * The width this tile will have once its animations have settled.
-   */
   targetHeight: number;
   model: M;
   Tile: ComponentType<TileProps<M, R>>;

src/initializer.tsx

@@ -28,7 +28,6 @@ import { getUrlParams } from "./UrlParams";
 import { Config } from "./config/Config";
 import { platform } from "./Platform";
 import { isFailure } from "./utils/fetch";
-import { initializeWidget } from "./widget";
 
 // This generates a map of locale names to their URL (based on import.meta.url), which looks like this:
 // {
@@ -116,8 +115,6 @@ export class Initializer {
   }
 
   public static async initBeforeReact(): Promise<void> {
-    initializeWidget();
-
     const polyfills: Promise<unknown>[] = [];
     if (shouldPolyfillSegmenter()) {
       polyfills.push(import("@formatjs/intl-segmenter/polyfill-force"));

src/livekit/MatrixAudioRenderer.test.tsx

@@ -28,15 +28,8 @@ import {
   mockRemoteParticipant,
   mockTrack,
 } from "../utils/test";
-import { initializeWidget } from "../widget";
-initializeWidget();
-export const TestAudioContextConstructor = vi.fn(
-  class {
-    public constructor() {
-      return testAudioContext;
-    }
-  },
-);
+
+export const TestAudioContextConstructor = vi.fn(() => testAudioContext);
 
 const MediaDevicesProvider = MediaDevicesContext.MediaDevicesContext.Provider;
 

src/livekit/MatrixAudioRenderer.tsx

@@ -15,6 +15,7 @@ import {
   type AudioTrackProps,
 } from "@livekit/components-react";
 import { logger } from "matrix-js-sdk/lib/logger";
+import { type ParticipantId } from "matrix-js-sdk/lib/matrixrtc";
 
 import { useEarpieceAudioConfig } from "../MediaDevicesContext";
 import { useReactiveState } from "../useReactiveState";
@@ -31,7 +32,7 @@ export interface MatrixAudioRendererProps {
    * This list needs to be composed based on the matrixRTC members so that we do not play audio from users
    * that are not expected to be in the rtc session (local user is excluded).
    */
-  validIdentities: string[];
+  validIdentities: ParticipantId[];
   /**
    * If set to `true`, mutes all audio tracks rendered by the component.
    * @remarks
@@ -78,7 +79,6 @@ export function LivekitRoomAudioRenderer({
     .filter((ref) => {
       const isValid = validIdentities.includes(ref.participant.identity);
       if (!isValid) {
-        // TODO make sure to also skip the warn logging for the local identity
         // Log that there is an invalid identity, that means that someone is publishing audio that is not expected to be in the call.
         prefixedLogger.warn(
           `Audio track ${ref.participant.identity} from ${url} has no matching matrix call member`,

src/livekit/openIDSFU.test.ts

@@ -18,7 +18,6 @@ import fetchMock from "fetch-mock";
 
 import { getSFUConfigWithOpenID, type OpenIDClientParts } from "./openIDSFU";
 import { testJWTToken } from "../utils/test-fixtures";
-import { ownMemberMock } from "../utils/test";
 
 const sfuUrl = "https://sfu.example.org";
 
@@ -34,7 +33,6 @@ describe("getSFUConfigWithOpenID", () => {
     vitest.clearAllMocks();
     fetchMock.reset();
   });
-
   it("should handle fetching a token", async () => {
     fetchMock.post("https://sfu.example.org/sfu/get", () => {
       return {
@@ -44,7 +42,6 @@ describe("getSFUConfigWithOpenID", () => {
     });
     const config = await getSFUConfigWithOpenID(
       matrixClient,
-      ownMemberMock,
       "https://sfu.example.org",
       "!example_room_id",
     );
@@ -56,7 +53,6 @@ describe("getSFUConfigWithOpenID", () => {
     });
     void (await fetchMock.flush());
   });
-
   it("should fail if the SFU errors", async () => {
     fetchMock.post("https://sfu.example.org/sfu/get", () => {
       return {
@@ -67,12 +63,11 @@ describe("getSFUConfigWithOpenID", () => {
     try {
       await getSFUConfigWithOpenID(
         matrixClient,
-        ownMemberMock,
         "https://sfu.example.org",
         "!example_room_id",
       );
     } catch (ex) {
-      expect((ex as Error).message).toEqual(
+      expect(((ex as Error).cause as Error).message).toEqual(
         "SFU Config fetch failed with status code 500",
       );
       void (await fetchMock.flush());
@@ -81,104 +76,6 @@ describe("getSFUConfigWithOpenID", () => {
     expect.fail("Expected test to throw;");
   });
 
-  it("should try legacy and then new endpoint with delay delegation", async () => {
-    fetchMock.post("https://sfu.example.org/get_token", () => {
-      return {
-        status: 500,
-        body: { error: "Test failure" },
-      };
-    });
-    fetchMock.post("https://sfu.example.org/sfu/get", () => {
-      return {
-        status: 500,
-        body: { error: "Test failure" },
-      };
-    });
-    try {
-      await getSFUConfigWithOpenID(
-        matrixClient,
-        ownMemberMock,
-        "https://sfu.example.org",
-        "!example_room_id",
-        {
-          delayEndpointBaseUrl: "https://matrix.homeserverserver.org",
-          delayId: "mock_delay_id",
-        },
-      );
-    } catch (ex) {
-      expect((ex as Error).message).toEqual(
-        "SFU Config fetch failed with status code 500",
-      );
-      void (await fetchMock.flush());
-    }
-    const calls = fetchMock.calls();
-    expect(calls.length).toBe(2);
-
-    expect(calls[0][0]).toStrictEqual("https://sfu.example.org/get_token");
-    expect(calls[0][1]).toStrictEqual({
-      // check if it uses correct delayID!
-      body: '{"room_id":"!example_room_id","slot_id":"m.call#ROOM","member":{"id":"@alice:example.org:DEVICE","claimed_user_id":"@alice:example.org","claimed_device_id":"DEVICE"},"delay_id":"mock_delay_id","delay_timeout":1000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}',
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-    });
-
-    expect(calls[1][0]).toStrictEqual("https://sfu.example.org/sfu/get");
-
-    expect(calls[1][1]).toStrictEqual({
-      body: '{"room":"!example_room_id","device_id":"DEVICE"}',
-      headers: {
-        "Content-Type": "application/json",
-      },
-      method: "POST",
-    });
-  });
-
-  it("dont try legacy if endpoint with delay delegation is sucessful", async () => {
-    fetchMock.post("https://sfu.example.org/get_token", () => {
-      return {
-        status: 200,
-        body: { url: sfuUrl, jwt: testJWTToken },
-      };
-    });
-    fetchMock.post("https://sfu.example.org/sfu/get", () => {
-      return {
-        status: 500,
-        body: { error: "Test failure" },
-      };
-    });
-    try {
-      await getSFUConfigWithOpenID(
-        matrixClient,
-        ownMemberMock,
-        "https://sfu.example.org",
-        "!example_room_id",
-        {
-          delayEndpointBaseUrl: "https://matrix.homeserverserver.org",
-          delayId: "mock_delay_id",
-        },
-      );
-    } catch (ex) {
-      expect((ex as Error).message).toEqual(
-        "SFU Config fetch failed with status code 500",
-      );
-      void (await fetchMock.flush());
-    }
-    const calls = fetchMock.calls();
-    expect(calls.length).toBe(1);
-
-    expect(calls[0][0]).toStrictEqual("https://sfu.example.org/get_token");
-    expect(calls[0][1]).toStrictEqual({
-      // check if it uses correct delayID!
-      body: '{"room_id":"!example_room_id","slot_id":"m.call#ROOM","member":{"id":"@alice:example.org:DEVICE","claimed_user_id":"@alice:example.org","claimed_device_id":"DEVICE"},"delay_id":"mock_delay_id","delay_timeout":1000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}',
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-    });
-  });
-
   it("should retry fetching the openid token", async () => {
     let count = 0;
     matrixClient.getOpenIdToken.mockImplementation(async () => {
@@ -201,7 +98,6 @@ describe("getSFUConfigWithOpenID", () => {
     });
     const config = await getSFUConfigWithOpenID(
       matrixClient,
-      ownMemberMock,
       "https://sfu.example.org",
       "!example_room_id",
     );

src/livekit/openIDSFU.ts

@@ -5,21 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import {
-  retryNetworkOperation,
-  type IOpenIDToken,
-  type MatrixClient,
-} from "matrix-js-sdk";
-import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
-import { type Logger } from "matrix-js-sdk/lib/logger";
+import { type IOpenIDToken, type MatrixClient } from "matrix-js-sdk";
+import { logger } from "matrix-js-sdk/lib/logger";
 
-import {
-  FailToGetOpenIdToken,
-  NoMatrix2AuthorizationService,
-} from "../utils/errors";
+import { FailToGetOpenIdToken } from "../utils/errors";
 import { doNetworkOperationWithRetry } from "../utils/matrix";
-import { Config } from "../config/Config";
-import { JwtEndpointVersion } from "../state/CallViewModel/localMember/LocalTransport";
 
 /**
  * Configuration and access tokens provided by the SFU on successful authentication.
@@ -28,7 +18,6 @@ export interface SFUConfig {
   url: string;
   jwt: string;
   livekitAlias: string;
-  // NOTE: Currently unused.
   livekitIdentity: string;
 }
 
@@ -75,32 +64,15 @@ export type OpenIDClientParts = Pick<
  * to the matrix RTC backend in order to get acces to the SFU.
  * It has built-in retry for calls to the homeserver with a backoff policy.
  * @param client The Matrix client
- * @param membership Our own membership identity parts used to send to jwt service.
  * @param serviceUrl The URL of the livekit SFU service
- * @param roomId The room id used in the jwt request. This is NOT the livekit_alias. The jwt service will provide the alias. It maps matrix room ids <-> Livekit aliases.
- * @param opts Additional options to modify which endpoint with which data will be used to acquire the jwt token.
- * @param opts.forceJwtEndpoint This will use the old jwt endpoint which will create the rtc backend identity based on string concatenation
- * instead of a hash.
- * This function by default uses whatever is possible with the current jwt service installed next to the SFU.
- * For remote connections this does not matter, since we will not publish there we can rely on the newest option.
- * For our own connection we can only use the hashed version if we also send the new matrix2.0 sticky events.
- * @param opts.delayEndpointBaseUrl The URL of the matrix homeserver.
- * @param opts.delayId The delay id used for the jwt service to manage.
- * @param logger optional logger.
+ * @param matrixRoomId The Matrix room ID for which to get the SFU config
  * @returns Object containing the token information
  * @throws FailToGetOpenIdToken
  */
 export async function getSFUConfigWithOpenID(
   client: OpenIDClientParts,
-  membership: CallMembershipIdentityParts,
   serviceUrl: string,
-  roomId: string,
-  opts?: {
-    forceJwtEndpoint?: JwtEndpointVersion;
-    delayEndpointBaseUrl?: string;
-    delayId?: string;
-  },
-  logger?: Logger,
+  matrixRoomId: string,
 ): Promise<SFUConfig> {
   let openIdToken: IOpenIDToken;
   try {
@@ -112,67 +84,16 @@ export async function getSFUConfigWithOpenID(
       error instanceof Error ? error : new Error("Unknown error"),
     );
   }
-  logger?.debug("Got openID token", openIdToken);
+  logger.debug("Got openID token", openIdToken);
 
-  logger?.info(`Trying to get JWT for focus ${serviceUrl}...`);
-
-  let sfuConfig: { url: string; jwt: string } | undefined;
-
-  const tryBothJwtEndpoints = opts?.forceJwtEndpoint === undefined; // This is for SFUs where we do not publish.
-
-  const forceMatrix2Jwt =
-    opts?.forceJwtEndpoint === JwtEndpointVersion.Matrix_2_0;
-
-  // We want to start using the new endpoint (with optional delay delegation)
-  // if we can use both or if we are forced to use the new one.
-  if (tryBothJwtEndpoints || forceMatrix2Jwt) {
-    try {
-      sfuConfig = await getLiveKitJWTWithDelayDelegation(
-        membership,
-        serviceUrl,
-        roomId,
-        openIdToken,
-        opts?.delayEndpointBaseUrl,
-        opts?.delayId,
-      );
-      logger?.info(`Got JWT from call's active focus URL.`);
-    } catch (e) {
-      if (e instanceof NotSupportedError) {
-        logger?.warn(
-          `Failed fetching jwt with matrix 2.0 endpoint (retry with legacy) Not supported`,
-          e,
-        );
-        sfuConfig = undefined;
-      } else {
-        logger?.warn(
-          `Failed fetching jwt with matrix 2.0 endpoint other issues ->`,
-          `(not going to try with legacy endpoint: forceOldJwtEndpoint is set to false, we did not get a not supported error from the sfu)`,
-          e,
-        );
-        // Make this throw a hard error in case we force the matrix2.0 endpoint.
-        if (forceMatrix2Jwt)
-          throw new NoMatrix2AuthorizationService(e as Error);
-        // NEVER get bejond this point if we forceMatrix2 and it failed!
-      }
-    }
-  }
-
-  // DEPRECATED
-  // here we either have a sfuConfig or we alredy exited because of `if (forceMatrix2) throw ...`
-  // The only case we can get into this condition is, if `forceMatrix2` is `false`
-  if (sfuConfig === undefined) {
-    sfuConfig = await getLiveKitJWT(
-      membership.deviceId,
-      serviceUrl,
-      roomId,
-      openIdToken,
-    );
-    logger?.info(`Got JWT from call's active focus URL.`);
-  }
-
-  if (!sfuConfig) {
-    throw new Error("No `sfuConfig` after trying with old and new endpoints");
-  }
+  logger.info(`Trying to get JWT for focus ${serviceUrl}...`);
+  const sfuConfig = await getLiveKitJWT(
+    client,
+    serviceUrl,
+    matrixRoomId,
+    openIdToken,
+  );
+  logger.info(`Got JWT from call's active focus URL.`);
 
   // Pull the details from the JWT
   const [, payloadStr] = sfuConfig.jwt.split(".");
@@ -183,108 +104,33 @@ export async function getSFUConfigWithOpenID(
     url: sfuConfig.url,
     livekitAlias: payload.video.room,
     // NOTE: Currently unused.
-    // Probably also not helpful since we now compute the backendIdentity on joining the call so we can use it for the encryption manager.
-    // The only reason for us to know it locally is to connect the right users with the lk world. (and to set our own keys)
     livekitIdentity: payload.sub,
   };
 }
-const RETRIES = 4;
+
 async function getLiveKitJWT(
-  deviceId: string,
+  client: OpenIDClientParts,
   livekitServiceURL: string,
-  matrixRoomId: string,
+  roomName: string,
   openIDToken: IOpenIDToken,
 ): Promise<{ url: string; jwt: string }> {
-  let res: Response | undefined;
-  await retryNetworkOperation(RETRIES, async () => {
-    res = await fetch(livekitServiceURL + "/sfu/get", {
+  try {
+    const res = await fetch(livekitServiceURL + "/sfu/get", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
-        // This is the actual livekit room alias. For the legacy jwt endpoint simply the room id was used.
-        room: matrixRoomId,
+        room: roomName,
         openid_token: openIDToken,
-        device_id: deviceId,
+        device_id: client.getDeviceId(),
       }),
     });
-  });
-  if (!res) {
-    throw new Error(
-      `Network error while connecting to jwt service after ${RETRIES} retries`,
-    );
-  }
-  if (!res.ok) {
-    throw new Error("SFU Config fetch failed with status code " + res.status);
-  }
-  return await res.json();
-}
-
-class NotSupportedError extends Error {
-  public constructor(message: string) {
-    super(message);
-    this.name = "NotSupported";
-  }
-}
-
-export async function getLiveKitJWTWithDelayDelegation(
-  membership: CallMembershipIdentityParts,
-  livekitServiceURL: string,
-  matrixRoomId: string,
-  openIDToken: IOpenIDToken,
-  delayEndpointBaseUrl?: string,
-  delayId?: string,
-): Promise<{ url: string; jwt: string }> {
-  const { userId, deviceId, memberId } = membership;
-
-  const body = {
-    room_id: matrixRoomId,
-    slot_id: "m.call#ROOM",
-    openid_token: openIDToken,
-    member: {
-      id: memberId,
-      claimed_user_id: userId,
-      claimed_device_id: deviceId,
-    },
-  };
-
-  let bodyDalayParts = {};
-  // Also check for empty string
-  if (delayId && delayEndpointBaseUrl) {
-    const delayTimeoutMs =
-      Config.get().matrix_rtc_session?.delayed_leave_event_delay_ms ?? 1000;
-    bodyDalayParts = {
-      delay_id: delayId,
-      delay_timeout: delayTimeoutMs,
-      delay_cs_api_url: delayEndpointBaseUrl,
-    };
-  }
-
-  let res: Response | undefined;
-
-  await retryNetworkOperation(RETRIES, async () => {
-    res = await fetch(livekitServiceURL + "/get_token", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({ ...body, ...bodyDalayParts }),
-    });
-  });
-
-  if (!res) {
-    throw new Error(
-      `Network error while connecting to jwt service after ${RETRIES} retries`,
-    );
-  }
-  if (!res.ok) {
-    const msg = "SFU Config fetch failed with status code " + res.status;
-    if (res.status === 404) {
-      throw new NotSupportedError(msg);
-    } else {
-      throw new Error(msg);
+    if (!res.ok) {
+      throw new Error("SFU Config fetch failed with status code " + res.status);
     }
+    return await res.json();
+  } catch (e) {
+    throw new Error("SFU Config fetch failed with exception", { cause: e });
   }
-  return await res.json();
 }

src/room/CallEventAudioRenderer.test.tsx

@@ -39,8 +39,7 @@ import {
   localRtcMember,
 } from "../utils/test-fixtures";
 import { MAX_PARTICIPANT_COUNT_FOR_SOUND } from "../state/CallViewModel/CallViewModel";
-import { initializeWidget } from "../widget";
-initializeWidget();
+
 vitest.mock("livekit-client/e2ee-worker?worker");
 vitest.mock("../useAudioContext");
 vitest.mock("../soundUtils");

src/room/InCallView.module.css

@@ -65,7 +65,6 @@ Please see LICENSE in the repository root for full details.
 .footer.overlay.hidden {
   display: grid;
   opacity: 0;
-  pointer-events: none;
 }
 
 .footer.overlay:has(:focus-visible) {
@@ -108,9 +107,22 @@ Please see LICENSE in the repository root for full details.
   }
 }
 
-@media (max-height: 800px) {
-  .footer {
-    padding-block: var(--cpd-space-8x);
+@media (max-width: 370px) {
+  .shareScreen {
+    display: none;
+  }
+
+  @media (max-height: 400px) {
+    .footer {
+      display: none;
+    }
+  }
+}
+
+@media (max-width: 320px) {
+  .invite,
+  .raiseHand {
+    display: none;
   }
 }
 
@@ -120,27 +132,9 @@ Please see LICENSE in the repository root for full details.
   }
 }
 
-@media (max-width: 370px) {
-  .shareScreen {
-    display: none;
-  }
-
-  /* PIP custom css */
-  @media (max-height: 400px) {
-    .shareScreen {
-      display: flex;
-    }
-    .footer {
-      padding-block-start: var(--cpd-space-3x);
-      padding-block-end: var(--cpd-space-2x);
-    }
-  }
-}
-
-@media (max-width: 320px) {
-  .invite,
-  .raiseHand {
-    display: none;
+@media (max-height: 800px) {
+  .footer {
+    padding-block: var(--cpd-space-8x);
   }
 }
 

src/room/InCallView.test.tsx

@@ -1,6 +1,5 @@
 /*
 Copyright 2025 New Vector Ltd.
-Copyright 2026 Element Creations Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
@@ -43,8 +42,7 @@ import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
 import { LivekitRoomAudioRenderer } from "../livekit/MatrixAudioRenderer";
 import { MediaDevicesContext } from "../MediaDevicesContext";
 import { HeaderStyle } from "../UrlParams";
-import { initializeWidget } from "../widget";
-initializeWidget();
+
 vi.hoisted(
   () =>
     (global.ImageData = class MockImageData {

src/room/InCallView.tsx

@@ -9,8 +9,8 @@ import { IconButton, Text, Tooltip } from "@vector-im/compound-web";
 import { type MatrixClient, type Room as MatrixRoom } from "matrix-js-sdk";
 import {
   type FC,
-  type MouseEvent as ReactMouseEvent,
-  type PointerEvent as ReactPointerEvent,
+  type PointerEvent,
+  type TouchEvent,
   useCallback,
   useEffect,
   useMemo,
@@ -33,6 +33,7 @@ import { useTranslation } from "react-i18next";
 
 import LogoMark from "../icons/LogoMark.svg?react";
 import LogoType from "../icons/LogoType.svg?react";
+import type { IWidgetApiRequest } from "matrix-widget-api";
 import {
   EndCallButton,
   MicButton,
@@ -44,7 +45,7 @@ import {
 import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
 import { type HeaderStyle, useUrlParams } from "../UrlParams";
 import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts";
-import { widget } from "../widget";
+import { ElementWidgetActions, widget } from "../widget";
 import styles from "./InCallView.module.css";
 import { GridTile } from "../tile/GridTile";
 import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal";
@@ -110,6 +111,8 @@ import { ObservableScope } from "../state/ObservableScope.ts";
 
 const logger = rootLogger.getChild("[InCallView]");
 
+const maxTapDurationMs = 400;
+
 export interface ActiveCallProps extends Omit<
   InCallViewProps,
   "vm" | "livekitRoom" | "connState"
@@ -332,20 +335,40 @@ export const InCallView: FC<InCallViewProps> = ({
     ) : null;
   }, [ringOverlay]);
 
-  const onViewClick = useCallback(
-    (e: ReactMouseEvent) => {
-      if (
-        (e.nativeEvent as PointerEvent).pointerType === "touch" &&
-        // If an interactive element was tapped, don't count this as a tap on the screen
-        (e.target as Element).closest?.("button, input") === null
-      )
-        vm.tapScreen();
+  // 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), []);
+
+  // We also need to tell the footer controls to prevent touch events from
+  // bubbling up, or else the footer will be dismissed before a click/change
+  // event can be registered on the control
+  const onControlsTouchEnd = useCallback(
+    (e: TouchEvent) => {
+      // Somehow applying pointer-events: none to the controls when the footer
+      // is hidden is not enough to stop clicks from happening as the footer
+      // becomes visible, so we check manually whether the footer is shown
+      if (showFooter) {
+        e.stopPropagation();
+        vm.tapControls();
+      } else {
+        e.preventDefault();
+      }
     },
-    [vm],
+    [vm, showFooter],
   );
 
   const onPointerMove = useCallback(
-    (e: ReactPointerEvent) => {
+    (e: PointerEvent) => {
       if (e.pointerType === "mouse") vm.hoverScreen();
     },
     [vm],
@@ -412,6 +435,46 @@ export const InCallView: FC<InCallViewProps> = ({
     [vm],
   );
 
+  useEffect(() => {
+    widget?.api.transport
+      .send(
+        gridMode === "grid"
+          ? ElementWidgetActions.TileLayout
+          : ElementWidgetActions.SpotlightLayout,
+        {},
+      )
+      .catch((e) => {
+        logger.error("Failed to send layout change to widget API", e);
+      });
+  }, [gridMode]);
+
+  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, {});
+      };
+
+      widget.lazyActions.on(ElementWidgetActions.TileLayout, onTileLayout);
+      widget.lazyActions.on(
+        ElementWidgetActions.SpotlightLayout,
+        onSpotlightLayout,
+      );
+
+      return (): void => {
+        widget!.lazyActions.off(ElementWidgetActions.TileLayout, onTileLayout);
+        widget!.lazyActions.off(
+          ElementWidgetActions.SpotlightLayout,
+          onSpotlightLayout,
+        );
+      };
+    }
+  }, [setGridMode]);
+
   useAppBarSecondaryButton(
     useMemo(() => {
       if (audioOutputSwitcher === null) return null;
@@ -584,8 +647,8 @@ export const InCallView: FC<InCallViewProps> = ({
           vm={layout.spotlight}
           expanded
           onToggleExpanded={null}
-          targetWidth={gridBounds.width}
-          targetHeight={gridBounds.height}
+          targetWidth={gridBounds.height}
+          targetHeight={gridBounds.width}
           showIndicators={false}
           focusable={!contentObscured}
           aria-hidden={contentObscured}
@@ -640,21 +703,20 @@ export const InCallView: FC<InCallViewProps> = ({
 
   const buttons: JSX.Element[] = [];
 
-  const buttonSize = layout.type === "pip" ? "sm" : "lg";
   buttons.push(
     <MicButton
-      size={buttonSize}
       key="audio"
-      enabled={audioEnabled}
+      muted={!audioEnabled}
       onClick={toggleAudio ?? undefined}
+      onTouchEnd={onControlsTouchEnd}
       disabled={toggleAudio === null}
       data-testid="incall_mute"
     />,
     <VideoButton
-      size={buttonSize}
       key="video"
-      enabled={videoEnabled}
+      muted={!videoEnabled}
       onClick={toggleVideo ?? undefined}
+      onTouchEnd={onControlsTouchEnd}
       disabled={toggleVideo === null}
       data-testid="incall_videomute"
     />,
@@ -662,11 +724,11 @@ export const InCallView: FC<InCallViewProps> = ({
   if (vm.toggleScreenSharing !== null) {
     buttons.push(
       <ShareScreenButton
-        size={buttonSize}
         key="share_screen"
         className={styles.shareScreen}
         enabled={sharingScreen}
         onClick={vm.toggleScreenSharing}
+        onTouchEnd={onControlsTouchEnd}
         data-testid="incall_screenshare"
       />,
     );
@@ -674,30 +736,30 @@ export const InCallView: FC<InCallViewProps> = ({
   if (supportsReactions) {
     buttons.push(
       <ReactionToggleButton
-        size={buttonSize}
         vm={vm}
         key="raise_hand"
         className={styles.raiseHand}
         identifier={`${client.getUserId()}:${client.getDeviceId()}`}
+        onTouchEnd={onControlsTouchEnd}
       />,
     );
   }
   if (layout.type !== "pip")
     buttons.push(
       <SettingsButton
-        size={buttonSize}
         key="settings"
         onClick={openSettings}
+        onTouchEnd={onControlsTouchEnd}
       />,
     );
 
   buttons.push(
     <EndCallButton
-      size={buttonSize}
       key="end_call"
       onClick={function (): void {
         vm.hangup();
       }}
+      onTouchEnd={onControlsTouchEnd}
       data-testid="incall_leave"
     />,
   );
@@ -730,21 +792,19 @@ export const InCallView: FC<InCallViewProps> = ({
           className={styles.layout}
           layout={gridMode}
           setLayout={setGridMode}
+          onTouchEnd={onControlsTouchEnd}
         />
       )}
     </div>
   );
 
-  const allConnections = useBehavior(vm.allConnections$);
-
   return (
-    // The onClick handler here exists to control the visibility of the footer,
-    // and the footer is also viewable by moving focus into it, so this is fine.
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
     <div
       className={styles.inRoom}
       ref={containerRef}
-      onClick={onViewClick}
+      onTouchStart={onTouchStart}
+      onTouchEnd={onTouchEnd}
+      onTouchCancel={onTouchCancel}
       onPointerMove={onPointerMove}
       onPointerOut={onPointerOut}
     >
@@ -776,15 +836,8 @@ export const InCallView: FC<InCallViewProps> = ({
             onDismiss={closeSettings}
             tab={settingsTab}
             onTabChange={setSettingsTab}
-            livekitRooms={allConnections
-              .getConnections()
-              .map((connectionItem) => ({
-                room: connectionItem.livekitRoom,
-                livekitAlias: connectionItem.livekitAlias,
-                // TODO compute is local or tag it in the livekit room items already
-                isLocal: undefined,
-                url: connectionItem.transport.livekit_service_url,
-              }))}
+            // TODO expose correct data to setttings modal
+            livekitRooms={[]}
           />
         </>
       )}

src/room/LayoutToggle.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type ChangeEvent, type FC, useCallback } from "react";
+import { type ChangeEvent, type FC, type TouchEvent, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { Tooltip } from "@vector-im/compound-web";
 import {
@@ -22,9 +22,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(
@@ -41,6 +47,7 @@ export const LayoutToggle: FC<Props> = ({ layout, setLayout, className }) => {
           value="spotlight"
           checked={layout === "spotlight"}
           onChange={onChange}
+          onTouchEnd={onTouchEnd}
         />
       </Tooltip>
       <SpotlightIcon aria-hidden width={24} height={24} />
@@ -51,6 +58,7 @@ export const LayoutToggle: FC<Props> = ({ layout, setLayout, className }) => {
           value="grid"
           checked={layout === "grid"}
           onChange={onChange}
+          onTouchEnd={onTouchEnd}
         />
       </Tooltip>
       <GridIcon aria-hidden width={24} height={24} />

src/room/LobbyView.tsx

@@ -230,12 +230,12 @@ export const LobbyView: FC<Props> = ({
           {recentsButtonInFooter && recentsButton}
           <div className={inCallStyles.buttons}>
             <MicButton
-              enabled={audioEnabled}
+              muted={!audioEnabled}
               onClick={toggleAudio ?? undefined}
               disabled={toggleAudio === null}
             />
             <VideoButton
-              enabled={videoEnabled}
+              muted={!videoEnabled}
               onClick={toggleVideo ?? undefined}
               disabled={toggleVideo === null}
             />

src/room/ReactionAudioRenderer.test.tsx

@@ -37,8 +37,6 @@ import {
   local,
   localRtcMember,
 } from "../utils/test-fixtures";
-import { initializeWidget } from "../widget";
-initializeWidget();
 
 function TestComponent({ vm }: { vm: CallViewModel }): ReactNode {
   return (

src/room/ReactionsOverlay.test.tsx

@@ -19,8 +19,6 @@ import {
   bobRtcMember,
 } from "../utils/test-fixtures";
 import { getBasicCallViewModelEnvironment } from "../utils/test-viewmodel";
-import { initializeWidget } from "../widget";
-initializeWidget();
 
 vi.mock("livekit-client/e2ee-worker?worker");
 

src/room/RoomPage.tsx

@@ -1,6 +1,5 @@
 /*
 Copyright 2021-2024 New Vector Ltd.
-Copyright 2026 Element Creations Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
@@ -21,6 +20,8 @@ import {
   CheckIcon,
   UnknownSolidIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { useObservable } from "observable-hooks";
+import { map } from "rxjs";
 
 import { useClientLegacy } from "../ClientContext";
 import { ErrorPage, FullScreenView, LoadingPage } from "../FullScreenView";
@@ -43,12 +44,10 @@ import { ErrorView } from "../ErrorView";
 import { useMediaDevices } from "../MediaDevicesContext";
 import { MuteStates } from "../state/MuteStates";
 import { ObservableScope } from "../state/ObservableScope";
-import { calculateInitialMuteState } from "../state/initialMuteState.ts";
 
 export const RoomPage: FC = () => {
-  const urlParams = useUrlParams();
   const { confineToRoom, appPrompt, preload, header, displayName, skipLobby } =
-    urlParams;
+    useUrlParams();
   const { t } = useTranslation();
   const { roomAlias, roomId, viaServers } = useRoomIdentifier();
 
@@ -69,22 +68,15 @@ export const RoomPage: FC = () => {
 
   const devices = useMediaDevices();
   const [muteStates, setMuteStates] = useState<MuteStates | null>(null);
-
+  const joined$ = useObservable(
+    (inputs$) => inputs$.pipe(map(([joined]) => joined)),
+    [joined],
+  );
   useEffect(() => {
     const scope = new ObservableScope();
-    setMuteStates(
-      new MuteStates(
-        scope,
-        devices,
-        calculateInitialMuteState(
-          urlParams.skipLobby,
-          urlParams.callIntent,
-          widget !== null,
-        ),
-      ),
-    );
+    setMuteStates(new MuteStates(scope, devices, joined$));
     return (): void => scope.end();
-  }, [devices, urlParams]);
+  }, [devices, joined$]);
 
   useEffect(() => {
     // If we've finished loading, are not already authed and we've been given a display name as

src/room/__snapshots__/GroupCallErrorBoundary.test.tsx.snap

@@ -108,7 +108,7 @@ exports[`ConnectionLostError: Action handling should reset error state 1`] = `
           class="error"
         >
           <div
-            class="_content_1r8kr_8 icon"
+            class="_content_o77nw_8 icon"
             data-size="large"
           >
             <svg
@@ -133,7 +133,7 @@ exports[`ConnectionLostError: Action handling should reset error state 1`] = `
             You were disconnected from the call.
           </p>
           <button
-            class="_button_13vu4_8"
+            class="_button_vczzf_8"
             data-kind="secondary"
             data-size="lg"
             role="button"
@@ -142,7 +142,7 @@ exports[`ConnectionLostError: Action handling should reset error state 1`] = `
             Reconnect
           </button>
           <button
-            class="_button_13vu4_8 homeLink"
+            class="_button_vczzf_8 homeLink"
             data-kind="tertiary"
             data-size="lg"
             role="button"
@@ -265,7 +265,7 @@ exports[`should have a close button in widget mode 1`] = `
           class="error"
         >
           <div
-            class="_content_1r8kr_8 icon"
+            class="_content_o77nw_8 icon"
             data-size="large"
           >
             <svg
@@ -295,7 +295,7 @@ exports[`should have a close button in widget mode 1`] = `
             The server is not configured to work with Element Call. Please contact your server admin (Domain: example.com, Error Code: MISSING_MATRIX_RTC_TRANSPORT).
           </p>
           <button
-            class="_button_13vu4_8"
+            class="_button_vczzf_8"
             data-kind="primary"
             data-size="lg"
             role="button"
@@ -418,7 +418,7 @@ exports[`should render the error page with link back to home 1`] = `
           class="error"
         >
           <div
-            class="_content_1r8kr_8 icon"
+            class="_content_o77nw_8 icon"
             data-size="large"
           >
             <svg
@@ -448,7 +448,7 @@ exports[`should render the error page with link back to home 1`] = `
             The server is not configured to work with Element Call. Please contact your server admin (Domain: example.com, Error Code: MISSING_MATRIX_RTC_TRANSPORT).
           </p>
           <button
-            class="_button_13vu4_8 homeLink"
+            class="_button_vczzf_8 homeLink"
             data-kind="tertiary"
             data-size="lg"
             role="button"
@@ -571,7 +571,7 @@ exports[`should report correct error for 'Call is not supported' 1`] = `
           class="error"
         >
           <div
-            class="_content_1r8kr_8 icon"
+            class="_content_o77nw_8 icon"
             data-size="large"
           >
             <svg
@@ -601,7 +601,7 @@ exports[`should report correct error for 'Call is not supported' 1`] = `
             The server is not configured to work with Element Call. Please contact your server admin (Domain: example.com, Error Code: MISSING_MATRIX_RTC_TRANSPORT).
           </p>
           <button
-            class="_button_13vu4_8 homeLink"
+            class="_button_vczzf_8 homeLink"
             data-kind="tertiary"
             data-size="lg"
             role="button"
@@ -724,7 +724,7 @@ exports[`should report correct error for 'Connection lost' 1`] = `
           class="error"
         >
           <div
-            class="_content_1r8kr_8 icon"
+            class="_content_o77nw_8 icon"
             data-size="large"
           >
             <svg
@@ -749,7 +749,7 @@ exports[`should report correct error for 'Connection lost' 1`] = `
             You were disconnected from the call.
           </p>
           <button
-            class="_button_13vu4_8"
+            class="_button_vczzf_8"
             data-kind="secondary"
             data-size="lg"
             role="button"
@@ -758,7 +758,7 @@ exports[`should report correct error for 'Connection lost' 1`] = `
             Reconnect
           </button>
           <button
-            class="_button_13vu4_8 homeLink"
+            class="_button_vczzf_8 homeLink"
             data-kind="tertiary"
             data-size="lg"
             role="button"
@@ -881,7 +881,7 @@ exports[`should report correct error for 'Incompatible browser' 1`] = `
           class="error"
         >
           <div
-            class="_content_1r8kr_8 icon"
+            class="_content_o77nw_8 icon"
             data-size="large"
           >
             <svg
@@ -906,7 +906,7 @@ exports[`should report correct error for 'Incompatible browser' 1`] = `
             Your web browser does not support encrypted calls. Supported browsers include Chrome, Safari, and Firefox 117+.
           </p>
           <button
-            class="_button_13vu4_8 homeLink"
+            class="_button_vczzf_8 homeLink"
             data-kind="tertiary"
             data-size="lg"
             role="button"
@@ -1029,7 +1029,7 @@ exports[`should report correct error for 'Insufficient capacity' 1`] = `
           class="error"
         >
           <div
-            class="_content_1r8kr_8 icon"
+            class="_content_o77nw_8 icon"
             data-size="large"
           >
             <svg
@@ -1054,7 +1054,7 @@ exports[`should report correct error for 'Insufficient capacity' 1`] = `
             The server has reached its maximum capacity and you cannot join the call at this time. Try again later, or contact your server admin if the problem persists.
           </p>
           <button
-            class="_button_13vu4_8 homeLink"
+            class="_button_vczzf_8 homeLink"
             data-kind="tertiary"
             data-size="lg"
             role="button"

src/room/__snapshots__/InCallView.test.tsx.snap

@@ -17,7 +17,7 @@ exports[`InCallView > rendering > renders 1`] = `
         >
           <span
             aria-label=""
-            class="_avatar_zysgz_8 roomAvatar _avatar-imageless_zysgz_55"
+            class="_avatar_1qbcf_8 roomAvatar _avatar-imageless_1qbcf_52"
             data-color="1"
             data-type="round"
             role="img"
@@ -117,7 +117,7 @@ exports[`InCallView > rendering > renders 1`] = `
       data-show="false"
     >
       <div
-        class="_content_1r8kr_8 icon"
+        class="_content_o77nw_8 icon"
         data-size="large"
       >
         <svg
@@ -159,7 +159,7 @@ exports[`InCallView > rendering > renders 1`] = `
         Only works while using app
       </p>
       <button
-        class="_button_13vu4_8"
+        class="_button_vczzf_8"
         data-kind="primary"
         data-size="sm"
         role="button"
@@ -285,14 +285,13 @@ exports[`InCallView > rendering > renders 1`] = `
         class="buttons"
       >
         <button
-          aria-checked="false"
           aria-disabled="true"
           aria-labelledby="_r_8_"
-          class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
-          data-kind="secondary"
+          class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
+          data-kind="primary"
           data-size="lg"
           data-testid="incall_mute"
-          role="switch"
+          role="button"
           tabindex="0"
         >
           <svg
@@ -309,14 +308,13 @@ exports[`InCallView > rendering > renders 1`] = `
           </svg>
         </button>
         <button
-          aria-checked="false"
           aria-disabled="true"
           aria-labelledby="_r_d_"
-          class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
-          data-kind="secondary"
+          class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
+          data-kind="primary"
           data-size="lg"
           data-testid="incall_videomute"
-          role="switch"
+          role="button"
           tabindex="0"
         >
           <svg
@@ -334,7 +332,7 @@ exports[`InCallView > rendering > renders 1`] = `
         </button>
         <button
           aria-labelledby="_r_i_"
-          class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
+          class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
           data-kind="secondary"
           data-size="lg"
           role="button"
@@ -355,7 +353,7 @@ exports[`InCallView > rendering > renders 1`] = `
         </button>
         <button
           aria-labelledby="_r_n_"
-          class="_button_13vu4_8 endCall _has-icon_13vu4_60 _icon-only_13vu4_53 _destructive_13vu4_110"
+          class="_button_vczzf_8 endCall _has-icon_vczzf_57 _icon-only_vczzf_50 _destructive_vczzf_107"
           data-kind="primary"
           data-size="lg"
           data-testid="incall_leave"

src/settings/DeveloperSettingsTab.module.css

@@ -8,14 +8,3 @@ Please see LICENSE in the repository root for full details.
 pre {
   font-size: var(--font-size-micro);
 }
-
-.livekit_room_box {
-  border: 3px solid var(--cpd-color-bg-subtle-secondary);
-  border-radius: var(--cpd-space-8x);
-  padding: var(--cpd-space-4x);
-  margin-bottom: var(--cpd-space-4x);
-  margin-top: var(--cpd-space-4x);
-  li {
-    font-size: var(--font-size-micro);
-  }
-}

src/settings/DeveloperSettingsTab.test.tsx

@@ -5,16 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { afterEach, describe, expect, it, type Mock, vi } from "vitest";
-import { render, waitFor, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { TooltipProvider } from "@vector-im/compound-web";
+import { describe, expect, it, vi } from "vitest";
+import { render, waitFor } from "@testing-library/react";
 
 import type { MatrixClient } from "matrix-js-sdk";
 import type { Room as LivekitRoom } from "livekit-client";
 import { DeveloperSettingsTab } from "./DeveloperSettingsTab";
-import { getSFUConfigWithOpenID } from "../livekit/openIDSFU";
-import { customLivekitUrl as customLivekitUrlSetting } from "./settings";
+
 // Mock url params hook to avoid environment-dependent snapshot churn.
 vi.mock("../UrlParams", () => ({
   useUrlParams: (): { mocked: boolean; answer: number } => ({
@@ -23,33 +20,22 @@ vi.mock("../UrlParams", () => ({
   }),
 }));
 
-// IMPORTANT: mock the same specifier used by DeveloperSettingsTab
-vi.mock("../livekit/openIDSFU", () => ({
-  getSFUConfigWithOpenID: vi.fn().mockResolvedValue({
-    url: "mock-url",
-    jwt: "mock-jwt",
-  }),
-}));
-
 // Provide a minimal mock of a Livekit Room structure used by the component.
 function createMockLivekitRoom(
   wsUrl: string,
   serverInfo: object,
   metadata: string,
-): { isLocal: boolean; url: string; room: LivekitRoom; livekitAlias: string } {
+): { isLocal: boolean; url: string; room: LivekitRoom } {
   const mockRoom = {
     serverInfo,
     metadata,
     engine: { client: { ws: { url: wsUrl } } },
-    localParticipant: { identity: "localParticipantIdentity" },
-    remoteParticipants: new Map(),
   } as unknown as LivekitRoom;
 
   return {
     isLocal: true,
     url: wsUrl,
     room: mockRoom,
-    livekitAlias: "TestAlias",
   };
 }
 
@@ -73,7 +59,6 @@ describe("DeveloperSettingsTab", () => {
       room: LivekitRoom;
       url: string;
       isLocal?: boolean;
-      livekitAlias: string;
     }[] = [
       createMockLivekitRoom(
         "wss://local-sfu.example.org",
@@ -82,11 +67,8 @@ describe("DeveloperSettingsTab", () => {
       ),
       {
         isLocal: false,
-        livekitAlias: "TestAlias2",
         url: "wss://remote-sfu.example.org",
         room: {
-          localParticipant: { identity: "localParticipantIdentity" },
-          remoteParticipants: new Map(),
           serverInfo: { region: "remote", version: "4.5.6" },
           metadata: "remote-metadata",
           engine: { client: { ws: { url: "wss://remote-sfu.example.org" } } },
@@ -97,7 +79,6 @@ describe("DeveloperSettingsTab", () => {
     const { container } = render(
       <DeveloperSettingsTab
         client={client}
-        roomId={"#room:example.org"}
         livekitRooms={livekitRooms}
         env={{ MY_MOCK_ENV: 10, ENV: "test" } as unknown as ImportMetaEnv}
       />,
@@ -111,141 +92,4 @@ describe("DeveloperSettingsTab", () => {
 
     expect(container).toMatchSnapshot();
   });
-  describe("custom livekit url", () => {
-    afterEach(() => {
-      customLivekitUrlSetting.setValue(null);
-    });
-    const client = {
-      doesServerSupportUnstableFeature: vi.fn().mockResolvedValue(true),
-      getCrypto: () => ({ getVersion: (): string => "x" }),
-      getUserId: () => "@u:hs",
-      getDeviceId: () => "DEVICE",
-    } as unknown as MatrixClient;
-    it("will not update custom livekit url without roomId", async () => {
-      const user = userEvent.setup();
-
-      render(
-        <TooltipProvider>
-          <DeveloperSettingsTab
-            client={client}
-            env={{} as unknown as ImportMetaEnv}
-          />
-        </TooltipProvider>,
-      );
-
-      const input = screen.getByLabelText("Custom Livekit-url");
-      await user.clear(input);
-      await user.type(input, "wss://example.livekit.invalid");
-
-      const saveButton = screen.getByRole("button", { name: "Save" });
-      await user.click(saveButton);
-      expect(getSFUConfigWithOpenID).not.toHaveBeenCalled();
-
-      expect(customLivekitUrlSetting.getValue()).toBe(null);
-    });
-    it("will not update custom livekit url without text in input", async () => {
-      const user = userEvent.setup();
-
-      render(
-        <TooltipProvider>
-          <DeveloperSettingsTab
-            client={client}
-            roomId="#testRoom"
-            env={{} as unknown as ImportMetaEnv}
-          />
-        </TooltipProvider>,
-      );
-
-      const input = screen.getByLabelText("Custom Livekit-url");
-      await user.clear(input);
-
-      const saveButton = screen.getByRole("button", { name: "Save" });
-      await user.click(saveButton);
-      expect(getSFUConfigWithOpenID).not.toHaveBeenCalled();
-
-      expect(customLivekitUrlSetting.getValue()).toBe(null);
-    });
-    it("will not update custom livekit url when pressing cancel", async () => {
-      const user = userEvent.setup();
-
-      render(
-        <TooltipProvider>
-          <DeveloperSettingsTab
-            client={client}
-            roomId="#testRoom"
-            env={{} as unknown as ImportMetaEnv}
-          />
-        </TooltipProvider>,
-      );
-
-      const input = screen.getByLabelText("Custom Livekit-url");
-      await user.clear(input);
-      await user.type(input, "wss://example.livekit.invalid");
-
-      const cancelButton = screen.getByRole("button", {
-        name: "Reset overwrite",
-      });
-      await user.click(cancelButton);
-      expect(getSFUConfigWithOpenID).not.toHaveBeenCalled();
-
-      expect(customLivekitUrlSetting.getValue()).toBe(null);
-    });
-    it("will update custom livekit url", async () => {
-      const user = userEvent.setup();
-
-      render(
-        <TooltipProvider>
-          <DeveloperSettingsTab
-            client={client}
-            roomId="#testRoom"
-            env={{} as unknown as ImportMetaEnv}
-          />
-        </TooltipProvider>,
-      );
-
-      const input = screen.getByLabelText("Custom Livekit-url");
-      await user.clear(input);
-      await user.type(input, "wss://example.livekit.valid");
-
-      const saveButton = screen.getByRole("button", { name: "Save" });
-      await user.click(saveButton);
-      expect(getSFUConfigWithOpenID).toHaveBeenCalledWith(
-        expect.anything(),
-        expect.anything(),
-        "wss://example.livekit.valid",
-        "#testRoom",
-      );
-
-      expect(customLivekitUrlSetting.getValue()).toBe(
-        "wss://example.livekit.valid",
-      );
-    });
-    it("will show error on invalid url", async () => {
-      const user = userEvent.setup();
-
-      render(
-        <TooltipProvider>
-          <DeveloperSettingsTab
-            client={client}
-            roomId="#testRoom"
-            env={{} as unknown as ImportMetaEnv}
-          />
-        </TooltipProvider>,
-      );
-
-      const input = screen.getByLabelText("Custom Livekit-url");
-      await user.clear(input);
-      await user.type(input, "wss://example.livekit.valid");
-
-      const saveButton = screen.getByRole("button", { name: "Save" });
-      (getSFUConfigWithOpenID as Mock).mockImplementation(() => {
-        throw new Error("Invalid URL");
-      });
-      await user.click(saveButton);
-      expect(
-        screen.getByText("invalid URL (did not update)"),
-      ).toBeInTheDocument();
-      expect(customLivekitUrlSetting.getValue()).toBe(null);
-    });
-  });
 });

src/settings/DeveloperSettingsTab.tsx

@@ -22,7 +22,6 @@ import {
 import { logger } from "matrix-js-sdk/lib/logger";
 import {
   EditInPlace,
-  ErrorMessage,
   Root as Form,
   Heading,
   HelpMessage,
@@ -30,7 +29,6 @@ import {
   Label,
   RadioControl,
 } from "@vector-im/compound-web";
-import { type Room as LivekitRoom } from "livekit-client";
 
 import { FieldRow, InputField } from "../input/Input";
 import {
@@ -44,26 +42,19 @@ import {
   customLivekitUrl as customLivekitUrlSetting,
   MatrixRTCMode,
 } from "./settings";
+import type { Room as LivekitRoom } from "livekit-client";
 import styles from "./DeveloperSettingsTab.module.css";
 import { useUrlParams } from "../UrlParams";
-import { getSFUConfigWithOpenID } from "../livekit/openIDSFU";
 
 interface Props {
   client: MatrixClient;
-  roomId?: string;
-  livekitRooms?: {
-    room: LivekitRoom;
-    url: string;
-    isLocal?: boolean;
-    livekitAlias?: string;
-  }[];
+  livekitRooms?: { room: LivekitRoom; url: string; isLocal?: boolean }[];
   env: ImportMetaEnv;
 }
 
 export const DeveloperSettingsTab: FC<Props> = ({
   client,
   livekitRooms,
-  roomId,
   env,
 }) => {
   const { t } = useTranslation();
@@ -101,8 +92,6 @@ export const DeveloperSettingsTab: FC<Props> = ({
     alwaysShowIphoneEarpieceSetting,
   );
 
-  const [customLivekitUrlUpdateError, setCustomLivekitUrlUpdateError] =
-    useState<string | null>(null);
   const [customLivekitUrl, setCustomLivekitUrl] = useSetting(
     customLivekitUrlSetting,
   );
@@ -240,36 +229,14 @@ export const DeveloperSettingsTab: FC<Props> = ({
         savingLabel={t("developer_mode.custom_livekit_url.saving")}
         cancelButtonLabel={t("developer_mode.custom_livekit_url.reset")}
         onSave={useCallback(
-          async (e: React.FormEvent<HTMLFormElement>): Promise<void> => {
-            if (
-              roomId === undefined ||
-              customLivekitUrlTextBuffer === "" ||
-              customLivekitUrlTextBuffer === null
-            ) {
-              setCustomLivekitUrl(null);
-              return;
-            }
-
-            try {
-              const userId = client.getUserId();
-              const deviceId = client.getDeviceId();
-
-              if (userId === null || deviceId === null) {
-                throw new Error("Invalid user or device ID");
-              }
-              await getSFUConfigWithOpenID(
-                client,
-                { userId, deviceId, memberId: "" },
-                customLivekitUrlTextBuffer,
-                roomId,
-              );
-              setCustomLivekitUrlUpdateError(null);
-              setCustomLivekitUrl(customLivekitUrlTextBuffer);
-            } catch {
-              setCustomLivekitUrlUpdateError("invalid URL (did not update)");
-            }
+          (e: React.FormEvent<HTMLFormElement>) => {
+            setCustomLivekitUrl(
+              customLivekitUrlTextBuffer === ""
+                ? null
+                : customLivekitUrlTextBuffer,
+            );
           },
-          [customLivekitUrlTextBuffer, setCustomLivekitUrl, client, roomId],
+          [setCustomLivekitUrl, customLivekitUrlTextBuffer],
         )}
         value={customLivekitUrlTextBuffer ?? ""}
         onChange={useCallback(
@@ -284,12 +251,7 @@ export const DeveloperSettingsTab: FC<Props> = ({
           },
           [setCustomLivekitUrl],
         )}
-        serverInvalid={customLivekitUrlUpdateError !== null}
-      >
-        {customLivekitUrlUpdateError !== null && (
-          <ErrorMessage>{customLivekitUrlUpdateError}</ErrorMessage>
-        )}
-      </EditInPlace>
+      />
       <Heading as="h3" type="body" weight="semibold" size="lg">
         {t("developer_mode.matrixRTCMode.title")}
       </Heading>
@@ -313,8 +275,8 @@ export const DeveloperSettingsTab: FC<Props> = ({
           name={matrixRTCModeRadioGroup}
           control={
             <RadioControl
-              checked={matrixRTCMode === MatrixRTCMode.Compatibility}
-              value={MatrixRTCMode.Compatibility}
+              checked={matrixRTCMode === MatrixRTCMode.Compatibil}
+              value={MatrixRTCMode.Compatibil}
               onChange={onMatrixRTCModeChange}
             />
           }
@@ -342,14 +304,12 @@ export const DeveloperSettingsTab: FC<Props> = ({
         </InlineField>
       </Form>
       {livekitRooms?.map((livekitRoom) => (
-        <div className={styles.livekit_room_box}>
-          <h4>
+        <>
+          <h3>
             {t("developer_mode.livekit_sfu", {
               url: livekitRoom.url || "unknown",
             })}
-          </h4>
-          <p>LivekitAlias: {livekitRoom.livekitAlias}</p>
-          <p>connectionState (wont hot reload): {livekitRoom.room.state}</p>
+          </h3>
           {livekitRoom.isLocal && <p>ws-url: {localSfuUrl?.href}</p>}
           <p>
             {t("developer_mode.livekit_server_info")}(
@@ -361,19 +321,7 @@ export const DeveloperSettingsTab: FC<Props> = ({
               : "undefined"}
             {livekitRoom.room.metadata}
           </pre>
-          <p>Local Participant</p>
-          <pre className={styles.pre}>
-            {livekitRoom.room.localParticipant.identity}
-          </pre>
-          <p>Remote Participants</p>
-          <ul>
-            {Array.from(livekitRoom.room.remoteParticipants.keys()).map(
-              (id) => (
-                <li key={id}>{id}</li>
-              ),
-            )}
-          </ul>
-        </div>
+        </>
       ))}
       <p>{t("developer_mode.environment_variables")}</p>
       <pre>{JSON.stringify(env, null, 2)}</pre>

src/settings/SettingsModal.tsx

@@ -213,7 +213,6 @@ export const SettingsModal: FC<Props> = ({
         env={import.meta.env}
         client={client}
         livekitRooms={livekitRooms}
-        roomId={roomId}
       />
     ),
   };

src/settings/__snapshots__/DeveloperSettingsTab.test.tsx.snap

@@ -234,12 +234,12 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
         class="_inline-field-control_19upo_44"
       >
         <div
-          class="_container_1qhtc_10"
+          class="_container_1e0uz_10"
         >
           <input
             aria-describedby="radix-_r_9_ radix-_r_b_ radix-_r_d_"
             checked=""
-            class="_input_1qhtc_18"
+            class="_input_1e0uz_18"
             id="radix-_r_8_"
             name="_r_0_"
             title=""
@@ -247,7 +247,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
             value="legacy"
           />
           <div
-            class="_ui_1qhtc_19"
+            class="_ui_1e0uz_19"
           />
         </div>
       </div>
@@ -275,19 +275,19 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
         class="_inline-field-control_19upo_44"
       >
         <div
-          class="_container_1qhtc_10"
+          class="_container_1e0uz_10"
         >
           <input
             aria-describedby="radix-_r_9_ radix-_r_b_ radix-_r_d_"
-            class="_input_1qhtc_18"
+            class="_input_1e0uz_18"
             id="radix-_r_a_"
             name="_r_0_"
             title=""
             type="radio"
-            value="compatibility"
+            value="compatibil"
           />
           <div
-            class="_ui_1qhtc_19"
+            class="_ui_1e0uz_19"
           />
         </div>
       </div>
@@ -315,11 +315,11 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
         class="_inline-field-control_19upo_44"
       >
         <div
-          class="_container_1qhtc_10"
+          class="_container_1e0uz_10"
         >
           <input
             aria-describedby="radix-_r_9_ radix-_r_b_ radix-_r_d_"
-            class="_input_1qhtc_18"
+            class="_input_1e0uz_18"
             id="radix-_r_c_"
             name="_r_0_"
             title=""
@@ -327,7 +327,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
             value="matrix_2_0"
           />
           <div
-            class="_ui_1qhtc_19"
+            class="_ui_1e0uz_19"
           />
         </div>
       </div>
@@ -349,92 +349,46 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
       </div>
     </div>
   </form>
-  <div
-    class="livekit_room_box"
+  <h3>
+    LiveKit SFU: wss://local-sfu.example.org
+  </h3>
+  <p>
+    ws-url: 
+    wss://local-sfu.example.org/
+  </p>
+  <p>
+    LiveKit Server Info
+    (
+    local
+    )
+  </p>
+  <pre
+    class="pre"
   >
-    <h4>
-      LiveKit SFU: wss://local-sfu.example.org
-    </h4>
-    <p>
-      LivekitAlias: 
-      TestAlias
-    </p>
-    <p>
-      connectionState (wont hot reload): 
-    </p>
-    <p>
-      ws-url: 
-      wss://local-sfu.example.org/
-    </p>
-    <p>
-      LiveKit Server Info
-      (
-      local
-      )
-    </p>
-    <pre
-      class="pre"
-    >
-      {
+    {
   "region": "local",
   "version": "1.2.3"
 }
-      local-metadata
-    </pre>
-    <p>
-      Local Participant
-    </p>
-    <pre
-      class="pre"
-    >
-      localParticipantIdentity
-    </pre>
-    <p>
-      Remote Participants
-    </p>
-    <ul />
-  </div>
-  <div
-    class="livekit_room_box"
+    local-metadata
+  </pre>
+  <h3>
+    LiveKit SFU: wss://remote-sfu.example.org
+  </h3>
+  <p>
+    LiveKit Server Info
+    (
+    remote
+    )
+  </p>
+  <pre
+    class="pre"
   >
-    <h4>
-      LiveKit SFU: wss://remote-sfu.example.org
-    </h4>
-    <p>
-      LivekitAlias: 
-      TestAlias2
-    </p>
-    <p>
-      connectionState (wont hot reload): 
-    </p>
-    <p>
-      LiveKit Server Info
-      (
-      remote
-      )
-    </p>
-    <pre
-      class="pre"
-    >
-      {
+    {
   "region": "remote",
   "version": "4.5.6"
 }
-      remote-metadata
-    </pre>
-    <p>
-      Local Participant
-    </p>
-    <pre
-      class="pre"
-    >
-      localParticipantIdentity
-    </pre>
-    <p>
-      Remote Participants
-    </p>
-    <ul />
-  </div>
+    remote-metadata
+  </pre>
   <p>
     Environment variables
   </p>

src/settings/rageshake.test.ts

@@ -1,34 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { expect, it } from "vitest";
-
-import { init as initRageshake } from "./rageshake";
-
-it("Logger should not crash if JSON.stringify fails", async () => {
-  // JSON.stringify can throw. We want to make sure that the logger can handle this gracefully.
-  await initRageshake();
-
-  const bigIntObj = { n: 1n };
-  const notStringifiable = {
-    bigIntObj,
-  };
-  // @ts-expect-error - we want to create an object that cannot be stringified
-  notStringifiable.foo = notStringifiable; // circular reference
-
-  // ensure this cannot be stringified
-  expect(() => JSON.stringify(notStringifiable)).toThrow();
-
-  expect(() =>
-    global.mx_rage_logger.log(
-      1,
-      "test",
-      "This is a test message",
-      notStringifiable,
-    ),
-  ).not.toThrow();
-});

src/settings/rageshake.ts

@@ -75,14 +75,7 @@ class ConsoleLogger extends EventEmitter {
       } else if (arg instanceof Error) {
         return arg.message + (arg.stack ? `\n${arg.stack}` : "");
       } else if (typeof arg === "object") {
-        try {
-          return JSON.stringify(arg, getCircularReplacer());
-        } catch {
-          // Stringify can fail if the object has circular references or if
-          // there is a bigInt.
-          // Did happen even with our `getCircularReplacer`. In this case, just log
-          return "<$ failed to serialize object $>";
-        }
+        return JSON.stringify(arg, getCircularReplacer());
       } else {
         return arg;
       }

src/settings/settings.ts

@@ -34,20 +34,15 @@ export class Setting<T> {
 
     this._value$ = new BehaviorSubject(initialValue);
     this.value$ = this._value$;
-    this._lastUpdateReason$ = new BehaviorSubject<string | null>(null);
-    this.lastUpdateReason$ = this._lastUpdateReason$;
   }
 
   private readonly key: string;
 
   private readonly _value$: BehaviorSubject<T>;
-  private readonly _lastUpdateReason$: BehaviorSubject<string | null>;
   public readonly value$: Behavior<T>;
-  public readonly lastUpdateReason$: Behavior<string | null>;
 
-  public readonly setValue = (value: T, reason?: string): void => {
+  public readonly setValue = (value: T): void => {
     this._value$.next(value);
-    this._lastUpdateReason$.next(reason ?? null);
     localStorage.setItem(this.key, JSON.stringify(value));
   };
   public readonly getValue = (): T => {
@@ -131,13 +126,7 @@ export const alwaysShowIphoneEarpiece = new Setting<boolean>(
 
 export enum MatrixRTCMode {
   Legacy = "legacy",
-  Compatibility = "compatibility",
-  /** This implies using
-   *  - sticky events
-   *  - hashed RTC backend identity
-   *  - the new endpoint for the jwt token on the local membership (remote memberships will always try the new jwt endpoint first -> then the legacy one)
-   *  - use the hashed identity for the local membership
-   */
+  Compatibil = "compatibil",
   Matrix_2_0 = "matrix_2_0",
 }
 

src/state/CallViewModel/CallNotificationLifecycle.test.ts

@@ -5,6 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
+import {
+  type ICallNotifyContent,
+  type IRTCNotificationContent,
+} from "matrix-js-sdk/lib/matrixrtc";
 import { describe, it } from "vitest";
 import {
   EventType,
@@ -21,23 +25,23 @@ import {
   localRtcMember,
 } from "../../utils/test-fixtures";
 import {
-  type CallNotificationWrapper,
   createCallNotificationLifecycle$,
   type Props as CallNotificationLifecycleProps,
 } from "./CallNotificationLifecycle";
 import { trackEpoch } from "../ObservableScope";
 
+const mockLegacyRingEvent = {} as { event_id: string } & ICallNotifyContent;
 function mockRingEvent(
   eventId: string,
   lifetimeMs: number | undefined,
   sender = local.userId,
-): CallNotificationWrapper {
+): { event_id: string } & IRTCNotificationContent {
   return {
     event_id: eventId,
     ...(lifetimeMs === undefined ? {} : { lifetime: lifetimeMs }),
     notification_type: "ring",
     sender,
-  } as unknown as CallNotificationWrapper;
+  } as unknown as { event_id: string } & IRTCNotificationContent;
 }
 
 describe("waitForCallPickup$", () => {
@@ -50,7 +54,7 @@ describe("waitForCallPickup$", () => {
           behavior("a", { a: [] }).pipe(trackEpoch()),
         ),
         sentCallNotification$: hot("10ms a", {
-          a: mockRingEvent("$notif1", 30),
+          a: [mockRingEvent("$notif1", 30), mockLegacyRingEvent],
         }),
         receivedDecline$: hot(""),
         options: {
@@ -82,7 +86,7 @@ describe("waitForCallPickup$", () => {
           }).pipe(trackEpoch()),
         ),
         sentCallNotification$: hot("5ms a", {
-          a: mockRingEvent("$notif2", 100),
+          a: [mockRingEvent("$notif2", 100), mockLegacyRingEvent],
         }),
         receivedDecline$: hot(""),
         options: {
@@ -111,7 +115,7 @@ describe("waitForCallPickup$", () => {
           }).pipe(trackEpoch()),
         ),
         sentCallNotification$: hot("20ms a", {
-          a: mockRingEvent("$notif2", 50),
+          a: [mockRingEvent("$notif2", 50), mockLegacyRingEvent],
         }),
         receivedDecline$: hot(""),
         options: {
@@ -138,7 +142,7 @@ describe("waitForCallPickup$", () => {
           }).pipe(trackEpoch()),
         ),
         sentCallNotification$: hot("10ms a", {
-          a: mockRingEvent("$notif2", undefined),
+          a: [mockRingEvent("$notif2", undefined), mockLegacyRingEvent],
         }),
         receivedDecline$: hot(""),
         options: {
@@ -167,7 +171,7 @@ describe("waitForCallPickup$", () => {
           }).pipe(trackEpoch()),
         ),
         sentCallNotification$: hot("10ms a", {
-          a: mockRingEvent("$notif5", 30),
+          a: [mockRingEvent("$notif5", 30), mockLegacyRingEvent],
         }),
         receivedDecline$: hot(""),
         options: {
@@ -206,7 +210,7 @@ describe("waitForCallPickup$", () => {
           }).pipe(trackEpoch()),
         ),
         sentCallNotification$: hot("10ms a", {
-          a: mockRingEvent("$decl1", 50),
+          a: [mockRingEvent("$decl1", 50), mockLegacyRingEvent],
         }),
         receivedDecline$: hot("40ms d", {
           d: [
@@ -250,7 +254,7 @@ describe("waitForCallPickup$", () => {
           }).pipe(trackEpoch()),
         ),
         sentCallNotification$: hot("10ms a", {
-          a: mockRingEvent("$decl", 20),
+          a: [mockRingEvent("$decl", 20), mockLegacyRingEvent],
         }),
         receivedDecline$: hot("40ms d", {
           d: [
@@ -301,7 +305,7 @@ describe("waitForCallPickup$", () => {
           }).pipe(trackEpoch()),
         ),
         sentCallNotification$: hot("10ms a", {
-          a: mockRingEvent("$right", 50),
+          a: [mockRingEvent("$right", 50), mockLegacyRingEvent],
         }),
         receivedDecline$: hot("20ms d", {
           d: [

src/state/CallViewModel/CallNotificationLifecycle.ts

@@ -7,9 +7,9 @@ Please see LICENSE in the repository root for full details.
 
 import {
   type CallMembership,
-  type IRTCNotificationContent,
   type MatrixRTCSession,
   MatrixRTCSessionEvent,
+  type MatrixRTCSessionEventHandlerMap,
 } from "matrix-js-sdk/lib/matrixrtc";
 import {
   combineLatest,
@@ -38,7 +38,6 @@ import {
 
 import { type Behavior } from "../Behavior";
 import { type Epoch, mapEpoch, type ObservableScope } from "../ObservableScope";
-
 export type AutoLeaveReason = "allOthersLeft" | "timeout" | "decline";
 export type CallPickupState =
   | "unknown"
@@ -47,11 +46,9 @@ export type CallPickupState =
   | "decline"
   | "success"
   | null;
-
-export type CallNotificationWrapper = {
-  event_id: string;
-} & IRTCNotificationContent;
-
+export type CallNotificationWrapper = Parameters<
+  MatrixRTCSessionEventHandlerMap[MatrixRTCSessionEvent.DidSendCallNotification]
+>;
 export function createSentCallNotification$(
   scope: ObservableScope,
   matrixRTCSession: MatrixRTCSession,
@@ -83,7 +80,6 @@ export interface Props {
   options: { waitForCallPickup?: boolean; autoLeaveWhenOthersLeft?: boolean };
   localUser: { deviceId: string; userId: string };
 }
-
 /**
  * @returns two observables:
  * `callPickupState$` The current call pickup state of the call.
@@ -144,12 +140,12 @@ export function createCallNotificationLifecycle$({
     scope.behavior(
       sentCallNotification$.pipe(
         filter(
-          (notificationEventArgs: CallNotificationWrapper | null) =>
+          (newAndLegacyEvents) =>
             // only care about new events (legacy do not have decline pattern)
-            notificationEventArgs?.notification_type === "ring",
+            newAndLegacyEvents?.[0].notification_type === "ring",
         ),
         map((e) => e as CallNotificationWrapper),
-        switchMap((notificationEvent) => {
+        switchMap(([notificationEvent]) => {
           const lifetimeMs = notificationEvent?.lifetime ?? 0;
           return concat(
             lifetimeMs === 0

src/state/CallViewModel/CallViewModel.test.ts

@@ -29,6 +29,7 @@ import {
   Status,
   type CallMembership,
   type IRTCNotificationContent,
+  type ICallNotifyContent,
   MatrixRTCSessionEvent,
   type LivekitTransport,
 } from "matrix-js-sdk/lib/matrixrtc";
@@ -61,9 +62,6 @@ import { getValue } from "../../utils/observable.ts";
 import { type Behavior, constant } from "../Behavior.ts";
 import { withCallViewModel as withCallViewModelInMode } from "./CallViewModelTestUtils.ts";
 import { MatrixRTCMode } from "../../settings/settings.ts";
-import { initializeWidget } from "../../widget.ts";
-
-initializeWidget();
 
 vi.mock("rxjs", async (importOriginal) => ({
   ...(await importOriginal()),
@@ -80,14 +78,11 @@ vi.mock("../e2ee/matrixKeyProvider");
 const getUrlParams = vi.hoisted(() => vi.fn(() => ({})));
 vi.mock("../UrlParams", () => ({ getUrlParams }));
 
-vi.mock(
-  "../state/CallViewModel/localMember/localTransport",
-  async (importOriginal) => ({
-    ...(await importOriginal()),
-    makeTransport: async (): Promise<LivekitTransport> =>
-      Promise.resolve(exampleTransport),
-  }),
-);
+vi.mock("../rtcSessionHelpers", async (importOriginal) => ({
+  ...(await importOriginal()),
+  makeTransport: async (): Promise<LivekitTransport> =>
+    Promise.resolve(exampleTransport),
+}));
 
 const yesNo = {
   y: true,
@@ -231,9 +226,13 @@ function mockRingEvent(
   } as unknown as { event_id: string } & IRTCNotificationContent;
 }
 
+// The app doesn't really care about the content of these legacy events, we just
+// need a value to fill in for them when emitting notifications
+const mockLegacyRingEvent = {} as { event_id: string } & ICallNotifyContent;
+
 describe.each([
   [MatrixRTCMode.Legacy],
-  [MatrixRTCMode.Compatibility],
+  [MatrixRTCMode.Compatibil],
   [MatrixRTCMode.Matrix_2_0],
 ])("CallViewModel (%s mode)", (mode) => {
   const withCallViewModel = withCallViewModelInMode(mode);
@@ -1104,6 +1103,7 @@ describe.each([
                 rtcSession.emit(
                   MatrixRTCSessionEvent.DidSendCallNotification,
                   mockRingEvent("$notif1", 30),
+                  mockLegacyRingEvent,
                 );
               },
             });
@@ -1145,6 +1145,7 @@ describe.each([
                 rtcSession.emit(
                   MatrixRTCSessionEvent.DidSendCallNotification,
                   mockRingEvent("$notif2", 100),
+                  mockLegacyRingEvent,
                 );
               },
               d: () => {
@@ -1254,6 +1255,11 @@ describe.each([
             y: () => {
               rtcSession.membershipStatus = Status.Connected;
             },
+            n: () => {
+              // NOTE: This was removed in https://github.com/matrix-org/matrix-js-sdk/pull/5103 accidentally.
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              rtcSession.membershipStatus = "Reconnecting" as any;
+            },
           });
           schedule(probablyLeftMarbles, {
             y: () => {

src/state/CallViewModel/CallViewModel.ts

@@ -41,19 +41,21 @@ import {
 } from "rxjs";
 import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
 import {
-  MembershipManagerEvent,
-  type LivekitTransportConfig,
+  type LivekitTransport,
   type MatrixRTCSession,
 } from "matrix-js-sdk/lib/matrixrtc";
 import { type IWidgetApiRequest } from "matrix-widget-api";
-import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
-import { v4 as uuidv4 } from "uuid";
-import { type IMembershipManager } from "matrix-js-sdk/lib/matrixrtc/IMembershipManager";
 
 import {
-  createToggle$,
+  LocalUserMediaViewModel,
+  type MediaViewModel,
+  type RemoteUserMediaViewModel,
+  ScreenShareViewModel,
+  type UserMediaViewModel,
+} from "../MediaViewModel";
+import {
+  accumulate,
   filterBehavior,
-  generateItem,
   generateItems,
   pauseWhen,
 } from "../../utils/observable";
@@ -63,7 +65,7 @@ import {
   playReactionsSound,
   showReactions,
 } from "../../settings/settings";
-import { isFirefox, platform } from "../../Platform";
+import { isFirefox } from "../../Platform";
 import { setPipEnabled$ } from "../../controls";
 import { TileStore } from "../TileStore";
 import { gridLikeLayout } from "../GridLikeLayout";
@@ -85,6 +87,8 @@ import { type MuteStates } from "../MuteStates";
 import { getUrlParams } from "../../UrlParams";
 import { type ProcessorState } from "../../livekit/TrackProcessorContext";
 import { ElementWidgetActions, widget } from "../../widget";
+import { UserMedia } from "../UserMedia.ts";
+import { ScreenShare } from "../ScreenShare.ts";
 import {
   type GridLayoutMedia,
   type Layout,
@@ -94,32 +98,26 @@ import {
   type SpotlightLandscapeLayoutMedia,
   type SpotlightPortraitLayoutMedia,
 } from "../layout-types.ts";
-import { ElementCallError, UnknownCallError } from "../../utils/errors.ts";
-import { type Epoch, type ObservableScope } from "../ObservableScope.ts";
+import { ElementCallError } from "../../utils/errors.ts";
+import { type ObservableScope } from "../ObservableScope.ts";
 import { createHomeserverConnected$ } from "./localMember/HomeserverConnected.ts";
 import {
   createLocalMembership$,
   enterRTCSession,
   TransportState,
 } from "./localMember/LocalMember.ts";
-import {
-  createLocalTransport$,
-  JwtEndpointVersion,
-} from "./localMember/LocalTransport.ts";
+import { createLocalTransport$ } from "./localMember/LocalTransport.ts";
 import {
   createMemberships$,
   membershipsAndTransports$,
 } from "../SessionBehaviors.ts";
 import { ECConnectionFactory } from "./remoteMembers/ConnectionFactory.ts";
-import {
-  type ConnectionManagerData,
-  createConnectionManager$,
-} from "./remoteMembers/ConnectionManager.ts";
+import { createConnectionManager$ } from "./remoteMembers/ConnectionManager.ts";
 import {
   createMatrixLivekitMembers$,
+  type TaggedParticipant,
   type LocalMatrixLivekitMember,
   type RemoteMatrixLivekitMember,
-  type MatrixLivekitMember,
 } from "./remoteMembers/MatrixLivekitMembers.ts";
 import {
   type AutoLeaveReason,
@@ -135,14 +133,6 @@ import {
 import { Publisher } from "./localMember/Publisher.ts";
 import { type Connection } from "./remoteMembers/Connection.ts";
 import { createLayoutModeSwitch } from "./LayoutSwitch.ts";
-import {
-  createWrappedUserMedia,
-  type MediaItem,
-  type WrappedUserMediaViewModel,
-} from "../media/MediaItem.ts";
-import { type ScreenShareViewModel } from "../media/ScreenShareViewModel.ts";
-import { type UserMediaViewModel } from "../media/UserMediaViewModel.ts";
-import { type MediaViewModel } from "../media/MediaViewModel.ts";
 
 const logger = rootLogger.getChild("[CallViewModel]");
 //TODO
@@ -192,6 +182,7 @@ interface LayoutScanState {
   tiles: TileStore;
 }
 
+type MediaItem = UserMedia | ScreenShare;
 export type LivekitRoomItem = {
   livekitRoom: LivekitRoom;
   participants: string[];
@@ -216,23 +207,15 @@ export interface CallViewModel {
     "unknown" | "ringing" | "timeout" | "decline" | "success" | null
   >;
   /** Observable that emits when the user should leave the call (hangup pressed, widget action, error).
-   * THIS DOES NOT LEAVE THE CALL YET. The only way to leave the call (send the hangup event) is
-   *  - by ending the scope
-   *  - or calling requestDisconnect
-   *
-   * TODO: it seems more reasonable to add a leave() method (that calls requestDisconnect) that will then update leave$ and remove the hangup pattern
+   * THIS DOES NOT LEAVE THE CALL YET. The only way to leave the call (send the hangup event) is by ending the scope.
    */
   leave$: Observable<"user" | AutoLeaveReason>;
-  /** Call to initiate hangup. Use in conbination with reconnection state track the async hangup process. */
+  /** Call to initiate hangup. Use in conbination with reconnectino state track the async hangup process. */
   hangup: () => void;
 
   // joining
   join: () => void;
 
-  /**
-   * calls requestDisconnect. The async leave state can than be observed via connected$
-   */
-  leave: () => void;
   // screen sharing
   /**
    * Callback to toggle screen sharing. If null, screen sharing is not possible.
@@ -278,9 +261,9 @@ export interface CallViewModel {
    *    multiple devices.
    */
   participantCount$: Behavior<number>;
-  allConnections$: Behavior<ConnectionManagerData>;
   /** Participants sorted by livekit room so they can be used in the audio rendering */
   livekitRoomItems$: Behavior<LivekitRoomItem[]>;
+  userMedia$: Behavior<UserMedia[]>;
   /** use the layout instead, this is just for the sdk export. */
   matrixLivekitMembers$: Behavior<RemoteMatrixLivekitMember[]>;
   localMatrixLivekitMember$: Behavior<LocalMatrixLivekitMember | null>;
@@ -331,6 +314,10 @@ export interface CallViewModel {
   gridMode$: Behavior<GridMode>;
   setGridMode: (value: GridMode) => void;
 
+  // media view models and layout
+  grid$: Behavior<UserMediaViewModel[]>;
+  spotlight$: Behavior<MediaViewModel[]>;
+  pip$: Behavior<UserMediaViewModel | null>;
   /**
    * The layout of tiles in the call interface.
    */
@@ -394,11 +381,8 @@ export function createCallViewModel$(
   trackProcessorState$: Behavior<ProcessorState>,
 ): CallViewModel {
   const client = matrixRoom.client;
-  const userId = client.getUserId();
-  const deviceId = client.getDeviceId();
-  if (!(userId && deviceId))
-    throw new UnknownCallError(new Error("userId and deviceId are required"));
-
+  const userId = client.getUserId()!;
+  const deviceId = client.getDeviceId()!;
   const livekitKeyProvider = getE2eeKeyProvider(
     options.encryptionSystem,
     matrixRTCSession,
@@ -431,49 +415,18 @@ export function createCallViewModel$(
     memberships$,
   );
 
-  const ownMembershipIdentity: CallMembershipIdentityParts = {
-    userId,
-    deviceId,
-    // This will only be consumed by the sticky membership manager. So it has no impact on legacy calls.
-    memberId: uuidv4(),
-  };
-
-  const localTransport$ = scope.behavior(
-    matrixRTCMode$.pipe(
-      generateItem(
-        "CallViewModel localTransport$",
-        // Re-create LocalTransport whenever the mode changes
-        (mode) => ({ keys: [mode], data: undefined }),
-        (scope, _data$, mode) =>
-          createLocalTransport$({
-            scope: scope,
-            memberships$: memberships$,
-            ownMembershipIdentity,
-            client,
-            delayId$: scope.behavior(
-              (
-                fromEvent(
-                  matrixRTCSession,
-                  MembershipManagerEvent.DelayIdChanged,
-                  // The type of reemitted event includes the original emitted as the second arg.
-                ) as Observable<[string | undefined, IMembershipManager]>
-              ).pipe(map(([delayId]) => delayId ?? null)),
-              matrixRTCSession.delayId ?? null,
-            ),
-            roomId: matrixRoom.roomId,
-            forceJwtEndpoint:
-              mode === MatrixRTCMode.Matrix_2_0
-                ? JwtEndpointVersion.Matrix_2_0
-                : JwtEndpointVersion.Legacy,
-            useOldestMember: mode === MatrixRTCMode.Legacy,
-          }),
-      ),
+  const localTransport$ = createLocalTransport$({
+    scope: scope,
+    memberships$: memberships$,
+    client,
+    roomId: matrixRoom.roomId,
+    useOldestMember$: scope.behavior(
+      matrixRTCMode$.pipe(map((v) => v === MatrixRTCMode.Legacy)),
     ),
-  );
+  });
 
   const connectionFactory = new ECConnectionFactory(
     client,
-    matrixRoom.roomId,
     mediaDevices,
     trackProcessorState$,
     livekitKeyProvider,
@@ -486,30 +439,38 @@ export function createCallViewModel$(
   const connectionManager = createConnectionManager$({
     scope: scope,
     connectionFactory: connectionFactory,
-    localTransport$: scope.behavior(
-      localTransport$.pipe(
-        switchMap((t) => t.active$),
-        catchError((e: unknown) => {
-          logger.info(
-            "could not pass local transport to createConnectionManager$. localTransport$ threw an error",
-            e,
-          );
-          return of(null);
-        }),
+    inputTransports$: scope.behavior(
+      combineLatest(
+        [
+          localTransport$.pipe(
+            catchError((e: unknown) => {
+              logger.info(
+                "dont pass local transport to createConnectionManager$. localTransport$ threw an error",
+                e,
+              );
+              return of(null);
+            }),
+          ),
+          membershipsAndTransports.transports$,
+        ],
+        (localTransport, transports) => {
+          const localTransportAsArray = localTransport ? [localTransport] : [];
+          return transports.mapInner((transports) => [
+            ...localTransportAsArray,
+            ...transports,
+          ]);
+        },
       ),
     ),
-    remoteTransports$: membershipsAndTransports.transports$,
-    logger: logger,
-    ownMembershipIdentity,
+    logger,
   });
 
-  const matrixLivekitMembers$: Behavior<Epoch<RemoteMatrixLivekitMember[]>> =
-    createMatrixLivekitMembers$({
-      scope: scope,
-      membershipsWithTransport$:
-        membershipsAndTransports.membershipsWithTransport$,
-      connectionManager: connectionManager,
-    });
+  const matrixLivekitMembers$ = createMatrixLivekitMembers$({
+    scope: scope,
+    membershipsWithTransport$:
+      membershipsAndTransports.membershipsWithTransport$,
+    connectionManager: connectionManager,
+  });
 
   const connectOptions$ = scope.behavior(
     matrixRTCMode$.pipe(
@@ -522,23 +483,23 @@ export function createCallViewModel$(
   );
 
   const localMembership = createLocalMembership$({
-    scope,
+    scope: scope,
     homeserverConnected: createHomeserverConnected$(
       scope,
       client,
       matrixRTCSession,
     ),
-    muteStates,
-    joinMatrixRTC: (transport: LivekitTransportConfig) => {
+    muteStates: muteStates,
+    joinMatrixRTC: (transport: LivekitTransport) => {
       return enterRTCSession(
         matrixRTCSession,
-        ownMembershipIdentity,
         transport,
         connectOptions$.value,
       );
     },
     createPublisherFactory: (connection: Connection) => {
       return new Publisher(
+        scope,
         connection,
         mediaDevices,
         muteStates,
@@ -548,11 +509,9 @@ export function createCallViewModel$(
         ),
       );
     },
-    connectionManager,
-    matrixRTCSession,
-    localTransport$: scope.behavior(
-      localTransport$.pipe(switchMap((t) => t.advertised$)),
-    ),
+    connectionManager: connectionManager,
+    matrixRTCSession: matrixRTCSession,
+    localTransport$: localTransport$,
     logger: logger.getChild(`[${Date.now()}]`),
   });
 
@@ -645,14 +604,15 @@ export function createCallViewModel$(
     ),
   );
 
-  const allConnections$ = scope.behavior(
-    connectionManager.connectionManagerData$.pipe(map((d) => d.value)),
-  );
   const livekitRoomItems$ = scope.behavior(
     matrixLivekitMembers$.pipe(
-      switchMap((members) => {
+      tap((val) => {
+        logger.debug("matrixLivekitMembers$ updated", val.value);
+      }),
+      switchMap((membersWithEpoch) => {
+        const members = membersWithEpoch.value;
         const a$ = combineLatest(
-          members.value.map((member) =>
+          members.map((member) =>
             combineLatest([member.connection$, member.participant.value$]).pipe(
               map(([connection, participant]) => {
                 // do not render audio for local participant
@@ -714,7 +674,7 @@ export function createCallViewModel$(
   /**
    * List of user media (camera feeds) that we want tiles for.
    */
-  const userMedia$ = scope.behavior<WrappedUserMediaViewModel[]>(
+  const userMedia$ = scope.behavior<UserMedia[]>(
     combineLatest([
       localMatrixLivekitMember$,
       matrixLivekitMembers$,
@@ -723,72 +683,88 @@ export function createCallViewModel$(
       // Generate a collection of MediaItems from the list of expected (whether
       // present or missing) LiveKit participants.
       generateItems(
-        "CallViewModel userMedia$",
         function* ([
           localMatrixLivekitMember,
-          matrixLivekitMembers,
+          { value: matrixLivekitMembers },
           duplicateTiles,
         ]) {
-          const computeMediaId = (m: MatrixLivekitMember): string =>
-            `${m.userId}:${m.membership$.value.deviceId}`;
-
-          const localUserMediaId = localMatrixLivekitMember
-            ? computeMediaId(localMatrixLivekitMember)
-            : undefined;
-
-          const localAsArray = localMatrixLivekitMember
-            ? [localMatrixLivekitMember]
-            : [];
-          const remoteWithoutLocal = matrixLivekitMembers.value.filter(
-            (m) => computeMediaId(m) !== localUserMediaId,
-          );
-          const allMatrixLivekitMembers = [
-            ...localAsArray,
-            ...remoteWithoutLocal,
-          ];
-
-          for (const matrixLivekitMember of allMatrixLivekitMembers) {
+          let localParticipantId: string | undefined = undefined;
+          // add local member if available
+          if (localMatrixLivekitMember) {
             const { userId, participant, connection$, membership$ } =
-              matrixLivekitMember;
-            const rtcId = membership$.value.rtcBackendIdentity; // rtcBackendIdentity
-            const mediaId = computeMediaId(matrixLivekitMember);
+              localMatrixLivekitMember;
+            localParticipantId = `${userId}:${membership$.value.deviceId}`; // should be membership$.value.membershipID which is not optional
+            // const participantId = membership$.value.membershipID;
+            if (localParticipantId) {
+              for (let dup = 0; dup < 1 + duplicateTiles; dup++) {
+                yield {
+                  keys: [
+                    dup,
+                    localParticipantId,
+                    userId,
+                    participant satisfies TaggedParticipant as TaggedParticipant, // Widen the type safely
+                    connection$,
+                  ],
+                  data: undefined,
+                };
+              }
+            }
+          }
+          // add remote members that are available
+          for (const {
+            userId,
+            participant,
+            connection$,
+            membership$,
+          } of matrixLivekitMembers) {
+            const participantId = `${userId}:${membership$.value.deviceId}`;
+            if (participantId === localParticipantId) continue;
+            // const participantId = membership$.value?.identity;
             for (let dup = 0; dup < 1 + duplicateTiles; dup++) {
               yield {
-                keys: [dup, mediaId, userId, participant, connection$, rtcId],
+                keys: [dup, participantId, userId, participant, connection$],
                 data: undefined,
               };
             }
           }
         },
-        (scope, _, dup, mediaId, userId, participant, connection$, rtcId) =>
-          createWrappedUserMedia(scope, {
-            id: `${mediaId}:${dup}`,
+        (
+          scope,
+          _data$,
+          dup,
+          participantId,
+          userId,
+          participant,
+          connection$,
+        ) => {
+          const livekitRoom$ = scope.behavior(
+            connection$.pipe(map((c) => c?.livekitRoom)),
+          );
+          const focusUrl$ = scope.behavior(
+            connection$.pipe(map((c) => c?.transport.livekit_service_url)),
+          );
+          const displayName$ = scope.behavior(
+            matrixMemberMetadataStore
+              .createDisplayNameBehavior$(userId)
+              .pipe(map((name) => name ?? userId)),
+          );
+
+          return new UserMedia(
+            scope,
+            `${participantId}:${dup}`,
             userId,
-            rtcBackendIdentity: rtcId,
             participant,
-            encryptionSystem: options.encryptionSystem,
-            livekitRoom$: scope.behavior(
-              connection$.pipe(map((c) => c?.livekitRoom)),
-            ),
-            focusUrl$: scope.behavior(
-              connection$.pipe(map((c) => c?.transport.livekit_service_url)),
-            ),
+            options.encryptionSystem,
+            livekitRoom$,
+            focusUrl$,
             mediaDevices,
-            pretendToBeDisconnected$: localMembership.reconnecting$,
-            displayName$: scope.behavior(
-              matrixMemberMetadataStore
-                .createDisplayNameBehavior$(userId)
-                .pipe(map((name) => name ?? userId)),
-            ),
-            mxcAvatarUrl$:
-              matrixMemberMetadataStore.createAvatarUrlBehavior$(userId),
-            handRaised$: scope.behavior(
-              handsRaised$.pipe(map((v) => v[mediaId]?.time ?? null)),
-            ),
-            reaction$: scope.behavior(
-              reactions$.pipe(map((v) => v[mediaId] ?? undefined)),
-            ),
-          }),
+            localMembership.reconnecting$,
+            displayName$,
+            matrixMemberMetadataStore.createAvatarUrlBehavior$(userId),
+            handsRaised$.pipe(map((v) => v[participantId]?.time ?? null)),
+            reactions$.pipe(map((v) => v[participantId] ?? undefined)),
+          );
+        },
       ),
     ),
   );
@@ -813,9 +789,11 @@ export function createCallViewModel$(
   /**
    * List of MediaItems that we want to display, that are of type ScreenShare
    */
-  const screenShares$ = scope.behavior<ScreenShareViewModel[]>(
+  const screenShares$ = scope.behavior<ScreenShare[]>(
     mediaItems$.pipe(
-      map((mediaItems) => mediaItems.filter((m) => m.type === "screen share")),
+      map((mediaItems) =>
+        mediaItems.filter((m): m is ScreenShare => m instanceof ScreenShare),
+      ),
     ),
   );
 
@@ -878,39 +856,39 @@ export function createCallViewModel$(
       merge(userHangup$, widgetHangup$).pipe(map(() => "user" as const)),
     ).pipe(scope.share);
 
-  const spotlightSpeaker$ = scope.behavior<UserMediaViewModel | undefined>(
+  const spotlightSpeaker$ = scope.behavior<UserMediaViewModel | null>(
     userMedia$.pipe(
       switchMap((mediaItems) =>
         mediaItems.length === 0
           ? of([])
           : combineLatest(
               mediaItems.map((m) =>
-                m.speaking$.pipe(map((s) => [m, s] as const)),
+                m.vm.speaking$.pipe(map((s) => [m, s] as const)),
               ),
             ),
       ),
-      scan<
-        (readonly [UserMediaViewModel, boolean])[],
-        UserMediaViewModel | undefined,
-        undefined
-      >((prev, mediaItems) => {
-        // Only remote users that are still in the call should be sticky
-        const [stickyMedia, stickySpeaking] =
-          (!prev?.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.local && s)?.[0] ??
-              // Otherwise, stick with the person who was last speaking
-              stickyMedia ??
-              // Otherwise, spotlight an arbitrary remote user
-              mediaItems.find(([m]) => !m.local)?.[0] ??
-              // Otherwise, spotlight the local user
-              mediaItems.find(([m]) => m.local)?.[0]);
-      }, undefined),
+      scan<(readonly [UserMedia, boolean])[], UserMedia | undefined, 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,
+      ),
+      map((speaker) => speaker?.vm ?? null),
     ),
   );
 
@@ -924,7 +902,7 @@ export function createCallViewModel$(
         return bins.length === 0
           ? of([])
           : combineLatest(bins, (...bins) =>
-              bins.sort(([, bin1], [, bin2]) => bin1 - bin2).map(([m]) => m),
+              bins.sort(([, bin1], [, bin2]) => bin1 - bin2).map(([m]) => m.vm),
             );
       }),
       distinctUntilChanged(shallowEquals),
@@ -934,7 +912,9 @@ export function createCallViewModel$(
   const spotlight$ = scope.behavior<MediaViewModel[]>(
     screenShares$.pipe(
       switchMap((screenShares) => {
-        if (screenShares.length > 0) return of(screenShares);
+        if (screenShares.length > 0) {
+          return of(screenShares.map((m) => m.vm));
+        }
 
         return spotlightSpeaker$.pipe(
           map((speaker) => (speaker ? [speaker] : [])),
@@ -944,7 +924,7 @@ export function createCallViewModel$(
     ),
   );
 
-  const pip$ = scope.behavior<UserMediaViewModel | undefined>(
+  const pip$ = scope.behavior<UserMediaViewModel | null>(
     combineLatest([
       // TODO This also needs epoch logic to dedupe the screenshares and mediaItems emits
       screenShares$,
@@ -956,17 +936,28 @@ export function createCallViewModel$(
           return spotlightSpeaker$;
         }
         if (!spotlight || spotlight.local) {
-          return of(undefined);
+          return of(null);
         }
 
         const localUserMedia = mediaItems.find(
-          (m) => m.type === "user" && m.local,
-        );
-        if (!localUserMedia) {
-          return of(undefined);
+          (m) => m.vm instanceof LocalUserMediaViewModel,
+        ) as UserMedia | undefined;
+
+        const localUserMediaViewModel = localUserMedia?.vm as
+          | LocalUserMediaViewModel
+          | undefined;
+
+        if (!localUserMediaViewModel) {
+          return of(null);
         }
-        return localUserMedia.alwaysShow$.pipe(
-          map((alwaysShow) => (alwaysShow ? localUserMedia : undefined)),
+        return localUserMediaViewModel.alwaysShow$.pipe(
+          map((alwaysShow) => {
+            if (alwaysShow) {
+              return localUserMediaViewModel;
+            }
+
+            return null;
+          }),
         );
       }),
     ),
@@ -975,7 +966,7 @@ export function createCallViewModel$(
   const hasRemoteScreenShares$ = scope.behavior<boolean>(
     spotlight$.pipe(
       map((spotlight) =>
-        spotlight.some((vm) => vm.type === "screen share" && !vm.local),
+        spotlight.some((vm) => !vm.local && vm instanceof ScreenShareViewModel),
       ),
     ),
   );
@@ -1016,10 +1007,8 @@ export function createCallViewModel$(
   );
 
   const spotlightExpandedToggle$ = new Subject<void>();
-  const spotlightExpanded$ = createToggle$(
-    scope,
-    false,
-    spotlightExpandedToggle$,
+  const spotlightExpanded$ = scope.behavior<boolean>(
+    spotlightExpandedToggle$.pipe(accumulate(false, (expanded) => !expanded)),
   );
 
   const { setGridMode, gridMode$ } = createLayoutModeSwitch(
@@ -1032,7 +1021,7 @@ export function createCallViewModel$(
     [grid$, spotlight$],
     (grid, spotlight) => ({
       type: "grid",
-      spotlight: spotlight.some((vm) => vm.type === "screen share")
+      spotlight: spotlight.some((vm) => vm instanceof ScreenShareViewModel)
         ? spotlight
         : undefined,
       grid,
@@ -1064,8 +1053,12 @@ export function createCallViewModel$(
     mediaItems$.pipe(
       map((mediaItems) => {
         if (mediaItems.length !== 2) return null;
-        const local = mediaItems.find((vm) => vm.type === "user" && vm.local);
-        const remote = mediaItems.find((vm) => vm.type === "user" && !vm.local);
+        const local = mediaItems.find((vm) => vm.vm.local)?.vm as
+          | LocalUserMediaViewModel
+          | undefined;
+        const remote = mediaItems.find((vm) => !vm.vm.local)?.vm as
+          | RemoteUserMediaViewModel
+          | undefined;
         // There might not be a remote tile if there are screen shares, or if
         // only the local user is in the call and they're using the duplicate
         // tiles option
@@ -1113,7 +1106,7 @@ export function createCallViewModel$(
                 oneOnOne === null
                   ? combineLatest([grid$, spotlight$], (grid, spotlight) =>
                       grid.length > smallMobileCallThreshold ||
-                      spotlight.some((vm) => vm.type === "screen share")
+                      spotlight.some((vm) => vm instanceof ScreenShareViewModel)
                         ? spotlightPortraitLayoutMedia$
                         : gridLayoutMedia$,
                     ).pipe(switchAll())
@@ -1220,7 +1213,7 @@ export function createCallViewModel$(
             // screen sharing feeds are in the spotlight we still need them.
             return l.spotlight.media$.pipe(
               map((models: MediaViewModel[]) =>
-                models.some((m) => m.type === "screen share"),
+                models.some((m) => m instanceof ScreenShareViewModel),
               ),
             );
           // In expanded spotlight layout, the active speaker is always shown in
@@ -1271,7 +1264,7 @@ export function createCallViewModel$(
       switchMap((mode) => {
         switch (mode) {
           case "pip":
-            return of(platform === "desktop" ? true : false);
+            return of(false);
           case "normal":
           case "narrow":
             return of(true);
@@ -1487,7 +1480,6 @@ export function createCallViewModel$(
     leave$: leave$,
     hangup: (): void => userHangup$.next(),
     join: localMembership.requestJoinAndPublish,
-    leave: localMembership.requestDisconnect,
     toggleScreenSharing: toggleScreenSharing,
     sharingScreen$: sharingScreen$,
 
@@ -1511,7 +1503,6 @@ export function createCallViewModel$(
       ),
       null,
     ),
-    allConnections$,
     participantCount$: participantCount$,
     handsRaised$: handsRaised$,
     reactions$: reactions$,
@@ -1527,21 +1518,17 @@ export function createCallViewModel$(
     toggleSpotlightExpanded$: toggleSpotlightExpanded$,
     gridMode$: gridMode$,
     setGridMode: setGridMode,
+    grid$: grid$,
+    spotlight$: spotlight$,
+    pip$: pip$,
     layout$: layout$,
+    userMedia$,
     localMatrixLivekitMember$,
     matrixLivekitMembers$: scope.behavior(
       matrixLivekitMembers$.pipe(
         map((members) => members.value),
         tap((v) => {
-          const listForLogs = v
-            .map(
-              (m) =>
-                m.membership$.value.userId + "|" + m.membership$.value.deviceId,
-            )
-            .join(",");
-          logger.debug(
-            `matrixLivekitMembers$ updated (exported) [${listForLogs}]`,
-          );
+          logger.debug("matrixLivekitMembers$ updated (exported)", v);
         }),
       ),
     ),

src/state/CallViewModel/localMember/LocalMember.test.ts

@@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details.
 
 import {
   Status as RTCMemberStatus,
-  type LivekitTransportConfig,
+  type LivekitTransport,
   type MatrixRTCSession,
 } from "matrix-js-sdk/lib/matrixrtc";
 import { describe, expect, it, vi } from "vitest";
@@ -24,7 +24,6 @@ import {
   mockLivekitRoom,
   mockMuteStates,
   withTestScheduler,
-  ownMemberMock,
 } from "../../../utils/test";
 import {
   TransportState,
@@ -39,9 +38,6 @@ import { constant } from "../../Behavior";
 import { ConnectionManagerData } from "../remoteMembers/ConnectionManager";
 import { ConnectionState, type Connection } from "../remoteMembers/Connection";
 import { type Publisher } from "./Publisher";
-import { initializeWidget } from "../../../widget";
-
-initializeWidget();
 
 const MATRIX_RTC_MODE = MatrixRTCMode.Legacy;
 const getUrlParams = vi.hoisted(() => vi.fn(() => ({})));
@@ -107,12 +103,11 @@ describe("LocalMembership", () => {
         getOldestMembership: vi.fn().mockReturnValue({
           getPreferredFoci: vi.fn().mockReturnValue([focusFromOlderMembership]),
         }),
-        joinRTCSession: vi.fn(),
+        joinRoomSession: vi.fn(),
       }) as unknown as MatrixRTCSession;
 
       enterRTCSession(
         mockedSession,
-        ownMemberMock,
         {
           livekit_alias: "roomId",
           livekit_service_url: "http://my-well-known-service-url.com",
@@ -124,12 +119,7 @@ describe("LocalMembership", () => {
         },
       );
 
-      expect(mockedSession.joinRTCSession).toHaveBeenLastCalledWith(
-        {
-          deviceId: "DEVICE",
-          memberId: "@alice:example.org:DEVICE",
-          userId: "@alice:example.org",
-        },
+      expect(mockedSession.joinRoomSession).toHaveBeenLastCalledWith(
         [
           {
             livekit_alias: "roomId",
@@ -171,12 +161,11 @@ describe("LocalMembership", () => {
         },
         memberships: [],
         getFocusInUse: vi.fn(),
-        joinRTCSession: vi.fn(),
+        joinRoomSession: vi.fn(),
       }) as unknown as MatrixRTCSession;
 
       enterRTCSession(
         mockedSession,
-        ownMemberMock,
         {
           livekit_alias: "roomId",
           livekit_service_url: "http://my-well-known-service-url.com",
@@ -196,8 +185,8 @@ describe("LocalMembership", () => {
       matrixRTCMode: MatrixRTCMode.Matrix_2_0,
     }),
     matrixRTCSession: {
-      updateCallIntent: vi.fn().mockReturnValue(Promise.resolve()),
-      leaveRoomSession: vi.fn(),
+      updateCallIntent: () => {},
+      leaveRoomSession: () => {},
     } as unknown as MatrixRTCSession,
     muteStates: mockMuteStates(),
     trackProcessorState$: constant({
@@ -215,7 +204,7 @@ describe("LocalMembership", () => {
 
   it("throws error on missing RTC config error", () => {
     withTestScheduler(({ scope, hot, expectObservable }) => {
-      const localTransport$ = scope.behavior<null | LivekitTransportConfig>(
+      const localTransport$ = scope.behavior<null | LivekitTransport>(
         hot("1ms #", {}, new MatrixRTCTransportMissingError("domain.com")),
         null,
       );
@@ -245,43 +234,12 @@ describe("LocalMembership", () => {
     });
   });
 
-  it("logs if callIntent cannot be updated", async () => {
-    const scope = new ObservableScope();
-
-    const localTransport$ = new BehaviorSubject(aTransport);
-    const mockConnectionManager = {
-      transports$: constant(new Epoch([])),
-      connectionManagerData$: constant(new Epoch(new ConnectionManagerData())),
-    };
-    async function reject(): Promise<void> {
-      return Promise.reject(new Error("Not connected yet"));
-    }
-    const localMembership = createLocalMembership$({
-      scope,
-      ...defaultCreateLocalMemberValues,
-      matrixRTCSession: {
-        updateCallIntent: vi.fn().mockImplementation(reject),
-        leaveRoomSession: vi.fn(),
-      },
-      connectionManager: mockConnectionManager,
-      localTransport$,
-    });
-    const expextedLog =
-      "'not connected yet' while updating the call intent (this is expected on startup)";
-    const internalLogger = vi.spyOn(localMembership.internalLoggerRef, "debug");
-
-    await flushPromises();
-    defaultCreateLocalMemberValues.muteStates.video.setEnabled$.value?.(true);
-    expect(internalLogger).toHaveBeenCalledWith(expextedLog);
-    scope.end();
-  });
-
   const aTransport = {
     livekit_service_url: "a",
-  } as LivekitTransportConfig;
+  } as LivekitTransport;
   const bTransport = {
     livekit_service_url: "b",
-  } as LivekitTransportConfig;
+  } as LivekitTransport;
 
   const connectionTransportAConnected = {
     livekitRoom: mockLivekitRoom({
@@ -304,7 +262,7 @@ describe("LocalMembership", () => {
     livekitRoom: mockLivekitRoom({}),
   } as unknown as Connection;
 
-  it("recreates publisher if new connection is used, always unpublish and end tracks", async () => {
+  it("recreates publisher if new connection is used and ENDS always unpublish and end tracks", async () => {
     const scope = new ObservableScope();
 
     const localTransport$ = new BehaviorSubject(aTransport);
@@ -317,9 +275,6 @@ describe("LocalMembership", () => {
         seed += 1;
         logger.info(`creating [${a}]`);
         const p = {
-          // It is enought to check if destroy is called. Destroy itself is tested in the publisher to make sure it does
-          // all the cleanup we need.
-          destroy: vi.fn(),
           stopPublishing: vi.fn().mockImplementation(() => {
             logger.info(`stopPublishing [${a}]`);
           }),
@@ -348,18 +303,19 @@ describe("LocalMembership", () => {
     await flushPromises();
     localTransport$.next(bTransport);
     await flushPromises();
-
     expect(publisherFactory).toHaveBeenCalledTimes(2);
     expect(publishers.length).toBe(2);
     // stop the first Publisher and let the second one life.
-    expect(publishers[0].destroy).toHaveBeenCalled();
-    expect(publishers[1].destroy).not.toHaveBeenCalled();
+    expect(publishers[0].stopTracks).toHaveBeenCalled();
+    expect(publishers[1].stopTracks).not.toHaveBeenCalled();
+    expect(publishers[0].stopPublishing).toHaveBeenCalled();
+    expect(publishers[1].stopPublishing).not.toHaveBeenCalled();
     expect(publisherFactory.mock.calls[0][0].transport).toBe(aTransport);
     expect(publisherFactory.mock.calls[1][0].transport).toBe(bTransport);
     scope.end();
     await flushPromises();
     // stop all tracks after ending scopes
-    expect(publishers[1].destroy).toHaveBeenCalled();
+    expect(publishers[1].stopPublishing).toHaveBeenCalled();
     // expect(publishers[1].stopTracks).toHaveBeenCalled();
 
     defaultCreateLocalMemberValues.createPublisherFactory.mockReset();
@@ -377,9 +333,8 @@ describe("LocalMembership", () => {
     defaultCreateLocalMemberValues.createPublisherFactory.mockImplementation(
       () => {
         const p = {
-          // It is enought to check if destroy is called. Destroy itself is tested in the publisher to make sure it does
-          // all the cleanup we need.
-          destroy: vi.fn(),
+          stopPublishing: vi.fn(),
+          stopTracks: vi.fn(),
           createAndSetupTracks: vi.fn().mockImplementation(async () => {
             tracks$.next([{}, {}] as LocalTrack[]);
             return Promise.resolve();
@@ -414,11 +369,11 @@ describe("LocalMembership", () => {
     localMembership.startTracks();
     await flushPromises();
     expect(publishers[0].createAndSetupTracks).toHaveBeenCalled();
-
+    // expect(localMembership.tracks$.value.length).toBe(2);
     scope.end();
     await flushPromises();
     // stop all tracks after ending scopes
-    expect(publishers[0].destroy).toHaveBeenCalled();
+    expect(publishers[0].stopPublishing).toHaveBeenCalled();
     // expect(publishers[0].stopTracks).toHaveBeenCalled();
     publisherFactory.mockClear();
   });
@@ -428,30 +383,33 @@ describe("LocalMembership", () => {
     const scope = new ObservableScope();
 
     const connectionManagerData = new ConnectionManagerData();
-    const localTransport$ = new BehaviorSubject<null | LivekitTransportConfig>(
-      null,
-    );
+    const localTransport$ = new BehaviorSubject<null | LivekitTransport>(null);
     const connectionManagerData$ = new BehaviorSubject(
       new Epoch(connectionManagerData),
     );
     const publishers: Publisher[] = [];
 
+    const tracks$ = new BehaviorSubject<LocalTrack[]>([]);
     const publishing$ = new BehaviorSubject<boolean>(false);
     const createTrackResolver = Promise.withResolvers<void>();
     const publishResolver = Promise.withResolvers<void>();
     defaultCreateLocalMemberValues.createPublisherFactory.mockImplementation(
       () => {
         const p = {
-          // It is enought to check if destroy is called. Destroy itself is tested in the publisher to make sure it does
-          // all the cleanup we need.
-          destroy: vi.fn(),
+          stopPublishing: vi.fn(),
+          stopTracks: vi.fn().mockImplementation(() => {
+            logger.info("stopTracks");
+            tracks$.next([]);
+          }),
           createAndSetupTracks: vi.fn().mockImplementation(async () => {
             await createTrackResolver.promise;
+            tracks$.next([{}, {}] as LocalTrack[]);
           }),
           startPublishing: vi.fn().mockImplementation(async () => {
             await publishResolver.promise;
             publishing$.next(true);
           }),
+          tracks$,
           publishing$,
         };
         publishers.push(p as unknown as Publisher);
@@ -551,7 +509,7 @@ describe("LocalMembership", () => {
       (localMembership.localMemberState$.value as any).media,
     ).toStrictEqual(PublishState.Publishing);
 
-    expect(publishers[0].destroy).not.toHaveBeenCalled();
+    expect(publishers[0].stopPublishing).not.toHaveBeenCalled();
 
     expect(localMembership.localMemberState$.isStopped).toBe(false);
     scope.end();
@@ -562,7 +520,7 @@ describe("LocalMembership", () => {
       (localMembership.localMemberState$.value as any).media,
     ).toStrictEqual(PublishState.Publishing);
     // stop all tracks after ending scopes
-    expect(publishers[0].destroy).toHaveBeenCalled();
+    expect(publishers[0].stopPublishing).toHaveBeenCalled();
     // expect(publishers[0].stopTracks).toHaveBeenCalled();
   });
   // TODO add tests for matrix local matrix participation.

src/state/CallViewModel/localMember/LocalMember.ts

@@ -17,7 +17,6 @@ import { observeParticipantEvents } from "@livekit/components-core";
 import {
   Status as RTCSessionStatus,
   type LivekitTransport,
-  type LivekitTransportConfig,
   type MatrixRTCSession,
 } from "matrix-js-sdk/lib/matrixrtc";
 import {
@@ -37,7 +36,6 @@ import {
 } from "rxjs";
 import { type Logger } from "matrix-js-sdk/lib/logger";
 import { deepCompare } from "matrix-js-sdk/lib/utils";
-import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
 
 import { type Behavior } from "../../Behavior.ts";
 import { type IConnectionManager } from "../remoteMembers/ConnectionManager.ts";
@@ -125,9 +123,9 @@ interface Props {
   muteStates: MuteStates;
   connectionManager: IConnectionManager;
   createPublisherFactory: (connection: Connection) => Publisher;
-  joinMatrixRTC: (transport: LivekitTransportConfig) => void;
+  joinMatrixRTC: (transport: LivekitTransport) => void;
   homeserverConnected: HomeserverConnected;
-  localTransport$: Behavior<LivekitTransportConfig | null>;
+  localTransport$: Behavior<LivekitTransport | null>;
   matrixRTCSession: Pick<
     MatrixRTCSession,
     "updateCallIntent" | "leaveRoomSession"
@@ -146,7 +144,7 @@ interface Props {
  * @param props.createPublisherFactory Factory to create a publisher once we have a connection.
  * @param props.joinMatrixRTC Callback to join the matrix RTC session once we have a transport.
  * @param props.homeserverConnected The homeserver connected state.
- * @param props.localTransport$ The transport to advertise in our membership.
+ * @param props.localTransport$ The local transport to use for publishing.
  * @param props.logger The logger to use.
  * @param props.muteStates The mute states for video and audio.
  * @param props.matrixRTCSession The matrix RTC session to join.
@@ -200,7 +198,6 @@ export const createLocalMembership$ = ({
    * Fully connected
    */
   connected$: Behavior<boolean>;
-  internalLoggerRef: Logger;
 } => {
   const logger = parentLogger.getChild("[LocalMembership]");
   logger.debug(`Creating local membership..`);
@@ -265,11 +262,11 @@ export const createLocalMembership$ = ({
 
   mediaErrors$.pipe(scope.bind()).subscribe((error) => {
     if (error) {
-      // This is a MediaDevice error, can be PermissionDenied, NotFound, DeviceInUse, Other.
-      // Will also occurs if you cancel screen sharing browser prompt.
-      // This is not necessarily fatal, since the user might be able to join without media.
-      // XXX We might want to give some user feedback here to let them know their media is not working.
       logger.error(`Failed to create local tracks:`, error);
+      setMatrixError(
+        // TODO is it fatal? Do we need to create a new Specialized Error?
+        new UnknownCallError(new Error(`Media device error: ${error}`)),
+      );
     }
   });
   // MATRIX RELATED
@@ -309,17 +306,13 @@ export const createLocalMembership$ = ({
   //  - destruct all current streams
   //  - overwrite current publisher
   scope.reconcile(localConnection$, async (connection) => {
-    logger.info(
-      "reconcile based on new localConnection:",
-      connection?.transport.livekit_service_url,
-    );
     if (connection !== null) {
       const publisher = createPublisherFactory(connection);
       publisher$.next(publisher);
-
       // Clean-up callback
       return Promise.resolve(async (): Promise<void> => {
-        await publisher.destroy();
+        await publisher.stopPublishing();
+        await publisher.stopTracks();
       });
     }
   });
@@ -523,19 +516,12 @@ export const createLocalMembership$ = ({
       }
     });
 
-  muteStates.video.enabled$.pipe(scope.bind()).subscribe((videoEnabled) => {
-    void matrixRTCSession
-      .updateCallIntent(videoEnabled ? "video" : "audio")
-      .catch((e) => {
-        if (e instanceof Error && e.message === "Not connected yet") {
-          logger.debug(
-            "'not connected yet' while updating the call intent (this is expected on startup)",
-          );
-        } else {
-          throw e;
-        }
-      });
-  });
+  combineLatest([muteStates.video.enabled$, homeserverConnected.combined$])
+    .pipe(scope.bind())
+    .subscribe(([videoEnabled, connected]) => {
+      if (!connected) return;
+      void matrixRTCSession.updateCallIntent(videoEnabled ? "video" : "audio");
+    });
 
   // Keep matrix rtc session in sync with localTransport$, connectRequested$
   scope.reconcile(
@@ -565,12 +551,7 @@ export const createLocalMembership$ = ({
   );
 
   const participant$ = scope.behavior(
-    localConnection$.pipe(
-      map((c) => c?.livekitRoom?.localParticipant ?? null),
-      tap((p) => {
-        logger.debug("participant$ updated:", p?.identity);
-      }),
-    ),
+    localConnection$.pipe(map((c) => c?.livekitRoom?.localParticipant ?? null)),
   );
 
   // Pause upstream of all local media tracks when we're disconnected from
@@ -679,7 +660,6 @@ export const createLocalMembership$ = ({
     sharingScreen$,
     toggleScreenSharing,
     connection$: localConnection$,
-    internalLoggerRef: logger,
   };
 };
 
@@ -706,19 +686,18 @@ interface EnterRTCSessionOptions {
  *      - Handles retries (fails only after several attempts)
  *
  * @param rtcSession - The MatrixRTCSession to join.
- * @param ownMembershipIdentity - Options for entering the RTC session.
  * @param transport - The LivekitTransport to use for this session.
- * @param options - `encryptMedia`: Whether to encrypt media `matrixRTCMode`: The Matrix RTC mode to use.
+ * @param options - Options for entering the RTC session.
+ * @param options.encryptMedia - Whether to encrypt media.
+ * @param options.matrixRTCMode - The Matrix RTC mode to use.
  * @throws If the widget could not send ElementWidgetActions.JoinCall action.
  */
 // Exported for unit testing
 export function enterRTCSession(
   rtcSession: MatrixRTCSession,
-  ownMembershipIdentity: CallMembershipIdentityParts,
-  transport: LivekitTransportConfig,
-  options: EnterRTCSessionOptions,
+  transport: LivekitTransport,
+  { encryptMedia, matrixRTCMode }: EnterRTCSessionOptions,
 ): void {
-  const { encryptMedia, matrixRTCMode } = options;
   PosthogAnalytics.instance.eventCallEnded.cacheStartCall(new Date());
   PosthogAnalytics.instance.eventCallStarted.track(rtcSession.room.roomId);
 
@@ -730,29 +709,12 @@ export function enterRTCSession(
   const useDeviceSessionMemberEvents =
     features?.feature_use_device_session_member_events;
   const { sendNotificationType: notificationType, callIntent } = getUrlParams();
-  const multiSFU =
-    matrixRTCMode === MatrixRTCMode.Compatibility ||
-    matrixRTCMode === MatrixRTCMode.Matrix_2_0;
-
-  // For backwards compatibility with Element Call versions that do not do Matrix 2.0,
-  // we add the livekit alias to the transport.
-  let backwardCompatibleTransport: LivekitTransport | LivekitTransportConfig;
-  if (matrixRTCMode === MatrixRTCMode.Matrix_2_0) {
-    backwardCompatibleTransport = transport;
-  } else {
-    backwardCompatibleTransport = {
-      livekit_alias: rtcSession.room.roomId,
-      ...transport,
-    };
-  }
-
+  const multiSFU = matrixRTCMode !== MatrixRTCMode.Legacy;
   // Multi-sfu does not need a preferred foci list. just the focus that is actually used.
   // TODO where/how do we track errors originating from the ongoing rtcSession?
-
-  rtcSession.joinRTCSession(
-    ownMembershipIdentity,
-    multiSFU ? [] : [backwardCompatibleTransport],
-    multiSFU ? backwardCompatibleTransport : undefined,
+  rtcSession.joinRoomSession(
+    multiSFU ? [] : [transport],
+    multiSFU ? transport : undefined,
     {
       notificationType,
       callIntent,

src/state/CallViewModel/localMember/LocalTransport.test.ts

@@ -13,24 +13,15 @@ import {
   it,
   type MockedObject,
   vi,
-  type MockInstance,
 } from "vitest";
-import {
-  type CallMembership,
-  type LivekitTransportConfig,
-} from "matrix-js-sdk/lib/matrixrtc";
+import { type CallMembership } from "matrix-js-sdk/lib/matrixrtc";
 import { BehaviorSubject, lastValueFrom } from "rxjs";
 import fetchMock from "fetch-mock";
 
-import {
-  mockConfig,
-  flushPromises,
-  ownMemberMock,
-  mockRtcMembership,
-} from "../../../utils/test";
-import { createLocalTransport$, JwtEndpointVersion } from "./LocalTransport";
+import { mockConfig, flushPromises } from "../../../utils/test";
+import { createLocalTransport$ } from "./LocalTransport";
 import { constant } from "../../Behavior";
-import { Epoch, ObservableScope, trackEpoch } from "../../ObservableScope";
+import { Epoch, ObservableScope } from "../../ObservableScope";
 import {
   MatrixRTCTransportMissingError,
   FailToGetOpenIdToken,
@@ -43,40 +34,15 @@ describe("LocalTransport", () => {
   const openIdResponse: openIDSFU.SFUConfig = {
     url: "https://lk.example.org",
     jwt: testJWTToken,
-    livekitAlias: "Akph4alDMhen",
+    livekitAlias: "!example_room_id",
     livekitIdentity: "@lk_user:ABCDEF",
   };
 
   let scope: ObservableScope;
-  beforeEach(() => (scope = new ObservableScope()));
-  afterEach(() => scope.end());
-
-  it("throws if config is missing", async () => {
-    const { advertised$, active$ } = createLocalTransport$({
-      scope,
-      roomId: "!room:example.org",
-      useOldestMember: false,
-      memberships$: constant(new Epoch<CallMembership[]>([])),
-      client: {
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        _unstable_getRTCTransports: async () => Promise.resolve([]),
-        getDomain: () => "",
-        baseUrl: "example.org",
-        // These won't be called in this error path but satisfy the type
-        getOpenIdToken: vi.fn(),
-        getDeviceId: vi.fn(),
-      },
-      ownMembershipIdentity: ownMemberMock,
-      forceJwtEndpoint: JwtEndpointVersion.Legacy,
-      delayId$: constant("delay_id_mock"),
-    });
-    await flushPromises();
-
-    expect(() => advertised$.value).toThrow(
-      new MatrixRTCTransportMissingError(""),
-    );
-    expect(() => active$.value).toThrow(new MatrixRTCTransportMissingError(""));
+  beforeEach(() => {
+    scope = new ObservableScope();
   });
+  afterEach(() => scope.end());
 
   it("throws FailToGetOpenIdToken when OpenID fetch fails", async () => {
     // Provide a valid config so makeTransportInternal resolves a transport
@@ -93,13 +59,12 @@ describe("LocalTransport", () => {
     );
     const observations: unknown[] = [];
     const errors: Error[] = [];
-    const { advertised$, active$ } = createLocalTransport$({
+    const localTransport$ = createLocalTransport$({
       scope,
       roomId: "!example_room_id",
-      useOldestMember: false,
+      useOldestMember$: constant(false),
       memberships$: constant(new Epoch<CallMembership[]>([])),
       client: {
-        baseUrl: "https://lk.example.org",
         // Use empty domain to skip .well-known and use config directly
         getDomain: () => "",
         // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -107,11 +72,8 @@ describe("LocalTransport", () => {
         getOpenIdToken: vi.fn(),
         getDeviceId: vi.fn(),
       },
-      ownMembershipIdentity: ownMemberMock,
-      forceJwtEndpoint: JwtEndpointVersion.Legacy,
-      delayId$: constant("delay_id_mock"),
     });
-    active$.subscribe(
+    localTransport$.subscribe(
       (o) => observations.push(o),
       (e) => errors.push(e),
     );
@@ -121,182 +83,43 @@ describe("LocalTransport", () => {
     const expectedError = new FailToGetOpenIdToken(new Error("no openid"));
     expect(observations).toStrictEqual([null]);
     expect(errors).toStrictEqual([expectedError]);
-    expect(() => advertised$.value).toThrow(expectedError);
-    expect(() => active$.value).toThrow(expectedError);
+    expect(() => localTransport$.value).toThrow(expectedError);
   });
 
-  it("emits preferred transport after OpenID resolves", async () => {
+  it("updates local transport when oldest member changes", async () => {
     // Use config so transport discovery succeeds, but delay OpenID JWT fetch
     mockConfig({
       livekit: { livekit_service_url: "https://lk.example.org" },
     });
-
+    const memberships$ = new BehaviorSubject(new Epoch([]));
     const openIdResolver = Promise.withResolvers<openIDSFU.SFUConfig>();
 
     vi.spyOn(openIDSFU, "getSFUConfigWithOpenID").mockReturnValue(
       openIdResolver.promise,
     );
 
-    const { advertised$, active$ } = createLocalTransport$({
+    const localTransport$ = createLocalTransport$({
       scope,
-      roomId: "!room:example.org",
-      useOldestMember: false,
-      memberships$: constant(new Epoch<CallMembership[]>([])),
+      roomId: "!example_room_id",
+      useOldestMember$: constant(true),
+      memberships$,
       client: {
+        getDomain: () => "",
         // eslint-disable-next-line @typescript-eslint/naming-convention
         _unstable_getRTCTransports: async () => Promise.resolve([]),
-        getDomain: () => "",
         getOpenIdToken: vi.fn(),
         getDeviceId: vi.fn(),
-        baseUrl: "https://lk.example.org",
       },
-      ownMembershipIdentity: ownMemberMock,
-      forceJwtEndpoint: JwtEndpointVersion.Legacy,
-      delayId$: constant("delay_id_mock"),
     });
 
-    openIdResolver.resolve?.({
-      url: "https://lk.example.org",
-      jwt: "jwt",
-      livekitAlias: "Akph4alDMhen",
-      livekitIdentity: ownMemberMock.userId + ":" + ownMemberMock.deviceId,
-    });
-    expect(advertised$.value).toBe(null);
-    expect(active$.value).toBe(null);
+    openIdResolver.resolve?.(openIdResponse);
+    expect(localTransport$.value).toBe(null);
     await flushPromises();
     // final
-    const expectedTransport = {
+    expect(localTransport$.value).toStrictEqual({
+      livekit_alias: "!example_room_id",
       livekit_service_url: "https://lk.example.org",
       type: "livekit",
-    };
-    expect(advertised$.value).toStrictEqual(expectedTransport);
-    expect(active$.value).toStrictEqual({
-      transport: expectedTransport,
-      sfuConfig: {
-        jwt: "jwt",
-        livekitAlias: "Akph4alDMhen",
-        livekitIdentity: "@alice:example.org:DEVICE",
-        url: "https://lk.example.org",
-      },
-    });
-  });
-
-  describe("oldest member mode", () => {
-    const aliceTransport: LivekitTransportConfig = {
-      type: "livekit",
-      livekit_service_url: "https://alice.example.org",
-    };
-    const bobTransport: LivekitTransportConfig = {
-      type: "livekit",
-      livekit_service_url: "https://bob.example.org",
-    };
-    const aliceMembership = mockRtcMembership("@alice:example.org", "AAA", {
-      fociPreferred: [aliceTransport],
-    });
-    const bobMembership = mockRtcMembership("@bob:example.org", "BBB", {
-      fociPreferred: [bobTransport],
-    });
-
-    let openIdSpy: MockInstance<(typeof openIDSFU)["getSFUConfigWithOpenID"]>;
-    beforeEach(() => {
-      openIdSpy = vi
-        .spyOn(openIDSFU, "getSFUConfigWithOpenID")
-        .mockResolvedValue(openIdResponse);
-    });
-
-    it("updates active transport when oldest member changes", async () => {
-      // Initially, Alice is the only member
-      const memberships$ = new BehaviorSubject([aliceMembership]);
-
-      const { advertised$, active$ } = createLocalTransport$({
-        scope,
-        roomId: "!example_room_id",
-        useOldestMember: true,
-        memberships$: scope.behavior(memberships$.pipe(trackEpoch())),
-        client: {
-          getDomain: () => "",
-          // eslint-disable-next-line @typescript-eslint/naming-convention
-          _unstable_getRTCTransports: async () => Promise.resolve([]),
-          getOpenIdToken: vi.fn(),
-          getDeviceId: vi.fn(),
-          baseUrl: "https://lk.example.org",
-        },
-        ownMembershipIdentity: ownMemberMock,
-        forceJwtEndpoint: JwtEndpointVersion.Legacy,
-        delayId$: constant("delay_id_mock"),
-      });
-
-      expect(active$.value).toBe(null);
-      await flushPromises();
-      // SFU config should've been fetched
-      expect(openIdSpy).toHaveBeenCalled();
-      // Alice's transport should be active and advertised
-      expect(active$.value?.transport).toStrictEqual(aliceTransport);
-      expect(advertised$.value).toStrictEqual(aliceTransport);
-
-      // Now Bob joins the call, but Alice is still the oldest member
-      openIdSpy.mockClear();
-      memberships$.next([aliceMembership, bobMembership]);
-      await flushPromises();
-      // No new SFU config should've been fetched
-      expect(openIdSpy).not.toHaveBeenCalled();
-      // Alice's transport should still be active and advertised
-      expect(active$.value?.transport).toStrictEqual(aliceTransport);
-      expect(advertised$.value).toStrictEqual(aliceTransport);
-
-      // Now Bob takes Alice's place as the oldest member
-      openIdSpy.mockClear();
-      memberships$.next([bobMembership, aliceMembership]);
-      // Active transport should reset to null until we have Bob's SFU config
-      expect(active$.value).toStrictEqual(null);
-      await flushPromises();
-      // Bob's SFU config should've been fetched
-      expect(openIdSpy).toHaveBeenCalled();
-      // Bob's transport should be active, but Alice's should remain advertised
-      // (since we don't want the change in oldest member to cause a wave of new
-      // state events)
-      expect(active$.value?.transport).toStrictEqual(bobTransport);
-      expect(advertised$.value).toStrictEqual(aliceTransport);
-    });
-
-    it("advertises preferred transport when no other member exists", async () => {
-      // Initially, there are no members
-      const memberships$ = new BehaviorSubject<CallMembership[]>([]);
-
-      const { advertised$, active$ } = createLocalTransport$({
-        scope,
-        roomId: "!example_room_id",
-        useOldestMember: true,
-        memberships$: scope.behavior(memberships$.pipe(trackEpoch())),
-        client: {
-          getDomain: () => "",
-          // eslint-disable-next-line @typescript-eslint/naming-convention
-          _unstable_getRTCTransports: async () =>
-            Promise.resolve([aliceTransport]),
-          getOpenIdToken: vi.fn(),
-          getDeviceId: vi.fn(),
-          baseUrl: "https://lk.example.org",
-        },
-        ownMembershipIdentity: ownMemberMock,
-        forceJwtEndpoint: JwtEndpointVersion.Legacy,
-        delayId$: constant("delay_id_mock"),
-      });
-
-      expect(active$.value).toBe(null);
-      await flushPromises();
-      // Our own preferred transport should be advertised
-      expect(advertised$.value).toStrictEqual(aliceTransport);
-      // No transport should be active however (there is still no oldest member)
-      expect(active$.value).toBe(null);
-
-      // Now Bob joins the call and becomes the oldest member
-      memberships$.next([bobMembership]);
-      await flushPromises();
-      // We should still advertise our own preferred transport (to avoid
-      // unnecessary state changes)
-      expect(advertised$.value).toStrictEqual(aliceTransport);
-      // Bob's transport should become active
-      expect(active$.value?.transport).toBe(bobTransport);
     });
   });
 
@@ -311,15 +134,11 @@ describe("LocalTransport", () => {
       mockConfig({});
       customLivekitUrl.setValue(customLivekitUrl.defaultValue);
       localTransportOpts = {
-        ownMembershipIdentity: ownMemberMock,
         scope,
         roomId: "!example_room_id",
-        useOldestMember: false,
-        forceJwtEndpoint: JwtEndpointVersion.Legacy,
-        delayId$: constant(null),
+        useOldestMember$: constant(false),
         memberships$: constant(new Epoch<CallMembership[]>([])),
         client: {
-          baseUrl: "https://example.org",
           getDomain: vi.fn().mockReturnValue(""),
           // eslint-disable-next-line @typescript-eslint/naming-convention
           _unstable_getRTCTransports: vi.fn().mockResolvedValue([]),
@@ -341,75 +160,42 @@ describe("LocalTransport", () => {
       mockConfig({
         livekit: { livekit_service_url: "https://lk.example.org" },
       });
-      const { advertised$, active$ } =
-        createLocalTransport$(localTransportOpts);
+      const localTransport$ = createLocalTransport$(localTransportOpts);
       openIdResolver.resolve?.(openIdResponse);
-      expect(advertised$.value).toBe(null);
-      expect(active$.value).toBe(null);
+      expect(localTransport$.value).toBe(null);
       await flushPromises();
-      const expectedTransport = {
+      expect(localTransport$.value).toStrictEqual({
+        livekit_alias: "!example_room_id",
         livekit_service_url: "https://lk.example.org",
         type: "livekit",
-      };
-      expect(advertised$.value).toStrictEqual(expectedTransport);
-      expect(active$.value).toStrictEqual({
-        transport: expectedTransport,
-        sfuConfig: {
-          jwt: "e30=.eyJzdWIiOiJAbWU6ZXhhbXBsZS5vcmc6QUJDREVGIiwidmlkZW8iOnsicm9vbSI6IiFleGFtcGxlX3Jvb21faWQifX0=.e30=",
-          livekitAlias: "Akph4alDMhen",
-          livekitIdentity: "@lk_user:ABCDEF",
-          url: "https://lk.example.org",
-        },
       });
     });
-
     it("supports getting transport via user settings", async () => {
       customLivekitUrl.setValue("https://lk.example.org");
-      const { advertised$, active$ } =
-        createLocalTransport$(localTransportOpts);
+      const localTransport$ = createLocalTransport$(localTransportOpts);
       openIdResolver.resolve?.(openIdResponse);
-      expect(advertised$.value).toBe(null);
+      expect(localTransport$.value).toBe(null);
       await flushPromises();
-      expect(active$.value).toStrictEqual({
-        transport: {
-          livekit_service_url: "https://lk.example.org",
-          type: "livekit",
-        },
-        sfuConfig: {
-          jwt: "e30=.eyJzdWIiOiJAbWU6ZXhhbXBsZS5vcmc6QUJDREVGIiwidmlkZW8iOnsicm9vbSI6IiFleGFtcGxlX3Jvb21faWQifX0=.e30=",
-          livekitAlias: "Akph4alDMhen",
-          livekitIdentity: "@lk_user:ABCDEF",
-          url: "https://lk.example.org",
-        },
+      expect(localTransport$.value).toStrictEqual({
+        livekit_alias: "!example_room_id",
+        livekit_service_url: "https://lk.example.org",
+        type: "livekit",
       });
     });
-
     it("supports getting transport via backend", async () => {
       localTransportOpts.client._unstable_getRTCTransports.mockResolvedValue([
         { type: "livekit", livekit_service_url: "https://lk.example.org" },
       ]);
-      const { advertised$, active$ } =
-        createLocalTransport$(localTransportOpts);
+      const localTransport$ = createLocalTransport$(localTransportOpts);
       openIdResolver.resolve?.(openIdResponse);
-      expect(advertised$.value).toBe(null);
-      expect(active$.value).toBe(null);
+      expect(localTransport$.value).toBe(null);
       await flushPromises();
-      const expectedTransport = {
+      expect(localTransport$.value).toStrictEqual({
+        livekit_alias: "!example_room_id",
         livekit_service_url: "https://lk.example.org",
         type: "livekit",
-      };
-      expect(advertised$.value).toStrictEqual(expectedTransport);
-      expect(active$.value).toStrictEqual({
-        transport: expectedTransport,
-        sfuConfig: {
-          jwt: "e30=.eyJzdWIiOiJAbWU6ZXhhbXBsZS5vcmc6QUJDREVGIiwidmlkZW8iOnsicm9vbSI6IiFleGFtcGxlX3Jvb21faWQifX0=.e30=",
-          livekitAlias: "Akph4alDMhen",
-          livekitIdentity: "@lk_user:ABCDEF",
-          url: "https://lk.example.org",
-        },
       });
     });
-
     it("fails fast if the openID request fails for backend config", async () => {
       localTransportOpts.client._unstable_getRTCTransports.mockResolvedValue([
         { type: "livekit", livekit_service_url: "https://lk.example.org" },
@@ -417,11 +203,13 @@ describe("LocalTransport", () => {
       openIdResolver.reject(
         new FailToGetOpenIdToken(new Error("Test driven error")),
       );
-      await expect(async () =>
-        lastValueFrom(createLocalTransport$(localTransportOpts).active$),
-      ).rejects.toThrow(expect.any(FailToGetOpenIdToken));
+      try {
+        await lastValueFrom(createLocalTransport$(localTransportOpts));
+        throw Error("Expected test to throw");
+      } catch (ex) {
+        expect(ex).toBeInstanceOf(FailToGetOpenIdToken);
+      }
     });
-
     it("supports getting transport via well-known", async () => {
       localTransportOpts.client.getDomain.mockReturnValue("example.org");
       fetchMock.getOnce("https://example.org/.well-known/matrix/client", {
@@ -429,29 +217,17 @@ describe("LocalTransport", () => {
           { type: "livekit", livekit_service_url: "https://lk.example.org" },
         ],
       });
-      const { advertised$, active$ } =
-        createLocalTransport$(localTransportOpts);
+      const localTransport$ = createLocalTransport$(localTransportOpts);
       openIdResolver.resolve?.(openIdResponse);
-      expect(advertised$.value).toBe(null);
-      expect(active$.value).toBe(null);
+      expect(localTransport$.value).toBe(null);
       await flushPromises();
-      const expectedTransport = {
+      expect(localTransport$.value).toStrictEqual({
+        livekit_alias: "!example_room_id",
         livekit_service_url: "https://lk.example.org",
         type: "livekit",
-      };
-      expect(advertised$.value).toStrictEqual(expectedTransport);
-      expect(active$.value).toStrictEqual({
-        transport: expectedTransport,
-        sfuConfig: {
-          jwt: "e30=.eyJzdWIiOiJAbWU6ZXhhbXBsZS5vcmc6QUJDREVGIiwidmlkZW8iOnsicm9vbSI6IiFleGFtcGxlX3Jvb21faWQifX0=.e30=",
-          livekitAlias: "Akph4alDMhen",
-          livekitIdentity: "@lk_user:ABCDEF",
-          url: "https://lk.example.org",
-        },
       });
       expect(fetchMock.done()).toEqual(true);
     });
-
     it("fails fast if the openId request fails for the well-known config", async () => {
       localTransportOpts.client.getDomain.mockReturnValue("example.org");
       fetchMock.getOnce("https://example.org/.well-known/matrix/client", {
@@ -462,23 +238,21 @@ describe("LocalTransport", () => {
       openIdResolver.reject(
         new FailToGetOpenIdToken(new Error("Test driven error")),
       );
-      await expect(async () =>
-        lastValueFrom(createLocalTransport$(localTransportOpts).active$),
-      ).rejects.toThrow(expect.any(FailToGetOpenIdToken));
+      try {
+        await lastValueFrom(createLocalTransport$(localTransportOpts));
+        throw Error("Expected test to throw");
+      } catch (ex) {
+        expect(ex).toBeInstanceOf(FailToGetOpenIdToken);
+      }
     });
-
     it("throws if no options are available", async () => {
-      const { advertised$, active$ } = createLocalTransport$({
+      const localTransport$ = createLocalTransport$({
         scope,
-        ownMembershipIdentity: ownMemberMock,
         roomId: "!example_room_id",
-        useOldestMember: false,
-        forceJwtEndpoint: JwtEndpointVersion.Legacy,
-        delayId$: constant(null),
+        useOldestMember$: constant(false),
         memberships$: constant(new Epoch<CallMembership[]>([])),
         client: {
           getDomain: () => "",
-          baseUrl: "https://example.org",
           // eslint-disable-next-line @typescript-eslint/naming-convention
           _unstable_getRTCTransports: async () => Promise.resolve([]),
           // These won't be called in this error path but satisfy the type
@@ -488,10 +262,7 @@ describe("LocalTransport", () => {
       });
       await flushPromises();
 
-      expect(() => advertised$.value).toThrow(
-        new MatrixRTCTransportMissingError(""),
-      );
-      expect(() => active$.value).toThrow(
+      expect(() => localTransport$.value).toThrow(
         new MatrixRTCTransportMissingError(""),
       );
     });

src/state/CallViewModel/localMember/LocalTransport.ts

@@ -7,25 +7,22 @@ Please see LICENSE in the repository root for full details.
 
 import {
   type CallMembership,
+  isLivekitTransport,
+  type LivekitTransport,
   isLivekitTransportConfig,
   type Transport,
-  type LivekitTransportConfig,
 } from "matrix-js-sdk/lib/matrixrtc";
 import { MatrixError, type MatrixClient } from "matrix-js-sdk";
 import {
+  combineLatest,
   distinctUntilChanged,
   first,
   from,
   map,
-  merge,
-  of,
-  startWith,
   switchMap,
-  tap,
 } from "rxjs";
 import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
 import { AutoDiscovery } from "matrix-js-sdk/lib/autodiscovery";
-import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
 
 import { type Behavior } from "../../Behavior.ts";
 import { type Epoch, type ObservableScope } from "../../ObservableScope.ts";
@@ -33,11 +30,9 @@ import { Config } from "../../../config/Config.ts";
 import {
   FailToGetOpenIdToken,
   MatrixRTCTransportMissingError,
-  NoMatrix2AuthorizationService,
 } from "../../../utils/errors.ts";
 import {
   getSFUConfigWithOpenID,
-  type SFUConfig,
   type OpenIDClientParts,
 } from "../../../livekit/openIDSFU.ts";
 import { areLivekitTransportsEqual } from "../remoteMembers/MatrixLivekitMembers.ts";
@@ -52,237 +47,74 @@ const logger = rootLogger.getChild("[LocalTransport]");
  */
 interface Props {
   scope: ObservableScope;
-  ownMembershipIdentity: CallMembershipIdentityParts;
   memberships$: Behavior<Epoch<CallMembership[]>>;
-  client: Pick<
-    MatrixClient,
-    "getDomain" | "baseUrl" | "_unstable_getRTCTransports"
-  > &
+  client: Pick<MatrixClient, "getDomain" | "_unstable_getRTCTransports"> &
     OpenIDClientParts;
-  // Used by the jwt service to create the livekit room and compute the livekit alias.
   roomId: string;
-  useOldestMember: boolean;
-  forceJwtEndpoint: JwtEndpointVersion;
-  delayId$: Behavior<string | null>;
-}
-
-export enum JwtEndpointVersion {
-  Legacy = "legacy",
-  Matrix_2_0 = "matrix_2_0",
-}
-
-// TODO livekit_alias-cleanup
-// 1. We need to move away from transports map to connections!!!
-//
-// 2. We need to stop sending livekit_alias all together
-//
-//
-// 1.
-// Transports are just the jwt service adress but do not contain the information which room on this transport to use.
-// That requires slot and roomId.
-//
-// We need one connection per room on the transport.
-//
-// We need an object that contains:
-// transport
-// roomId
-// slotId
-//
-// To map to the connections. Prosposal: `ConnectionIdentifier`
-//
-// 2.
-// We need to make sure we do not sent livekit_alias in sticky events and that we drop all code for sending state events!
-export interface LocalTransportWithSFUConfig {
-  transport: LivekitTransportConfig;
-  sfuConfig: SFUConfig;
-}
-
-export function isLocalTransportWithSFUConfig(
-  obj: LivekitTransportConfig | LocalTransportWithSFUConfig,
-): obj is LocalTransportWithSFUConfig {
-  return "transport" in obj && "sfuConfig" in obj;
-}
-
-interface LocalTransport {
-  /**
-   * The transport to be advertised in our MatrixRTC membership. `null` when not
-   * yet fetched/validated.
-   */
-  advertised$: Behavior<LivekitTransportConfig | null>;
-  /**
-   * The transport to connect to and publish media on. `null` when not yet known
-   * or available.
-   */
-  active$: Behavior<LocalTransportWithSFUConfig | null>;
+  useOldestMember$: Behavior<boolean>;
 }
 
 /**
- * Connects to the JWT service and determines the transports that the local member should use.
+ * This class is responsible for managing the local transport.
+ * "Which transport is the local member going to use"
  *
  * @prop useOldestMember Whether to use the same transport as the oldest member.
  * This will only update once the first oldest member appears. Will not recompute if the oldest member leaves.
- * @prop useOldJwtEndpoint Whether to set forceOldJwtEndpoint on the returned transport and to use the old JWT endpoint.
- * This is used when the connection manager needs to know if it has to use the legacy endpoint which implies a string concatenated rtcBackendIdentity.
- * (which is expected for non sticky event based rtc member events)
- * @returns The transport to advertise in the local MatrixRTC membership, along with the transport to actively publish media to.
+ *
  * @throws MatrixRTCTransportMissingError | FailToGetOpenIdToken
  */
 export const createLocalTransport$ = ({
   scope,
   memberships$,
-  ownMembershipIdentity,
   client,
   roomId,
-  useOldestMember,
-  forceJwtEndpoint,
-  delayId$,
-}: Props): LocalTransport => {
+  useOldestMember$,
+}: Props): Behavior<LivekitTransport | null> => {
   /**
-   * The LiveKit transport in use by the oldest RTC membership. `null` when the
-   * oldest member has no such transport.
+   * The transport over which we should be actively publishing our media.
+   * undefined when not joined.
    */
-  const oldestMemberTransport$ = scope.behavior<LivekitTransportConfig | null>(
+  const oldestMemberTransport$ = scope.behavior(
     memberships$.pipe(
-      map((memberships) => {
-        const oldestMember = memberships.value[0];
-        if (oldestMember === undefined) {
-          logger.info("Oldest member: not found");
-          return null;
-        }
-        const transport = oldestMember.getTransport(oldestMember);
-        if (transport === undefined) {
-          logger.warn(
-            `Oldest member: ${oldestMember.userId}|${oldestMember.deviceId}|${oldestMember.memberId} has no transport`,
-          );
-          return null;
-        }
-        if (!isLivekitTransportConfig(transport)) {
-          logger.warn(
-            `Oldest member: ${oldestMember.userId}|${oldestMember.deviceId}|${oldestMember.memberId} has invalid transport`,
-          );
-          return null;
-        }
-        logger.info(
-          "Oldest member: ${oldestMember.userId}|${oldestMember.deviceId}|${oldestMember.memberId} has valid transport",
-        );
-        return transport;
-      }),
-      distinctUntilChanged(areLivekitTransportsEqual),
+      map(
+        (memberships) =>
+          memberships.value[0]?.getTransport(memberships.value[0]) ?? null,
+      ),
+      first((t) => t != null && isLivekitTransport(t)),
     ),
+    null,
   );
 
   /**
    * The transport that we would personally prefer to publish on (if not for the
-   * transport preferences of others, perhaps). `null` until fetched and
-   * validated.
+   * transport preferences of others, perhaps).
    *
    * @throws MatrixRTCTransportMissingError | FailToGetOpenIdToken
    */
-  const preferredTransport$ =
-    scope.behavior<LocalTransportWithSFUConfig | null>(
-      // preferredTransport$ (used for multi sfu) needs to know if we are using the old or new
-      // jwt endpoint (`get_token` vs `sfu/get`) based on that the jwt endpoint will compute the rtcBackendIdentity
-      // differently. (sha(`${userId}|${deviceId}|${memberId}`) vs `${userId}|${deviceId}|${memberId}`)
-      // When using sticky events (we need to use the new endpoint).
-      customLivekitUrl.value$.pipe(
-        switchMap((customUrl) =>
-          startWith<LocalTransportWithSFUConfig | null>(null)(
-            // Fetch the SFU config, and repeat this asynchronously for every
-            // change in delay ID.
-            delayId$.pipe(
-              switchMap(async (delayId) => {
-                logger.info(
-                  "Creating preferred transport based on: ",
-                  "customUrl: ",
-                  customUrl,
-                  "delayId: ",
-                  delayId,
-                  "forceJwtEndpoint: ",
-                  forceJwtEndpoint,
-                );
-                return makeTransport(
-                  client,
-                  ownMembershipIdentity,
-                  roomId,
-                  customUrl,
-                  forceJwtEndpoint,
-                  delayId ?? undefined,
-                );
-              }),
-              // We deliberately hide any changes to the SFU config because we
-              // do not actually want the app to reconnect whenever the JWT
-              // token changes due to us delegating a new delayed event. The
-              // initial SFU config for the transport is all the app needs.
-              distinctUntilChanged((prev, next) =>
-                areLivekitTransportsEqual(prev.transport, next.transport),
-              ),
-            ),
-          ),
-        ),
-      ),
-    );
-
-  if (useOldestMember) {
-    // --- Oldest member mode ---
-    return {
-      // Never update the transport that we advertise in our membership. Just
-      // take the first valid oldest member or preferred transport that we learn
-      // about, and stick with that. This avoids unnecessary SFU hops and room
-      // state changes.
-      advertised$: scope.behavior(
-        merge(
-          oldestMemberTransport$,
-          preferredTransport$.pipe(map((t) => t?.transport ?? null)),
-        ).pipe(
-          first((t) => t !== null),
-          tap((t) =>
-            logger.info(`Advertise transport: ${t.livekit_service_url}`),
-          ),
-        ),
-        null,
-      ),
-      // Publish on the transport used by the oldest member.
-      active$: scope.behavior(
-        oldestMemberTransport$.pipe(
-          switchMap((transport) => {
-            // Oldest member not available (or invalid SFU config).
-            if (transport === null) return of(null);
-            // Oldest member available: fetch the SFU config.
-            const fetchOldestMemberTransport =
-              async (): Promise<LocalTransportWithSFUConfig> => ({
-                transport,
-                sfuConfig: await getSFUConfigWithOpenID(
-                  client,
-                  ownMembershipIdentity,
-                  transport.livekit_service_url,
-                  roomId,
-                  { forceJwtEndpoint: JwtEndpointVersion.Legacy },
-                  logger,
-                ),
-              });
-            return from(fetchOldestMemberTransport()).pipe(startWith(null));
-          }),
-          tap((t) =>
-            logger.info(
-              `Publish on transport: ${t?.transport.livekit_service_url}`,
-            ),
-          ),
-        ),
-      ),
-    };
-  }
-
-  // --- Multi-SFU mode ---
-  // Always publish on and advertise the preferred transport.
-  return {
-    advertised$: scope.behavior(
-      preferredTransport$.pipe(
-        map((t) => t?.transport ?? null),
-        distinctUntilChanged(areLivekitTransportsEqual),
-      ),
+  const preferredTransport$: Behavior<LivekitTransport | null> = scope.behavior(
+    customLivekitUrl.value$.pipe(
+      switchMap((customUrl) => from(makeTransport(client, roomId, customUrl))),
     ),
-    active$: preferredTransport$,
-  };
+    null,
+  );
+
+  /**
+   * The chosen transport we should advertise in our MatrixRTC membership.
+   */
+  return scope.behavior(
+    combineLatest([
+      useOldestMember$,
+      oldestMemberTransport$,
+      preferredTransport$,
+    ]).pipe(
+      map(([useOldestMember, oldestMemberTransport, preferredTransport]) =>
+        useOldestMember
+          ? (oldestMemberTransport ?? preferredTransport)
+          : preferredTransport,
+      ),
+      distinctUntilChanged(areLivekitTransportsEqual),
+    ),
+  );
 };
 
 const FOCI_WK_KEY = "org.matrix.msc4143.rtc_foci";
@@ -292,62 +124,25 @@ const FOCI_WK_KEY = "org.matrix.msc4143.rtc_foci";
  * validating auth against the service to ensure it's correct.
  * Prefers in order:
  *
-
  * 1. The `urlFromDevSettings` value. If this cannot be validated, the function will throw.
  * 2. The transports returned via the homeserver.
  * 3. The transports returned via .well-known.
  * 4. The transport configured in Element Call's config.
  *
  * @param client The authenticated Matrix client for the current user
- * @param membership The membership identity of the user.
  * @param roomId The ID of the room to be connected to.
  * @param urlFromDevSettings Override URL provided by the user's local config.
- * @param forceJwtEndpoint Whether to force a specific JWT endpoint
- *  - `Legacy` / `Matrix_2_0`
- *  - `get_token` / `sfu/get`
- *  -  not hashing / hashing the backendIdentity
- * @param delayId the delay id passed to the jwt service.
- *
  * @returns A fully validated transport config.
  * @throws MatrixRTCTransportMissingError | FailToGetOpenIdToken
  */
 async function makeTransport(
-  client: Pick<
-    MatrixClient,
-    "getDomain" | "baseUrl" | "_unstable_getRTCTransports"
-  > &
+  client: Pick<MatrixClient, "getDomain" | "_unstable_getRTCTransports"> &
     OpenIDClientParts,
-  membership: CallMembershipIdentityParts,
   roomId: string,
   urlFromDevSettings: string | null,
-  forceJwtEndpoint: JwtEndpointVersion,
-  delayId?: string,
-): Promise<LocalTransportWithSFUConfig> {
+): Promise<LivekitTransport> {
   logger.trace("Searching for a preferred transport");
 
-  async function doOpenIdAndJWTFromUrl(
-    url: string,
-  ): Promise<LocalTransportWithSFUConfig> {
-    const sfuConfig = await getSFUConfigWithOpenID(
-      client,
-      membership,
-      url,
-      roomId,
-      {
-        forceJwtEndpoint: forceJwtEndpoint,
-        delayEndpointBaseUrl: client.baseUrl,
-        delayId,
-      },
-      logger,
-    );
-    return {
-      transport: {
-        type: "livekit",
-        livekit_service_url: url,
-      },
-      sfuConfig,
-    };
-  }
   // We will call `getSFUConfigWithOpenID` once per transport here as it's our
   // only mechanism of valiation. This means we will also ask the
   // homeserver for a OpenID token a few times. Since OpenID tokens are single
@@ -358,29 +153,39 @@ async function makeTransport(
 
   // DEVTOOL: Highest priority: Load from devtool setting
   if (urlFromDevSettings !== null) {
+    logger.info("Using LiveKit transport from dev tools: ", urlFromDevSettings);
     // Validate that the SFU is up. Otherwise, we want to fail on this
     // as we don't permit other SFUs.
-    // This will call the jwt/sfu/get endpoint to pre create the livekit room.
-    logger.info("Using LiveKit transport from dev tools: ", urlFromDevSettings);
-    return await doOpenIdAndJWTFromUrl(urlFromDevSettings);
+    const config = await getSFUConfigWithOpenID(
+      client,
+      urlFromDevSettings,
+      roomId,
+    );
+    return {
+      type: "livekit",
+      livekit_service_url: urlFromDevSettings,
+      livekit_alias: config.livekitAlias,
+    };
   }
 
   async function getFirstUsableTransport(
     transports: Transport[],
-  ): Promise<LocalTransportWithSFUConfig | null> {
+  ): Promise<LivekitTransport | null> {
     for (const potentialTransport of transports) {
       if (isLivekitTransportConfig(potentialTransport)) {
         try {
-          // This will call the jwt/sfu/get endpoint to pre create the livekit room.
-          return await doOpenIdAndJWTFromUrl(
+          const { livekitAlias } = await getSFUConfigWithOpenID(
+            client,
             potentialTransport.livekit_service_url,
+            roomId,
           );
+          return {
+            ...potentialTransport,
+            livekit_alias: livekitAlias,
+          };
         } catch (ex) {
-          // Explictly throw these
           if (ex instanceof FailToGetOpenIdToken) {
-            throw ex;
-          }
-          if (ex instanceof NoMatrix2AuthorizationService) {
+            // Explictly throw these
             throw ex;
           }
           logger.debug(
@@ -396,22 +201,17 @@ async function makeTransport(
   // MSC4143: Attempt to fetch transports from backend.
   if ("_unstable_getRTCTransports" in client) {
     try {
-      const transportList = await client._unstable_getRTCTransports();
-      const selectedTransport = await getFirstUsableTransport(transportList);
+      const selectedTransport = await getFirstUsableTransport(
+        await client._unstable_getRTCTransports(),
+      );
       if (selectedTransport) {
-        logger.info(
-          "Using backend-configured (client.getRTCTransports) SFU",
-          selectedTransport,
-        );
+        logger.info("Using backend-configured SFU", selectedTransport);
         return selectedTransport;
       }
     } catch (ex) {
       if (ex instanceof MatrixError && ex.httpStatus === 404) {
         // Expected, this is an unstable endpoint and it's not required.
-        // There will be expected 404 errors in the console. When we check if synapse supports the endpoint.
-        logger.debug(
-          "Matrix homeserver does not provide any RTC transports via `/rtc/transports` (will retry with well-known.)",
-        );
+        logger.debug("Backend does not provide any RTC transports", ex);
       } else if (ex instanceof FailToGetOpenIdToken) {
         throw ex;
       } else {
@@ -445,9 +245,18 @@ async function makeTransport(
   const urlFromConf = Config.get().livekit?.livekit_service_url;
   if (urlFromConf) {
     try {
-      // This will call the jwt/sfu/get endpoint to pre create the livekit room.
-      logger.info("Using config SFU", urlFromConf);
-      return await doOpenIdAndJWTFromUrl(urlFromConf);
+      const { livekitAlias } = await getSFUConfigWithOpenID(
+        client,
+        urlFromConf,
+        roomId,
+      );
+      const selectedTransport: LivekitTransport = {
+        type: "livekit",
+        livekit_service_url: urlFromConf,
+        livekit_alias: livekitAlias,
+      };
+      logger.info("Using config SFU", selectedTransport);
+      return selectedTransport;
     } catch (ex) {
       if (ex instanceof FailToGetOpenIdToken) {
         throw ex;
@@ -456,6 +265,5 @@ async function makeTransport(
     }
   }
 
-  // If we do not have returned a transport by now we throw an error
   throw new MatrixRTCTransportMissingError(domain ?? "");
 }

src/state/CallViewModel/localMember/Publisher.test.ts

@@ -183,6 +183,7 @@ describe("Publisher", () => {
 
   beforeEach(() => {
     publisher = new Publisher(
+      scope,
       connection,
       mockMediaDevices({}),
       muteStates,
@@ -191,9 +192,7 @@ describe("Publisher", () => {
     );
   });
 
-  afterEach(async () => {
-    await publisher.destroy();
-  });
+  afterEach(() => {});
 
   it("Should not create tracks if started muted to avoid unneeded permission requests", async () => {
     const createTracksSpy = vi.spyOn(
@@ -208,38 +207,6 @@ describe("Publisher", () => {
     expect(createTracksSpy).not.toHaveBeenCalled();
   });
 
-  it("should unsetHandler and stop tracks on destroy", async () => {
-    // setup all spies
-    const unsetVideoSpy = vi.spyOn(
-      (
-        publisher as unknown as {
-          muteStates: { video: { unsetHandler: () => void } };
-        }
-      ).muteStates.video,
-      "unsetHandler",
-    );
-    const unsetAudioSpy = vi.spyOn(
-      (
-        publisher as unknown as {
-          muteStates: { audio: { unsetHandler: () => void } };
-        }
-      ).muteStates.audio,
-      "unsetHandler",
-    );
-    const scopeEndSpy = vi.spyOn(
-      (publisher as unknown as { scope: { end: () => void } }).scope,
-      "end",
-    );
-    const stopTracksSpy = vi.spyOn(publisher, "stopTracks");
-    // destroy publisher
-    await publisher.destroy();
-
-    expect(stopTracksSpy).toHaveBeenCalledOnce();
-    expect(unsetVideoSpy).toHaveBeenCalledOnce();
-    expect(unsetAudioSpy).toHaveBeenCalledOnce();
-    expect(scopeEndSpy).toHaveBeenCalled();
-  });
-
   it("Should minimize permission request by querying create at once", async () => {
     const enableCameraAndMicrophoneSpy = vi.spyOn(
       localParticipant,
@@ -300,6 +267,7 @@ describe("Publisher", () => {
     let publisher: Publisher;
     beforeEach(() => {
       publisher = new Publisher(
+        scope,
         connection,
         mockMediaDevices({}),
         muteStates,
@@ -307,9 +275,6 @@ describe("Publisher", () => {
         logger,
       );
     });
-    afterEach(async () => {
-      await publisher.destroy();
-    });
 
     test.each([
       { mutes: { audioEnabled: true, videoEnabled: false } },
@@ -355,6 +320,7 @@ describe("Bug fix", () => {
   it("wrongly publish tracks while muted", async () => {
     // setLogLevel(`debug`);
     const publisher = new Publisher(
+      scope,
       connection,
       mockMediaDevices({}),
       muteStates,
@@ -390,6 +356,5 @@ describe("Bug fix", () => {
       expect(track!.mute).toHaveBeenCalled();
       expect(track!.isMuted).toBe(true);
     }
-    await publisher.destroy();
   });
 });

src/state/CallViewModel/localMember/Publisher.ts

@@ -30,9 +30,9 @@ import {
   trackProcessorSync,
 } from "../../../livekit/TrackProcessorContext.tsx";
 import { getUrlParams } from "../../../UrlParams.ts";
-import { observeTrackReference$ } from "../../observeTrackReference";
+import { observeTrackReference$ } from "../../MediaViewModel.ts";
 import { type Connection } from "../remoteMembers/Connection.ts";
-import { ObservableScope } from "../../ObservableScope.ts";
+import { type ObservableScope } from "../../ObservableScope.ts";
 
 /**
  * A wrapper for a Connection object.
@@ -47,10 +47,9 @@ export class Publisher {
    */
   public shouldPublish = false;
 
-  private readonly scope = new ObservableScope();
-
   /**
    * Creates a new Publisher.
+   * @param scope - The observable scope to use for managing the publisher.
    * @param connection - The connection to use for publishing.
    * @param devices - The media devices to use for audio and video input.
    * @param muteStates - The mute states for audio and video.
@@ -58,6 +57,7 @@ export class Publisher {
    * @param logger - The logger to use for logging :D.
    */
   public constructor(
+    private scope: ObservableScope,
     private connection: Pick<Connection, "livekitRoom" | "state$">, //setE2EEEnabled,
     devices: MediaDevices,
     private readonly muteStates: MuteStates,
@@ -65,6 +65,7 @@ export class Publisher {
     private logger: Logger,
   ) {
     const { controlledAudioDevices } = getUrlParams();
+
     const room = connection.livekitRoom;
 
     room.setE2EEEnabled(room.options.e2ee !== undefined)?.catch((e: Error) => {
@@ -72,11 +73,17 @@ export class Publisher {
     });
 
     // Setup track processor syncing (blur)
-    this.observeTrackProcessors(this.scope, room, trackerProcessorState$);
+    this.observeTrackProcessors(scope, room, trackerProcessorState$);
     // Observe media device changes and update LiveKit active devices accordingly
-    this.observeMediaDevices(this.scope, devices, controlledAudioDevices);
+    this.observeMediaDevices(scope, devices, controlledAudioDevices);
 
-    this.workaroundRestartAudioInputTrackChrome(devices, this.scope);
+    this.workaroundRestartAudioInputTrackChrome(devices, scope);
+    this.scope.onEnd(() => {
+      this.logger.info("Scope ended -> stop publishing all tracks");
+      void this.stopPublishing();
+      muteStates.audio.unsetHandler();
+      muteStates.video.unsetHandler();
+    });
 
     this.connection.livekitRoom.localParticipant.on(
       ParticipantEvent.LocalTrackPublished,
@@ -84,21 +91,6 @@ export class Publisher {
     );
   }
 
-  public async destroy(): Promise<void> {
-    this.scope.end();
-    this.logger.info("Scope ended -> unset handler");
-    this.muteStates.audio.unsetHandler();
-    this.muteStates.video.unsetHandler();
-
-    this.logger.info(`Start to stop tracks`);
-    try {
-      await this.stopTracks();
-      this.logger.info(`Done to stop tracks`);
-    } catch (e) {
-      this.logger.error(`Failed to stop tracks: ${e}`);
-    }
-  }
-
   // LiveKit will publish the tracks as soon as they are created
   // but we want to control when tracks are published.
   // We cannot just mute the tracks, even if this will effectively stop the publishing,

src/state/CallViewModel/remoteMembers/Connection.test.ts

@@ -26,8 +26,8 @@ import fetchMock from "fetch-mock";
 import EventEmitter from "events";
 import { type IOpenIDToken } from "matrix-js-sdk";
 import { logger } from "matrix-js-sdk/lib/logger";
-import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
 
+import type { LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
 import {
   Connection,
   ConnectionState,
@@ -40,7 +40,7 @@ import {
   FailToGetOpenIdToken,
 } from "../../../utils/errors.ts";
 import { testJWTToken } from "../../../utils/test-fixtures.ts";
-import { mockRemoteParticipant, ownMemberMock } from "../../../utils/test.ts";
+import { mockRemoteParticipant } from "../../../utils/test.ts";
 
 let testScope: ObservableScope;
 
@@ -51,9 +51,8 @@ let fakeLivekitRoom: MockedObject<LivekitRoom>;
 let localParticipantEventEmiter: EventEmitter;
 let fakeLocalParticipant: MockedObject<LocalParticipant>;
 
-const ROOM_ID = "!roomID:example.org";
-
-const livekitFocus: LivekitTransportConfig = {
+const livekitFocus: LivekitTransport = {
+  livekit_alias: "!roomID:example.org",
   livekit_service_url: "https://matrix-rtc.example.org/livekit/jwt",
   type: "livekit",
 };
@@ -113,10 +112,8 @@ function setupTest(): void {
 function setupRemoteConnection(): Connection {
   const opts: ConnectionOpts = {
     client: client,
-    roomId: ROOM_ID,
     transport: livekitFocus,
     scope: testScope,
-    ownMembershipIdentity: ownMemberMock,
     livekitRoomFactory: () => fakeLivekitRoom,
   };
 
@@ -156,10 +153,8 @@ describe("Start connection states", () => {
 
     const opts: ConnectionOpts = {
       client: client,
-      roomId: ROOM_ID,
       transport: livekitFocus,
       scope: testScope,
-      ownMembershipIdentity: ownMemberMock,
       livekitRoomFactory: () => fakeLivekitRoom,
     };
     const connection = new Connection(opts, logger);
@@ -173,10 +168,8 @@ describe("Start connection states", () => {
 
     const opts: ConnectionOpts = {
       client: client,
-      roomId: ROOM_ID,
       transport: livekitFocus,
       scope: testScope,
-      ownMembershipIdentity: ownMemberMock,
       livekitRoomFactory: () => fakeLivekitRoom,
     };
 
@@ -225,10 +218,8 @@ describe("Start connection states", () => {
 
     const opts: ConnectionOpts = {
       client: client,
-      roomId: ROOM_ID,
       transport: livekitFocus,
       scope: testScope,
-      ownMembershipIdentity: ownMemberMock,
       livekitRoomFactory: () => fakeLivekitRoom,
     };
 
@@ -268,7 +259,7 @@ describe("Start connection states", () => {
       capturedState.cause instanceof Error
     ) {
       expect(capturedState.cause.message).toContain(
-        "SFU Config fetch failed with status code 500",
+        "SFU Config fetch failed with exception",
       );
       expect(connection.transport.livekit_alias).toEqual(
         livekitFocus.livekit_alias,
@@ -284,10 +275,8 @@ describe("Start connection states", () => {
 
     const opts: ConnectionOpts = {
       client: client,
-      roomId: ROOM_ID,
       transport: livekitFocus,
       scope: testScope,
-      ownMembershipIdentity: ownMemberMock,
       livekitRoomFactory: () => fakeLivekitRoom,
     };
 

src/state/CallViewModel/remoteMembers/Connection.ts

@@ -15,10 +15,9 @@ import {
   type Room as LivekitRoom,
   type RemoteParticipant,
 } from "livekit-client";
-import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
+import { type LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
 import { BehaviorSubject, map } from "rxjs";
 import { type Logger } from "matrix-js-sdk/lib/logger";
-import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
 
 import {
   getSFUConfigWithOpenID,
@@ -33,27 +32,12 @@ import {
   SFURoomCreationRestrictedError,
   UnknownCallError,
 } from "../../../utils/errors.ts";
-import { type JwtEndpointVersion } from "../localMember/LocalTransport.ts";
 
 export interface ConnectionOpts {
-  /**
-   * For the local transport we already do know the jwt token and url. We can reuse it.
-   * On top the local transport will send additional data to the jwt server to use delayed event delegation.
-   */
-  existingSFUConfig?: SFUConfig;
-  /**
-   * For local connections that use the oldest member pattern. here we have not prefetched the sfuConfig
-   * and hence we need to let the connection do the jwt token fetching.
-   */
-  forceJwtEndpoint?: JwtEndpointVersion;
-  /** The identity parts to use on this connection */
-  ownMembershipIdentity: CallMembershipIdentityParts;
   /** The media transport to connect to. */
-  transport: LivekitTransportConfig;
+  transport: LivekitTransport;
   /** The Matrix client to use for OpenID and SFU config requests. */
   client: OpenIDClientParts;
-  /** The room ID this connection is associated with. */
-  roomId: string;
   /** The observable scope to use for this connection. */
   scope: ObservableScope;
 
@@ -104,7 +88,7 @@ export class Connection {
   /**
    * The media transport to connect to.
    */
-  public readonly transport: LivekitTransportConfig;
+  public readonly transport: LivekitTransport;
 
   public readonly livekitRoom: LivekitRoom;
 
@@ -119,61 +103,12 @@ export class Connection {
    */
   public readonly remoteParticipants$: Behavior<RemoteParticipant[]>;
 
-  /**
-   * The alias of the LiveKit room.
-   */
-  public get livekitAlias(): string | undefined {
-    return this._livekitAlias;
-  }
-  private _livekitAlias?: string;
-
   /**
    * Whether the connection has been stopped.
    * @see Connection.stop
    * */
   protected stopped = false;
 
-  // TODO: can we just keep the ConnectionOpts object instead of spreading?
-  private readonly client: OpenIDClientParts;
-  private readonly roomId: string;
-  private readonly logger: Logger;
-  private readonly ownMembershipIdentity: CallMembershipIdentityParts;
-  private readonly existingSFUConfig?: SFUConfig;
-  /**
-   * Creates a new connection to a matrix RTC LiveKit backend.
-   *
-   * @param opts - Connection options {@link ConnectionOpts}.
-   *
-   * @param logger - The logger to use.
-   */
-  public constructor(opts: ConnectionOpts, logger: Logger) {
-    this.ownMembershipIdentity = opts.ownMembershipIdentity;
-    this.existingSFUConfig = opts.existingSFUConfig;
-    this.roomId = opts.roomId;
-    this.logger = logger.getChild(
-      "[Connection " + opts.transport.livekit_service_url + "]",
-    );
-    this.logger.info(
-      `constructor: ${opts.transport.livekit_service_url} roomId: ${this.roomId} withSfuConfig?: ${opts.existingSFUConfig ? JSON.stringify(opts.existingSFUConfig) : "undefined"}`,
-    );
-    const { transport, client, scope } = opts;
-
-    this.scope = scope;
-    this.livekitRoom = opts.livekitRoomFactory();
-    this.transport = transport;
-    this.client = client;
-
-    this.remoteParticipants$ = scope.behavior(
-      // Only tracks remote participants
-      connectedParticipantsObserver(this.livekitRoom),
-    );
-
-    scope.onEnd(() => {
-      this.logger.info(`Connection scope ended, stopping connection`);
-      void this.stop();
-    });
-  }
-
   /**
    * Starts the connection.
    *
@@ -194,21 +129,8 @@ export class Connection {
     try {
       this._state$.next(ConnectionState.FetchingConfig);
       // We should already have this information after creating the localTransport.
-      // only call getSFUConfigWithOpenID for connections where we do not have a token yet. (existingJwtTokenData === undefined)
-      const { url, jwt, livekitAlias } =
-        this.existingSFUConfig ??
-        (await this.getSFUConfigForRemoteConnection());
-      this.logger.debug(
-        "Starting Connection to: ",
-        this.transport.livekit_service_url,
-        "jwt: ",
-        jwt,
-        "wss: ",
-        url,
-        "livekitAlias: ",
-        livekitAlias,
-      );
-      this._livekitAlias = livekitAlias;
+      // It would probably be better to forward this here.
+      const { url, jwt } = await this.getSFUConfigWithOpenID();
       // If we were stopped while fetching the config, don't proceed to connect
       if (this.stopped) return;
 
@@ -224,11 +146,8 @@ export class Connection {
         });
 
       try {
-        this.logger.info(`livekitRoom.connect ${url}`);
         await this.livekitRoom.connect(url, jwt);
-        this.logger.info(`livekitRoom.connect SUCCESS ${url}`);
       } catch (e) {
-        this.logger.info(`livekitRoom.connect FAILED ${url}`, e);
         // LiveKit uses 503 to indicate that the server has hit its track limits.
         // https://github.com/livekit/livekit/blob/fcb05e97c5a31812ecf0ca6f7efa57c485cea9fb/pkg/service/rtcservice.go#L171
         // It also errors with a status code of 200 (yes, really) for room
@@ -267,17 +186,11 @@ export class Connection {
     }
   }
 
-  protected async getSFUConfigForRemoteConnection(): Promise<SFUConfig> {
-    // This will only be called for sfu's where we do not publish ourselves.
-    // For the local connection we will use the existingJwtTokenData
+  protected async getSFUConfigWithOpenID(): Promise<SFUConfig> {
     return await getSFUConfigWithOpenID(
       this.client,
-      this.ownMembershipIdentity,
       this.transport.livekit_service_url,
-      this.roomId,
-      // dont pass any custom opts for the subscribe only connections
-      {},
-      this.logger,
+      this.transport.livekit_alias,
     );
   }
 
@@ -289,14 +202,44 @@ export class Connection {
    */
   public async stop(): Promise<void> {
     this.logger.debug(
-      `stop: disconnecing from lk room ${this.transport.livekit_service_url}`,
+      `Stopping connection to ${this.transport.livekit_service_url}`,
     );
     if (this.stopped) return;
     await this.livekitRoom.disconnect();
     this._state$.next(ConnectionState.Stopped);
     this.stopped = true;
-    this.logger.debug(
-      `stop: DONE disconnecing from lk room ${this.transport.livekit_service_url}`,
+  }
+
+  private readonly client: OpenIDClientParts;
+  private readonly logger: Logger;
+
+  /**
+   * Creates a new connection to a matrix RTC LiveKit backend.
+   *
+   * @param opts - Connection options {@link ConnectionOpts}.
+   *
+   * @param logger - The logger to use.
+   */
+  public constructor(opts: ConnectionOpts, logger: Logger) {
+    this.logger = logger.getChild("[Connection]");
+    this.logger.info(
+      `Creating new connection to ${opts.transport.livekit_service_url} ${opts.transport.livekit_alias}`,
     );
+    const { transport, client, scope } = opts;
+
+    this.scope = scope;
+    this.livekitRoom = opts.livekitRoomFactory();
+    this.transport = transport;
+    this.client = client;
+
+    this.remoteParticipants$ = scope.behavior(
+      // Only tracks remote participants
+      connectedParticipantsObserver(this.livekitRoom),
+    );
+
+    scope.onEnd(() => {
+      this.logger.info(`Connection scope ended, stopping connection`);
+      void this.stop();
+    });
   }
 }

src/state/CallViewModel/remoteMembers/ConnectionFactory.ts

@@ -5,6 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
+import { type LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
 import {
   Room as LivekitRoom,
   type RoomOptions,
@@ -15,15 +16,10 @@ import {
 import { type Logger } from "matrix-js-sdk/lib/logger";
 // imported as inline to support worker when loaded from a cdn (cross domain)
 import E2EEWorker from "livekit-client/e2ee-worker?worker&inline";
-import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
-import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
 
 import { type ObservableScope } from "../../ObservableScope.ts";
 import { Connection } from "./Connection.ts";
-import type {
-  OpenIDClientParts,
-  SFUConfig,
-} from "../../../livekit/openIDSFU.ts";
+import type { OpenIDClientParts } from "../../../livekit/openIDSFU.ts";
 import type { MediaDevices } from "../../MediaDevices.ts";
 import type { Behavior } from "../../Behavior.ts";
 import type { ProcessorState } from "../../../livekit/TrackProcessorContext.tsx";
@@ -32,11 +28,9 @@ import { defaultLiveKitOptions } from "../../../livekit/options.ts";
 // TODO evaluate if this should be done like the Publisher Factory
 export interface ConnectionFactory {
   createConnection(
+    transport: LivekitTransport,
     scope: ObservableScope,
-    transport: LivekitTransportConfig,
-    ownMembershipIdentity: CallMembershipIdentityParts,
     logger: Logger,
-    sfuConfig?: SFUConfig,
   ): Connection;
 }
 
@@ -47,7 +41,6 @@ export class ECConnectionFactory implements ConnectionFactory {
    * Creates a ConnectionFactory for LiveKit connections.
    *
    * @param client - The OpenID client parts for authentication, needed to get openID and JWT tokens.
-   * @param roomId - The current room ID.
    * @param devices - Used for video/audio out/in capture options.
    * @param processorState$ - Effects like background blur (only for publishing connection?)
    * @param livekitKeyProvider - Optional key provider for end-to-end encryption.
@@ -58,7 +51,6 @@ export class ECConnectionFactory implements ConnectionFactory {
    */
   public constructor(
     private client: OpenIDClientParts,
-    private readonly roomId: string,
     private devices: MediaDevices,
     private processorState$: Behavior<ProcessorState>,
     livekitKeyProvider: BaseKeyProvider | undefined,
@@ -86,31 +78,17 @@ export class ECConnectionFactory implements ConnectionFactory {
     this.livekitRoomFactory = livekitRoomFactory ?? defaultFactory;
   }
 
-  /**
-   *
-   * @param scope The observable scope (used for clean-up)
-   * @param transport The transport to use for this connection.
-   * @param ownMembershipIdentity required to connect (using the jwt service) with the SFU.
-   * @param logger The logger instance to use for this connection.
-   * @param sfuConfig optional config in case we already have a token for this connection.
-   * @returns
-   */
   public createConnection(
+    transport: LivekitTransport,
     scope: ObservableScope,
-    transport: LivekitTransportConfig,
-    ownMembershipIdentity: CallMembershipIdentityParts,
     logger: Logger,
-    sfuConfig?: SFUConfig,
   ): Connection {
     return new Connection(
       {
-        existingSFUConfig: sfuConfig,
-        roomId: this.roomId,
         transport,
         client: this.client,
         scope: scope,
         livekitRoomFactory: this.livekitRoomFactory,
-        ownMembershipIdentity,
       },
       logger,
     );

src/state/CallViewModel/remoteMembers/ConnectionManager.test.ts

@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import { BehaviorSubject } from "rxjs";
-import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
+import { type LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
 import { type RemoteParticipant } from "livekit-client";
 import { logger } from "matrix-js-sdk/lib/logger";
 
@@ -18,20 +18,22 @@ import {
 } from "./ConnectionManager.ts";
 import { type ConnectionFactory } from "./ConnectionFactory.ts";
 import { type Connection } from "./Connection.ts";
-import { ownMemberMock, withTestScheduler } from "../../../utils/test.ts";
+import { withTestScheduler } from "../../../utils/test.ts";
 import { areLivekitTransportsEqual } from "./MatrixLivekitMembers.ts";
-import { constant, type Behavior } from "../../Behavior.ts";
+import { type Behavior } from "../../Behavior.ts";
 
 // Some test constants
 
-const TRANSPORT_1: LivekitTransportConfig = {
+const TRANSPORT_1: LivekitTransport = {
   type: "livekit",
   livekit_service_url: "https://lk.example.org",
+  livekit_alias: "!alias:example.org",
 };
 
-const TRANSPORT_2: LivekitTransportConfig = {
+const TRANSPORT_2: LivekitTransport = {
   type: "livekit",
   livekit_service_url: "https://lk.sample.com",
+  livekit_alias: "!alias:sample.com",
 };
 
 let fakeConnectionFactory: ConnectionFactory;
@@ -47,7 +49,7 @@ beforeEach(() => {
   vi.mocked(fakeConnectionFactory).createConnection = vi
     .fn()
     .mockImplementation(
-      (scope: ObservableScope, transport: LivekitTransportConfig) => {
+      (transport: LivekitTransport, scope: ObservableScope) => {
         const mockConnection = {
           transport,
           remoteParticipants$: new BehaviorSubject([]),
@@ -74,12 +76,10 @@ describe("connections$ stream", () => {
       const { connectionManagerData$ } = createConnectionManager$({
         scope: testScope,
         connectionFactory: fakeConnectionFactory,
-        localTransport$: constant(null),
-        remoteTransports$: behavior("a", {
+        inputTransports$: behavior("a", {
           a: new Epoch([TRANSPORT_1, TRANSPORT_2], 0),
         }),
         logger: logger,
-        ownMembershipIdentity: ownMemberMock,
       });
 
       expectObservable(
@@ -115,8 +115,7 @@ describe("connections$ stream", () => {
       const { connectionManagerData$ } = createConnectionManager$({
         scope: testScope,
         connectionFactory: fakeConnectionFactory,
-        localTransport$: constant(null),
-        remoteTransports$: behavior("abcdef", {
+        inputTransports$: behavior("abcdef", {
           a: new Epoch([TRANSPORT_1], 0),
           b: new Epoch([TRANSPORT_1], 1),
           c: new Epoch([TRANSPORT_1], 2),
@@ -125,7 +124,6 @@ describe("connections$ stream", () => {
           f: new Epoch([TRANSPORT_1, TRANSPORT_2], 5),
         }),
         logger: logger,
-        ownMembershipIdentity: ownMemberMock,
       });
 
       expectObservable(
@@ -162,14 +160,12 @@ describe("connections$ stream", () => {
       const { connectionManagerData$ } = createConnectionManager$({
         scope: testScope,
         connectionFactory: fakeConnectionFactory,
-        localTransport$: constant(null),
-        remoteTransports$: behavior("abc", {
+        inputTransports$: behavior("abc", {
           a: new Epoch([TRANSPORT_1], 0),
           b: new Epoch([TRANSPORT_1, TRANSPORT_2], 1),
           c: new Epoch([TRANSPORT_1], 2),
         }),
         logger: logger,
-        ownMembershipIdentity: ownMemberMock,
       });
 
       expectObservable(
@@ -207,15 +203,15 @@ describe("connectionManagerData$ stream", () => {
   // Used in test to control fake connections' remoteParticipants$ streams
   let fakeRemoteParticipantsStreams: Map<string, Behavior<RemoteParticipant[]>>;
 
-  function keyForTransport(transport: LivekitTransportConfig): string {
-    return `${transport.livekit_service_url}`;
+  function keyForTransport(transport: LivekitTransport): string {
+    return `${transport.livekit_service_url}|${transport.livekit_alias}`;
   }
 
   beforeEach(() => {
     fakeRemoteParticipantsStreams = new Map();
 
     function getRemoteParticipantsFor(
-      transport: LivekitTransportConfig,
+      transport: LivekitTransport,
     ): Behavior<RemoteParticipant[]> {
       return (
         fakeRemoteParticipantsStreams.get(keyForTransport(transport)) ??
@@ -227,7 +223,7 @@ describe("connectionManagerData$ stream", () => {
     vi.mocked(fakeConnectionFactory).createConnection = vi
       .fn()
       .mockImplementation(
-        (scope: ObservableScope, transport: LivekitTransportConfig) => {
+        (transport: LivekitTransport, scope: ObservableScope) => {
           const fakeRemoteParticipants$ = new BehaviorSubject<
             RemoteParticipant[]
           >([]);
@@ -279,12 +275,10 @@ describe("connectionManagerData$ stream", () => {
       const { connectionManagerData$ } = createConnectionManager$({
         scope: testScope,
         connectionFactory: fakeConnectionFactory,
-        localTransport$: constant(null),
-        remoteTransports$: behavior("a", {
+        inputTransports$: behavior("a", {
           a: new Epoch([TRANSPORT_1, TRANSPORT_2], 0),
         }),
         logger,
-        ownMembershipIdentity: ownMemberMock,
       });
 
       expectObservable(connectionManagerData$).toBe("abcd", {

src/state/CallViewModel/remoteMembers/ConnectionManager.ts

@@ -6,11 +6,10 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
-import { combineLatest, map, of, switchMap } from "rxjs";
+import { type LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
+import { combineLatest, map, of, switchMap, tap } from "rxjs";
 import { type Logger } from "matrix-js-sdk/lib/logger";
 import { type RemoteParticipant } from "livekit-client";
-import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
 
 import { type Behavior } from "../../Behavior.ts";
 import { type Connection } from "./Connection.ts";
@@ -18,11 +17,6 @@ import { Epoch, type ObservableScope } from "../../ObservableScope.ts";
 import { generateItemsWithEpoch } from "../../../utils/observable.ts";
 import { areLivekitTransportsEqual } from "./MatrixLivekitMembers.ts";
 import { type ConnectionFactory } from "./ConnectionFactory.ts";
-import {
-  isLocalTransportWithSFUConfig,
-  type LocalTransportWithSFUConfig,
-} from "../localMember/LocalTransport.ts";
-import { type SFUConfig } from "../../../livekit/openIDSFU.ts";
 
 export class ConnectionManagerData {
   private readonly store: Map<
@@ -42,10 +36,8 @@ export class ConnectionManagerData {
     }
   }
 
-  private getKey(transport: LivekitTransportConfig): string {
-    // This is enough as a key because the ConnectionManager is already scoped by room.
-    // We also do not need to consider the slotId at this point since each `MatrixRTCSession` is already scoped by `slotDescription: {id, application}`.
-    return transport.livekit_service_url;
+  private getKey(transport: LivekitTransport): string {
+    return transport.livekit_service_url + "|" + transport.livekit_alias;
   }
 
   public getConnections(): Connection[] {
@@ -53,15 +45,15 @@ export class ConnectionManagerData {
   }
 
   public getConnectionForTransport(
-    transport: LivekitTransportConfig,
+    transport: LivekitTransport,
   ): Connection | null {
     return this.store.get(this.getKey(transport))?.connection ?? null;
   }
 
   public getParticipantsForTransport(
-    transport: LivekitTransportConfig,
+    transport: LivekitTransport,
   ): RemoteParticipant[] {
-    const key = this.getKey(transport);
+    const key = transport.livekit_service_url + "|" + transport.livekit_alias;
     const existing = this.store.get(key);
     if (existing) {
       return existing.participants;
@@ -73,11 +65,8 @@ export class ConnectionManagerData {
 interface Props {
   scope: ObservableScope;
   connectionFactory: ConnectionFactory;
-  localTransport$: Behavior<LocalTransportWithSFUConfig | null>;
-  remoteTransports$: Behavior<Epoch<LivekitTransportConfig[]>>;
-
+  inputTransports$: Behavior<Epoch<LivekitTransport[]>>;
   logger: Logger;
-  ownMembershipIdentity: CallMembershipIdentityParts;
 }
 
 // TODO - write test for scopes (do we really need to bind scope)
@@ -90,12 +79,8 @@ export interface IConnectionManager {
  * @param props - Configuration object
  * @param props.scope - The observable scope used by this object
  * @param props.connectionFactory - Used to create new connections
- * @param props.localTransport$ - The transport to publish local media on. (deduplicated with remoteTransports$)
- * @param props.remoteTransports$ - All other transports. The connection manager will create connections for each transport. (deduplicated with localTransport$)
- * @param props.ownMembershipIdentity - The own membership identity to use.
- * @param props.logger - The logger to use.
-
- *
+ * @param props.inputTransports$ - A list of Behaviors each containing a LIST of LivekitTransport.
+ * @param props.logger - The logger to use
  *   Each of these behaviors can be interpreted as subscribed list of transports.
  *
  *   Using `registerTransports` independent external modules can control what connections
@@ -108,10 +93,8 @@ export interface IConnectionManager {
 export function createConnectionManager$({
   scope,
   connectionFactory,
-  localTransport$,
-  remoteTransports$,
+  inputTransports$,
   logger: parentLogger,
-  ownMembershipIdentity,
 }: Props): IConnectionManager {
   const logger = parentLogger.getChild("[ConnectionManager]");
   // TODO logger: only construct one logger from the client and make it compatible via a EC specific sing
@@ -124,33 +107,12 @@ export function createConnectionManager$({
    * It is build based on the list of subscribed transports (`transportsSubscriptions$`).
    * externally this is modified via `registerTransports()`.
    */
-  const localAndRemoteTransports$: Behavior<
-    Epoch<(LivekitTransportConfig | LocalTransportWithSFUConfig)[]>
-  > = scope.behavior(
-    combineLatest([remoteTransports$, localTransport$]).pipe(
-      // Combine local and remote transports into one transport array
-      // and set the forceOldJwtEndpoint property on the local transport
-      map(([remoteTransports, localTransport]) => {
-        let localTransportAsArray: LocalTransportWithSFUConfig[] = [];
-        if (localTransport) {
-          localTransportAsArray = [localTransport];
-        }
-        const dedupedRemote = removeDuplicateTransports(remoteTransports.value);
-        const remoteWithoutLocal = dedupedRemote.filter(
-          (transport) =>
-            !localTransportAsArray.find((l) =>
-              areLivekitTransportsEqual(l.transport, transport),
-            ),
-        );
-        logger.debug(
-          "remoteWithoutLocal",
-          remoteWithoutLocal,
-          "localTransportAsArray",
-          localTransportAsArray,
-        );
-        return new Epoch(
-          [...localTransportAsArray, ...remoteWithoutLocal],
-          remoteTransports.epoch,
+  const transports$ = scope.behavior(
+    inputTransports$.pipe(
+      map((transports) => transports.mapInner(removeDuplicateTransports)),
+      tap(({ value: transports }) => {
+        logger.trace(
+          `Managing transports: ${transports.map((t) => t.livekit_service_url).join(", ")}`,
         );
       }),
     ),
@@ -160,43 +122,25 @@ export function createConnectionManager$({
    * Connections for each transport in use by one or more session members.
    */
   const connections$ = scope.behavior(
-    localAndRemoteTransports$.pipe(
+    transports$.pipe(
       generateItemsWithEpoch(
-        "ConnectionManager connections$",
         function* (transports) {
-          for (const transport of transports) {
-            if (isLocalTransportWithSFUConfig(transport)) {
-              // This is the local transport; only the `LocalTransportWithSFUConfig` has a `sfuConfig` field.
-              yield {
-                keys: [
-                  transport.transport.livekit_service_url,
-                  transport.sfuConfig,
-                ],
-                data: undefined,
-              };
-            } else {
-              yield {
-                keys: [
-                  transport.livekit_service_url,
-                  undefined as SFUConfig | undefined,
-                ],
-                data: undefined,
-              };
-            }
-          }
+          for (const transport of transports)
+            yield {
+              keys: [transport.livekit_service_url, transport.livekit_alias],
+              data: undefined,
+            };
         },
-        (scope, _data$, serviceUrl, sfuConfig) => {
+        (scope, _data$, serviceUrl, alias) => {
+          logger.debug(`Creating connection to ${serviceUrl} (${alias})`);
           const connection = connectionFactory.createConnection(
-            scope,
             {
               type: "livekit",
               livekit_service_url: serviceUrl,
+              livekit_alias: alias,
             },
-            ownMembershipIdentity,
+            scope,
             logger,
-            // TODO: This whole optional SFUConfig parameter is not particularly elegant.
-            // I would like it if connections always fetched the SFUConfig by themselves.
-            sfuConfig,
           );
           // Start the connection immediately
           // Use connection state to track connection progress
@@ -246,18 +190,18 @@ export function createConnectionManager$({
         );
       }),
     ),
-    new Epoch(new ConnectionManagerData(), -1),
+    new Epoch(new ConnectionManagerData()),
   );
 
   return { connectionManagerData$ };
 }
 
-function removeDuplicateTransports<T extends LivekitTransportConfig>(
-  transports: T[],
-): T[] {
+function removeDuplicateTransports(
+  transports: LivekitTransport[],
+): LivekitTransport[] {
   return transports.reduce((acc, transport) => {
     if (!acc.some((t) => areLivekitTransportsEqual(t, transport)))
       acc.push(transport);
     return acc;
-  }, [] as T[]);
+  }, [] as LivekitTransport[]);
 }

src/state/CallViewModel/remoteMembers/ECConnectionFactory.test.ts

@@ -15,11 +15,7 @@ import EventEmitter from "events";
 import { ObservableScope } from "../../ObservableScope.ts";
 import { ECConnectionFactory } from "./ConnectionFactory.ts";
 import type { OpenIDClientParts } from "../../../livekit/openIDSFU.ts";
-import {
-  exampleTransport,
-  mockMediaDevices,
-  ownMemberMock,
-} from "../../../utils/test.ts";
+import { exampleTransport, mockMediaDevices } from "../../../utils/test.ts";
 import type { ProcessorState } from "../../../livekit/TrackProcessorContext.tsx";
 import { constant } from "../../Behavior";
 
@@ -65,7 +61,6 @@ describe("ECConnectionFactory - Audio inputs options", () => {
 
       const ecConnectionFactory = new ECConnectionFactory(
         mockClient,
-        "!roomid:example.org",
         mockMediaDevices({}),
         new BehaviorSubject<ProcessorState>({
           supported: true,
@@ -77,12 +72,7 @@ describe("ECConnectionFactory - Audio inputs options", () => {
         echo,
         noise,
       );
-      ecConnectionFactory.createConnection(
-        testScope,
-        exampleTransport,
-        ownMemberMock,
-        logger,
-      );
+      ecConnectionFactory.createConnection(exampleTransport, testScope, logger);
 
       // Check if Room was constructed with expected options
       expect(RoomConstructor).toHaveBeenCalledWith(
@@ -106,7 +96,6 @@ describe("ECConnectionFactory - ControlledAudioDevice", () => {
 
       const ecConnectionFactory = new ECConnectionFactory(
         mockClient,
-        "!roomid:example.org",
         mockMediaDevices({
           audioOutput: {
             available$: constant(new Map<never, never>()),
@@ -124,12 +113,7 @@ describe("ECConnectionFactory - ControlledAudioDevice", () => {
         false,
         false,
       );
-      ecConnectionFactory.createConnection(
-        testScope,
-        exampleTransport,
-        ownMemberMock,
-        logger,
-      );
+      ecConnectionFactory.createConnection(exampleTransport, testScope, logger);
 
       // Check if Room was constructed with expected options
       expect(RoomConstructor).toHaveBeenCalledWith(