appease linter

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

.github/workflows/blocked.yaml

@@ -10,7 +10,7 @@ jobs:
       pull-requests: read
     steps:
       - name: Add notice
-        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b # v7
+        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
         if: contains(github.event.pull_request.labels.*.name, 'X-Blocked')
         with:
           script: |

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

@@ -23,7 +23,7 @@ jobs:
       packages: write
     steps:
       - name: Check it out
-        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
 
       - name: 📥 Download artifact
         uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
@@ -34,7 +34,7 @@ jobs:
           path: dist
 
       - name: Log in to container registry
-        uses: docker/login-action@5e57cd118135c172c3672efd75eb46360885c0ef # v3.6.0
+        uses: docker/login-action@74a5d142397b4f367a81961eba4e8cd7edddf772 # v3.4.0
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}
@@ -42,7 +42,7 @@ jobs:
 
       - name: Extract metadata (tags, labels) for Docker
         id: meta
-        uses: docker/metadata-action@c1e51972afc2121e065aed6d45c65596fe445f3f # v5.8.0
+        uses: docker/metadata-action@902fa8ec7d6ecbf8d84d538b9b233a880e428804 # v5.7.0
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
           tags: ${{ inputs.docker_tags}}
@@ -50,10 +50,10 @@ jobs:
             org.opencontainers.image.licenses=AGPL-3.0-only OR LicenseRef-Element-Commercial
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@e468171a9de216ec08956ac3ada2f0791b6bd435 # v3.11.1
+        uses: docker/setup-buildx-action@b5ca514318bd6ebac0fb2aedd5d36ec1b5c232a2 # v3.10.0
 
       - name: Build and push Docker image
-        uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83 # v6.18.0
+        uses: docker/build-push-action@14487ce63c7a62a4a324b0bfb37086795e31c6c1 # v6.16.0
         with:
           context: .
           platforms: linux/amd64,linux/arm64

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

@@ -32,7 +32,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
       - name: Enable Corepack
         run: corepack enable
       - name: Yarn cache

.github/workflows/lint.yaml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
       - name: Enable Corepack
         run: corepack enable
       - name: Yarn cache

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

@@ -85,7 +85,7 @@ jobs:
         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@aec2ec56f94eb8180ceec724245f64ef008b89f5 # v2
+        uses: softprops/action-gh-release@da05d552573ad5aba039eaac05058a918a7bf631 # v2
         with:
           files: |
             ${{ env.FILENAME_PREFIX }}.tar.gz
@@ -103,7 +103,7 @@ jobs:
       id-token: write # required for the provenance flag on npm publish
     steps:
       - name: Checkout
-        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
 
       - name: 📥 Download built element-call artifact
         uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
@@ -144,7 +144,7 @@ jobs:
       contents: read
     steps:
       - name: Checkout
-        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
 
       - name: 📥 Download built element-call artifact
         uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
@@ -199,7 +199,7 @@ jobs:
       contents: read
     steps:
       - name: Checkout
-        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
         with:
           path: element-call
 
@@ -212,7 +212,7 @@ jobs:
           path: element-call/embedded/ios/Sources/dist
 
       - name: Checkout element-call-swift
-        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
         with:
           repository: element-hq/element-call-swift
           path: element-call-swift
@@ -264,7 +264,7 @@ jobs:
           echo "iOS: ${{ needs.publish_ios.outputs.ARTIFACT_VERSION }}"
       - name: Add release notes
         if: ${{ needs.versioning.outputs.DRY_RUN == 'false' }}
-        uses: softprops/action-gh-release@aec2ec56f94eb8180ceec724245f64ef008b89f5 # v2
+        uses: softprops/action-gh-release@da05d552573ad5aba039eaac05058a918a7bf631 # v2
         with:
           append_body: true
           body: |

.github/workflows/publish.yaml

@@ -42,7 +42,7 @@ jobs:
       - name: Create Checksum
         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@aec2ec56f94eb8180ceec724245f64ef008b89f5 # v2
+        uses: softprops/action-gh-release@da05d552573ad5aba039eaac05058a918a7bf631 # v2
         with:
           files: |
             ${{ env.FILENAME_PREFIX }}.tar.gz
@@ -68,7 +68,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Add release note
-        uses: softprops/action-gh-release@aec2ec56f94eb8180ceec724245f64ef008b89f5 # v2
+        uses: softprops/action-gh-release@da05d552573ad5aba039eaac05058a918a7bf631 # v2
         with:
           append_body: true
           body: |

.github/workflows/test.yaml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
       - name: Enable Corepack
         run: corepack enable
       - name: Yarn cache
@@ -22,7 +22,7 @@ jobs:
       - name: Vitest
         run: "yarn run test:coverage"
       - name: Upload to codecov
-        uses: codecov/codecov-action@5a1091511ad55cbe89839c7260b706298ca349f7 # v5
+        uses: codecov/codecov-action@18283e04ce6e62d37312384ff67231eb8fd56d24 # v5
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
         with:
@@ -30,10 +30,10 @@ jobs:
           fail_ci_if_error: true
   playwright:
     name: Run end-to-end tests
-    timeout-minutes: 60
+    timeout-minutes: 30
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
       - name: Enable Corepack
         run: corepack enable
       - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4

.github/workflows/translations-download.yaml

@@ -13,7 +13,7 @@ jobs:
 
     steps:
       - name: Checkout the code
-        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
 
       - name: Enable Corepack
         run: corepack enable

.github/workflows/translations-upload.yaml

@@ -14,7 +14,7 @@ jobs:
 
     steps:
       - name: Checkout the code
-        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
 
       - name: Upload
         uses: localazy/upload@27e6b5c0fddf4551596b42226b1c24124335d24a # v1

backend/dev_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

docs/self-hosting.md

@@ -283,7 +283,6 @@ self-hosters and developers working with Element Call.
 - [MatrixRTC with Synology Container Manager (Docker)](https://ztfr.de/matrixrtc-with-synology-container-manager-docker/)
 - [Encrypted & Scalable Video Calls: How to deploy an Element Call backend with Synapse Using Docker-Compose](https://willlewis.co.uk/blog/posts/deploy-element-call-backend-with-synapse-and-docker-compose/)
 - [Element Call einrichten: Verschlüsselte Videoanrufe mit Element X und Matrix Synapse](https://www.cleveradmin.de/blog/2025/04/matrixrtc-element-call-backend-einrichten/)
-- [MatrixRTC Back-End for Synapse with Docker Compose and Traefik](https://forge.avontech.net/kstro1/matrixrtc-docker-traefik/)
 
 ## 🛠️ Tools
 

locales/en/app.json

@@ -72,24 +72,12 @@
     "livekit_server_info": "LiveKit Server Info",
     "livekit_sfu": "LiveKit SFU: {{url}}",
     "matrix_id": "Matrix ID: {{id}}",
-    "matrixRTCMode": {
-      "Comptibility": {
-        "description": "Compatible with homeservers that do not support sticky events (but all other EC clients are v0.17.0 or later)",
-        "label": "Compatibility: state events & multi SFU"
-      },
-      "Legacy": {
-        "description": "Compatible with old versions of EC that do not support multi SFU",
-        "label": "Legacy: state events & oldest membership SFU"
-      },
-      "Matrix_2_0": {
-        "description": "Compatible only with homservers supporting sticky events and all EC clients v0.17.0 or later",
-        "label": "Matrix 2.0: sticky events & multi SFU"
-      },
-      "title": "MatrixRTC mode"
-    },
     "mute_all_audio": "Mute all audio (participants, reactions, join sounds)",
     "show_connection_stats": "Show connection statistics",
-    "url_params": "URL parameters"
+    "show_non_member_tiles": "Show tiles for non-member media",
+    "url_params": "URL parameters",
+    "use_new_membership_manager": "Use the new implementation of the call MembershipManager",
+    "use_to_device_key_transport": "Use to device key transport. This will fallback to room key transport when another call member sent a room key"
   },
   "disconnected_banner": "Connectivity to the server has been lost.",
   "error": {
@@ -104,7 +92,7 @@
     "generic_description": "Submitting debug logs will help us track down the problem.",
     "insufficient_capacity": "Insufficient capacity",
     "insufficient_capacity_description": "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.",
-    "matrix_rtc_transport_missing": "The server is not configured to work with {{brand}}. Please contact your server admin (Domain: {{domain}}, Error Code: {{ errorCode }}).",
+    "matrix_rtc_focus_missing": "The server is not configured to work with {{brand}}. Please contact your server admin (Domain: {{domain}}, Error Code: {{ errorCode }}).",
     "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",

package.json

@@ -44,7 +44,7 @@
     "@formatjs/intl-segmenter": "^11.7.3",
     "@livekit/components-core": "^0.12.0",
     "@livekit/components-react": "^2.0.0",
-    "@livekit/protocol": "^1.42.2",
+    "@livekit/protocol": "^1.38.0",
     "@livekit/track-processors": "^0.5.5",
     "@mediapipe/tasks-vision": "^0.10.18",
     "@opentelemetry/api": "^1.4.0",
@@ -54,7 +54,7 @@
     "@opentelemetry/sdk-trace-base": "^2.0.0",
     "@opentelemetry/sdk-trace-web": "^2.0.0",
     "@opentelemetry/semantic-conventions": "^1.25.1",
-    "@playwright/test": "^1.56.1",
+    "@playwright/test": "^1.52.0",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-visually-hidden": "^1.0.3",
@@ -99,7 +99,6 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-rxjs": "^5.0.3",
     "eslint-plugin-unicorn": "^56.0.0",
-    "fetch-mock": "11.1.5",
     "global-jsdom": "^26.0.0",
     "i18next": "^24.0.0",
     "i18next-browser-languagedetector": "^8.0.0",
@@ -109,7 +108,7 @@
     "livekit-client": "^2.13.0",
     "lodash-es": "^4.17.21",
     "loglevel": "^1.9.1",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#head=toger5/sticky-events&commit=e7f5bec51b6f70501a025b79fe5021c933385b21",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#head=develop",
     "matrix-widget-api": "^1.13.0",
     "normalize.css": "^8.0.1",
     "observable-hooks": "^4.2.3",

src/MediaDevicesContext.ts

@@ -23,6 +23,14 @@ export function useMediaDevices(): MediaDevices {
   return mediaDevices;
 }
 
+export const useIsEarpiece = (): boolean => {
+  const devices = useMediaDevices();
+  const audioOutput = useObservableEagerState(devices.audioOutput.selected$);
+  const available = useObservableEagerState(devices.audioOutput.available$);
+  if (!audioOutput?.id) return false;
+  return available.get(audioOutput.id)?.type === "earpiece";
+};
+
 /**
  * A convenience hook to get the audio node configuration for the earpiece.
  * It will check the `useAsEarpiece` of the `audioOutput` device and return

src/RTCConnectionStats.tsx

@@ -19,26 +19,10 @@ import mediaViewStyles from "../src/tile/MediaView.module.css";
 interface Props {
   audio?: RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats;
   video?: RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats;
-  focusUrl?: string;
 }
 
-const extractDomain = (url: string): string => {
-  try {
-    const parsedUrl = new URL(url);
-    return parsedUrl.hostname; // Returns "kdk.cpm"
-  } catch (error) {
-    console.error("Invalid URL:", error);
-    return url;
-  }
-};
-
 // This is only used in developer mode for debugging purposes, so we don't need full localization
-export const RTCConnectionStats: FC<Props> = ({
-  audio,
-  video,
-  focusUrl,
-  ...rest
-}) => {
+export const RTCConnectionStats: FC<Props> = ({ audio, video, ...rest }) => {
   const [showModal, setShowModal] = useState(false);
   const [modalContents, setModalContents] = useState<
     "video" | "audio" | "none"
@@ -71,13 +55,6 @@ export const RTCConnectionStats: FC<Props> = ({
           </pre>
         </div>
       </Modal>
-      {focusUrl && (
-        <div>
-          <Text as="span" size="xs" title="focusURL">
-            &nbsp;{extractDomain(focusUrl)}
-          </Text>
-        </div>
-      )}
       {audio && (
         <div>
           <Button

src/button/ReactionToggleButton.test.tsx

@@ -6,22 +6,21 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { act, render } from "@testing-library/react";
-import { expect, test, vi } from "vitest";
+import { expect, test } from "vitest";
 import { TooltipProvider } from "@vector-im/compound-web";
 import { userEvent } from "@testing-library/user-event";
 import { type ReactNode } from "react";
+import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
 
 import { ReactionToggleButton } from "./ReactionToggleButton";
 import { ElementCallReactionEventType } from "../reactions";
-import { type CallViewModel } from "../state/CallViewModel/CallViewModel";
+import { type CallViewModel } from "../state/CallViewModel";
 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";
 
-vi.mock("livekit-client/e2ee-worker?worker");
-
-const localIdent = `${localRtcMember.userId}:${localRtcMember.deviceId}`;
+const localIdent = `${localRtcMember.sender}:${localRtcMember.deviceId}`;
 
 function TestComponent({
   rtcSession,
@@ -34,7 +33,7 @@ function TestComponent({
     <TooltipProvider>
       <ReactionsSenderProvider
         vm={vm}
-        rtcSession={rtcSession.asMockedSession()}
+        rtcSession={rtcSession as unknown as MatrixRTCSession}
       >
         <ReactionToggleButton vm={vm} identifier={localIdent} />
       </ReactionsSenderProvider>

src/button/ReactionToggleButton.tsx

@@ -33,7 +33,7 @@ import {
   ReactionsRowSize,
 } from "../reactions";
 import { Modal } from "../Modal";
-import { type CallViewModel } from "../state/CallViewModel/CallViewModel";
+import { type CallViewModel } from "../state/CallViewModel";
 import { useBehavior } from "../useBehavior";
 
 interface InnerButtonProps extends ComponentPropsWithoutRef<"button"> {

src/grid/GridLayout.tsx

@@ -14,7 +14,7 @@ import {
 import { distinctUntilChanged } from "rxjs";
 import { useObservableEagerState } from "observable-hooks";
 
-import { type GridLayout as GridLayoutModel } from "../state/layout-types.ts";
+import { type GridLayout as GridLayoutModel } from "../state/CallViewModel";
 import styles from "./GridLayout.module.css";
 import { useInitial } from "../useInitial";
 import { type CallLayout, arrangeTiles } from "./CallLayout";

src/grid/OneOnOneLayout.tsx

@@ -9,7 +9,7 @@ import { type ReactNode, useCallback, useMemo } from "react";
 import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
-import { type OneOnOneLayout as OneOnOneLayoutModel } from "../state/layout-types.ts";
+import { type OneOnOneLayout as OneOnOneLayoutModel } from "../state/CallViewModel";
 import { type CallLayout, arrangeTiles } from "./CallLayout";
 import styles from "./OneOnOneLayout.module.css";
 import { type DragCallback, useUpdateLayout } from "./Grid";

src/grid/SpotlightExpandedLayout.tsx

@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { type ReactNode, useCallback } from "react";
 
-import { type SpotlightExpandedLayout as SpotlightExpandedLayoutModel } from "../state/layout-types.ts";
+import { type SpotlightExpandedLayout as SpotlightExpandedLayoutModel } from "../state/CallViewModel";
 import { type CallLayout } from "./CallLayout";
 import { type DragCallback, useUpdateLayout } from "./Grid";
 import styles from "./SpotlightExpandedLayout.module.css";

src/grid/SpotlightLandscapeLayout.tsx

@@ -10,7 +10,7 @@ import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
 import { type CallLayout } from "./CallLayout";
-import { type SpotlightLandscapeLayout as SpotlightLandscapeLayoutModel } from "../state/layout-types.ts";
+import { type SpotlightLandscapeLayout as SpotlightLandscapeLayoutModel } from "../state/CallViewModel";
 import styles from "./SpotlightLandscapeLayout.module.css";
 import { useUpdateLayout, useVisibleTiles } from "./Grid";
 

src/grid/SpotlightPortraitLayout.tsx

@@ -10,7 +10,7 @@ import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
 import { type CallLayout, arrangeTiles } from "./CallLayout";
-import { type SpotlightPortraitLayout as SpotlightPortraitLayoutModel } from "../state/layout-types.ts";
+import { type SpotlightPortraitLayout as SpotlightPortraitLayoutModel } from "../state/CallViewModel";
 import styles from "./SpotlightPortraitLayout.module.css";
 import { useUpdateLayout, useVisibleTiles } from "./Grid";
 import { useBehavior } from "../useBehavior";

src/home/useGroupCallRooms.ts

@@ -113,49 +113,19 @@ const roomIsJoinable = (room: Room): boolean => {
   }
 };
 
-/**
- * Determines if a given room has call events in it, and therefore
- * is likely to be a call room.
- * @param room The Matrix room instance.
- * @returns `true` if the room has call events.
- */
 const roomHasCallMembershipEvents = (room: Room): boolean => {
-  // Check our room membership first, to rule out any rooms
-  // we can't have a call in.
-  const myMembership = room.getMyMembership();
-  if (myMembership === KnownMembership.Knock) {
-    // Assume that a room you've knocked on is able to hold calls
-    return true;
-  } else if (myMembership !== KnownMembership.Join) {
-    // Otherwise, non-joined rooms should never show up.
-    return false;
-  }
-
-  // Legacy member state checks (cheaper to check.)
-  const timeline = room.getLiveTimeline();
-  if (
-    timeline
-      .getState(EventTimeline.FORWARDS)
-      ?.events?.has(EventType.GroupCallMemberPrefix)
-  ) {
-    return true;
-  }
-
-  // Check for *active* calls using sticky events.
-  for (const sticky of room._unstable_getStickyEvents()) {
-    if (sticky.getType() === EventType.RTCMembership) {
+  switch (room.getMyMembership()) {
+    case KnownMembership.Join:
+      return !!room
+        .getLiveTimeline()
+        .getState(EventTimeline.FORWARDS)
+        ?.events?.get(EventType.GroupCallMemberPrefix);
+    case KnownMembership.Knock:
+      // Assume that a room you've knocked on is able to hold calls
       return true;
-    }
+    default:
+      return false;
   }
-
-  // Otherwise, check recent event history to see if anyone had
-  // sent a call membership in here.
-  return timeline.getEvents().some(
-    (e) =>
-      // Membership events only count if both of these are true
-      e.unstableStickyInfo && e.getType() === EventType.GroupCallMemberPrefix,
-  );
-  // Otherwise, it's *unlikely* this room was ever a call.
 };
 
 export function useGroupCallRooms(client: MatrixClient): GroupCallRoom[] {

src/livekit/MatrixAudioRenderer.test.tsx

@@ -6,28 +6,20 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { afterEach, beforeEach, expect, it, vi } from "vitest";
-import { render, type RenderResult } from "@testing-library/react";
+import { render } from "@testing-library/react";
+import { type CallMembership } from "matrix-js-sdk/lib/matrixrtc";
 import {
   getTrackReferenceId,
   type TrackReference,
 } from "@livekit/components-core";
-import {
-  type Participant,
-  type RemoteAudioTrack,
-  type Room,
-  Track,
-} from "livekit-client";
+import { type RemoteAudioTrack } from "livekit-client";
 import { type ReactNode } from "react";
 import { useTracks } from "@livekit/components-react";
 
 import { testAudioContext } from "../useAudioContext.test";
 import * as MediaDevicesContext from "../MediaDevicesContext";
-import { LivekitRoomAudioRenderer } from "./MatrixAudioRenderer";
-import {
-  mockMediaDevices,
-  mockRemoteParticipant,
-  mockTrack,
-} from "../utils/test";
+import { MatrixAudioRenderer } from "./MatrixAudioRenderer";
+import { mockMediaDevices, mockTrack } from "../utils/test";
 
 export const TestAudioContextConstructor = vi.fn(() => testAudioContext);
 
@@ -56,203 +48,42 @@ vi.mock("@livekit/components-react", async (importOriginal) => {
   };
 });
 
-let tracks: TrackReference[] = [];
-
-/**
- * Render the test component with given rtc members and livekit participant identities.
- *
- * It is possible to have rtc members that are not in livekit (e.g. not yet joined) and vice versa.
- *
- * @param rtcMembers - Array of active rtc members with userId and deviceId.
- * @param livekitParticipantIdentities - Array of livekit participant (that are publishing).
- * @param explicitTracks - Array of tracks available in livekit, if not provided, one audio track per livekitParticipantIdentities will be created.
- * */
-
-function renderTestComponent(
-  rtcMembers: { userId: string; deviceId: string }[],
-  livekitParticipantIdentities: string[],
-  explicitTracks?: {
-    participantId: string;
-    kind: Track.Kind;
-    source: Track.Source;
-  }[],
-): RenderResult {
-  const liveKitParticipants = livekitParticipantIdentities.map((identity) =>
-    mockRemoteParticipant({ identity }),
-  );
-  const participants = rtcMembers.flatMap(({ userId, deviceId }) => {
-    const p = liveKitParticipants.find(
-      (p) => p.identity === `${userId}:${deviceId}`,
-    );
-    return p === undefined ? [] : [p];
-  });
-  const livekitRoom = {
-    remoteParticipants: new Map<string, Participant>(
-      liveKitParticipants.map((p) => [p.identity, p]),
-    ),
-  } as unknown as Room;
-
-  if (explicitTracks?.length ?? 0 > 0) {
-    tracks = explicitTracks!.map(({ participantId, source, kind }) => {
-      const participant =
-        liveKitParticipants.find((p) => p.identity === participantId) ??
-        mockRemoteParticipant({ identity: participantId });
-      return mockTrack(participant, kind, source);
-    });
-  } else {
-    tracks = participants.map((p) => mockTrack(p));
-  }
-
-  vi.mocked(useTracks).mockReturnValue(tracks);
-  return render(
-    <MediaDevicesProvider value={mockMediaDevices({})}>
-      <LivekitRoomAudioRenderer
-        validIdentities={participants.map((p) => p.identity)}
-        livekitRoom={livekitRoom}
-        url={""}
-      />
-    </MediaDevicesProvider>,
-  );
-}
+const tracks = [mockTrack("test:123")];
+vi.mocked(useTracks).mockReturnValue(tracks);
 
 it("should render for member", () => {
-  const { container, queryAllByTestId } = renderTestComponent(
-    [{ userId: "@alice", deviceId: "DEV0" }],
-    ["@alice:DEV0"],
+  const { container, queryAllByTestId } = render(
+    <MediaDevicesProvider value={mockMediaDevices({})}>
+      <MatrixAudioRenderer
+        members={[{ sender: "test", deviceId: "123" }] as CallMembership[]}
+      />
+    </MediaDevicesProvider>,
   );
   expect(container).toBeTruthy();
   expect(queryAllByTestId("audio")).toHaveLength(1);
 });
 
 it("should not render without member", () => {
-  const { container, queryAllByTestId } = renderTestComponent(
-    [{ userId: "@bob", deviceId: "DEV0" }],
-    ["@alice:DEV0"],
+  const memberships = [
+    { sender: "othermember", deviceId: "123" },
+  ] as CallMembership[];
+  const { container, queryAllByTestId } = render(
+    <MediaDevicesProvider value={mockMediaDevices({})}>
+      <MatrixAudioRenderer members={memberships} />
+    </MediaDevicesProvider>,
   );
   expect(container).toBeTruthy();
   expect(queryAllByTestId("audio")).toHaveLength(0);
 });
 
-const TEST_CASES: {
-  name: string;
-  rtcUsers: { userId: string; deviceId: string }[];
-  livekitParticipantIdentities: string[];
-  explicitTracks?: {
-    participantId: string;
-    kind: Track.Kind;
-    source: Track.Source;
-  }[];
-  expectedAudioTracks: number;
-}[] = [
-  {
-    name: "single user single device",
-    rtcUsers: [
-      { userId: "@alice", deviceId: "DEV0" },
-      { userId: "@alice", deviceId: "DEV1" },
-      { userId: "@bob", deviceId: "DEV0" },
-    ],
-    livekitParticipantIdentities: ["@alice:DEV0", "@bob:DEV0", "@alice:DEV1"],
-    expectedAudioTracks: 3,
-  },
-  // Charlie is a rtc member but not in livekit
-  {
-    name: "Charlie is rtc member but not in livekit",
-    rtcUsers: [
-      { userId: "@alice", deviceId: "DEV0" },
-      { userId: "@bob", deviceId: "DEV0" },
-      { userId: "@charlie", deviceId: "DEV0" },
-    ],
-    livekitParticipantIdentities: ["@alice:DEV0", "@bob:DEV0"],
-    expectedAudioTracks: 2,
-  },
-  // Charlie is in livekit but not rtc member
-  {
-    name: "Charlie is in livekit but not rtc member",
-    rtcUsers: [
-      { userId: "@alice", deviceId: "DEV0" },
-      { userId: "@bob", deviceId: "DEV0" },
-    ],
-    livekitParticipantIdentities: ["@alice:DEV0", "@bob:DEV0", "@charlie:DEV0"],
-    expectedAudioTracks: 2,
-  },
-  {
-    name: "no audio track, only video track",
-    rtcUsers: [{ userId: "@alice", deviceId: "DEV0" }],
-    livekitParticipantIdentities: ["@alice:DEV0"],
-    explicitTracks: [
-      {
-        participantId: "@alice:DEV0",
-        kind: Track.Kind.Video,
-        source: Track.Source.Camera,
-      },
-    ],
-    expectedAudioTracks: 0,
-  },
-  {
-    name: "Audio track from unknown source",
-    rtcUsers: [{ userId: "@alice", deviceId: "DEV0" }],
-    livekitParticipantIdentities: ["@alice:DEV0"],
-    explicitTracks: [
-      {
-        participantId: "@alice:DEV0",
-        kind: Track.Kind.Audio,
-        source: Track.Source.Unknown,
-      },
-    ],
-    expectedAudioTracks: 1,
-  },
-  {
-    name: "Audio track from other device",
-    rtcUsers: [{ userId: "@alice", deviceId: "DEV0" }],
-    livekitParticipantIdentities: ["@alice:DEV0"],
-    explicitTracks: [
-      {
-        participantId: "@alice:DEV1",
-        kind: Track.Kind.Audio,
-        source: Track.Source.Microphone,
-      },
-    ],
-    expectedAudioTracks: 0,
-  },
-  {
-    name: "two audio tracks, microphone and screenshare",
-    rtcUsers: [{ userId: "@alice", deviceId: "DEV0" }],
-    livekitParticipantIdentities: ["@alice:DEV0"],
-    explicitTracks: [
-      {
-        participantId: "@alice:DEV0",
-        kind: Track.Kind.Audio,
-        source: Track.Source.Microphone,
-      },
-      {
-        participantId: "@alice:DEV0",
-        kind: Track.Kind.Audio,
-        source: Track.Source.ScreenShareAudio,
-      },
-    ],
-    expectedAudioTracks: 2,
-  },
-];
-
-it.each(TEST_CASES)(
-  `should render sound test cases $name`,
-  ({
-    rtcUsers,
-    livekitParticipantIdentities,
-    explicitTracks,
-    expectedAudioTracks,
-  }) => {
-    const { queryAllByTestId } = renderTestComponent(
-      rtcUsers,
-      livekitParticipantIdentities,
-      explicitTracks,
-    );
-    expect(queryAllByTestId("audio")).toHaveLength(expectedAudioTracks);
-  },
-);
-
 it("should not setup audioContext gain and pan if there is no need to.", () => {
-  renderTestComponent([{ userId: "@bob", deviceId: "DEV0" }], ["@bob:DEV0"]);
+  render(
+    <MediaDevicesProvider value={mockMediaDevices({})}>
+      <MatrixAudioRenderer
+        members={[{ sender: "test", deviceId: "123" }] as CallMembership[]}
+      />
+    </MediaDevicesProvider>,
+  );
   const audioTrack = tracks[0].publication.track! as RemoteAudioTrack;
 
   expect(audioTrack.setAudioContext).toHaveBeenCalledTimes(1);
@@ -269,8 +100,13 @@ it("should setup audioContext gain and pan", () => {
     pan: 1,
     volume: 0.1,
   });
-
-  renderTestComponent([{ userId: "@bob", deviceId: "DEV0" }], ["@bob:DEV0"]);
+  render(
+    <MediaDevicesProvider value={mockMediaDevices({})}>
+      <MatrixAudioRenderer
+        members={[{ sender: "test", deviceId: "123" }] as CallMembership[]}
+      />
+    </MediaDevicesProvider>,
+  );
 
   const audioTrack = tracks[0].publication.track! as RemoteAudioTrack;
   expect(audioTrack.setAudioContext).toHaveBeenCalled();

src/livekit/MatrixAudioRenderer.tsx

@@ -6,16 +6,15 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { getTrackReferenceId } from "@livekit/components-core";
-import { type Room as LivekitRoom } from "livekit-client";
 import { type RemoteAudioTrack, Track } from "livekit-client";
-import { useEffect, useMemo, useState, type ReactNode } from "react";
+import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import {
   useTracks,
   AudioTrack,
   type AudioTrackProps,
 } from "@livekit/components-react";
+import { type CallMembership } from "matrix-js-sdk/lib/matrixrtc";
 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";
@@ -23,16 +22,11 @@ import * as controls from "../controls";
 
 export interface MatrixAudioRendererProps {
   /**
-   * The service URL of the LiveKit room.
-   */
-  url: string;
-  livekitRoom: LivekitRoom;
-  /**
-   * The list of participant identities to render audio for.
+   * The list of participants to render audio for.
    * 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).
+   * that are not expected to be in the rtc session.
    */
-  validIdentities: ParticipantId[];
+  members: CallMembership[];
   /**
    * If set to `true`, mutes all audio tracks rendered by the component.
    * @remarks
@@ -41,9 +35,9 @@ export interface MatrixAudioRendererProps {
   muted?: boolean;
 }
 
-const prefixedLogger = logger.getChild("[MatrixAudioRenderer]");
 /**
- * Takes care of handling remote participants’ audio tracks and makes sure that microphones and screen share are audible.
+ * The `MatrixAudioRenderer` component is a drop-in solution for adding audio to your LiveKit app.
+ * It takes care of handling remote participants’ audio tracks and makes sure that microphones and screen share are audible.
  *
  * It also takes care of the earpiece audio configuration for iOS devices.
  * This is done by using the WebAudio API to create a stereo pan effect that mimics the earpiece audio.
@@ -55,12 +49,35 @@ const prefixedLogger = logger.getChild("[MatrixAudioRenderer]");
  * ```
  * @public
  */
-export function LivekitRoomAudioRenderer({
-  url,
-  livekitRoom,
-  validIdentities,
+export function MatrixAudioRenderer({
+  members,
   muted,
 }: MatrixAudioRendererProps): ReactNode {
+  const validIdentities = useMemo(
+    () =>
+      new Set(members?.map((member) => `${member.sender}:${member.deviceId}`)),
+    [members],
+  );
+
+  const loggedInvalidIdentities = useRef(new Set<string>());
+
+  /**
+   * Log an invalid livekit track identity.
+   * A invalid identity is one that does not match any of the matrix rtc members.
+   *
+   * @param identity The identity of the track that is invalid
+   * @param validIdentities The list of valid identities
+   */
+  const logInvalid = (identity: string, validIdentities: Set<string>): void => {
+    if (loggedInvalidIdentities.current.has(identity)) return;
+    logger.warn(
+      `[MatrixAudioRenderer] Audio track ${identity} has no matching matrix call member`,
+      `current members: ${Array.from(validIdentities.values())}`,
+      `track will not get rendered`,
+    );
+    loggedInvalidIdentities.current.add(identity);
+  };
+
   const tracks = useTracks(
     [
       Track.Source.Microphone,
@@ -70,25 +87,25 @@ export function LivekitRoomAudioRenderer({
     {
       updateOnlyOn: [],
       onlySubscribed: true,
-      room: livekitRoom,
     },
-  )
-    // Only keep audio tracks
-    .filter((ref) => ref.publication.kind === Track.Kind.Audio)
-    // Only keep tracks from participants that are in the validIdentities list
-    .filter((ref) => {
-      const isValid = validIdentities.includes(ref.participant.identity);
-      if (!isValid) {
-        // 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`,
-          `current members: ${validIdentities.join()}`,
-          `track will not get rendered`,
-        );
-        return false;
-      }
-      return true;
-    });
+  ).filter((ref) => {
+    const isValid = validIdentities?.has(ref.participant.identity);
+    if (!isValid && !ref.participant.isLocal)
+      logInvalid(ref.participant.identity, validIdentities);
+    return (
+      !ref.participant.isLocal &&
+      ref.publication.kind === Track.Kind.Audio &&
+      isValid
+    );
+  });
+  useEffect(() => {
+    if (!tracks.some((t) => !validIdentities.has(t.participant.identity))) {
+      logger.debug(
+        `[MatrixAudioRenderer] All audio tracks have a matching matrix call member identity.`,
+      );
+      loggedInvalidIdentities.current.clear();
+    }
+  }, [tracks, validIdentities]);
 
   // This component is also (in addition to the "only play audio for connected members" logic above)
   // responsible for mimicking earpiece audio on iPhones.

src/livekit/TrackProcessorContext.tsx

@@ -19,22 +19,14 @@ import {
   useMemo,
 } from "react";
 import { type LocalVideoTrack } from "livekit-client";
-import { combineLatest, map, type Observable } from "rxjs";
-import { useObservable } from "observable-hooks";
 
 import {
   backgroundBlur as backgroundBlurSettings,
   useSetting,
 } from "../settings/settings";
 import { BlurBackgroundTransformer } from "./BlurBackgroundTransformer";
-import { type Behavior } from "../state/Behavior";
-import { type ObservableScope } from "../state/ObservableScope";
 
-//TODO-MULTI-SFU: This is not yet fully there.
-// it is a combination of exposing observable and react hooks.
-// preferably we should not make this a context anymore and instead just a vm?
-
-export type ProcessorState = {
+type ProcessorState = {
   supported: boolean | undefined;
   processor: undefined | ProcessorWrapper<BackgroundOptions>;
 };
@@ -50,43 +42,6 @@ export function useTrackProcessor(): ProcessorState {
   return state;
 }
 
-export function useTrackProcessorObservable$(): Observable<ProcessorState> {
-  const state = use(ProcessorContext);
-  if (state === undefined)
-    throw new Error(
-      "useTrackProcessor must be used within a ProcessorProvider",
-    );
-  const state$ = useObservable(
-    (init$) => init$.pipe(map(([init]) => init)),
-    [state],
-  );
-
-  return state$;
-}
-
-/**
- * Updates your video tracks to always use the given processor.
- */
-export const trackProcessorSync = (
-  scope: ObservableScope,
-  videoTrack$: Behavior<LocalVideoTrack | null>,
-  processor$: Behavior<ProcessorState>,
-): void => {
-  combineLatest([videoTrack$, processor$])
-    .pipe(scope.bind())
-    .subscribe(([videoTrack, processorState]) => {
-      if (!processorState) return;
-      if (!videoTrack) return;
-      const { processor } = processorState;
-      if (processor && !videoTrack.getProcessor()) {
-        void videoTrack.setProcessor(processor);
-      }
-      if (!processor && videoTrack.getProcessor()) {
-        void videoTrack.stopProcessor();
-      }
-    });
-};
-
 export const useTrackProcessorSync = (
   videoTrack: LocalVideoTrack | null,
 ): void => {

src/livekit/openIDSFU.ts

@@ -7,7 +7,12 @@ Please see LICENSE in the repository root for full details.
 
 import { type IOpenIDToken, type MatrixClient } from "matrix-js-sdk";
 import { logger } from "matrix-js-sdk/lib/logger";
+import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
+import { useEffect, useState } from "react";
+import { type LivekitFocus } from "matrix-js-sdk/lib/matrixrtc";
 
+import { useActiveLivekitFocus } from "../room/useActiveFocus";
+import { useErrorBoundary } from "../useErrorBoundary";
 import { FailToGetOpenIdToken } from "../utils/errors";
 import { doNetworkOperationWithRetry } from "../utils/matrix";
 
@@ -16,17 +21,51 @@ export interface SFUConfig {
   jwt: string;
 }
 
+export function sfuConfigEquals(a?: SFUConfig, b?: SFUConfig): boolean {
+  if (a === undefined && b === undefined) return true;
+  if (a === undefined || b === undefined) return false;
+
+  return a.jwt === b.jwt && a.url === b.url;
+}
+
 // The bits we need from MatrixClient
 export type OpenIDClientParts = Pick<
   MatrixClient,
   "getOpenIdToken" | "getDeviceId"
 >;
 
+export function useOpenIDSFU(
+  client: OpenIDClientParts,
+  rtcSession: MatrixRTCSession,
+): SFUConfig | undefined {
+  const [sfuConfig, setSFUConfig] = useState<SFUConfig | undefined>(undefined);
+
+  const activeFocus = useActiveLivekitFocus(rtcSession);
+  const { showErrorBoundary } = useErrorBoundary();
+
+  useEffect(() => {
+    if (activeFocus) {
+      getSFUConfigWithOpenID(client, activeFocus).then(
+        (sfuConfig) => {
+          setSFUConfig(sfuConfig);
+        },
+        (e) => {
+          showErrorBoundary(new FailToGetOpenIdToken(e));
+          logger.error("Failed to get SFU config", e);
+        },
+      );
+    } else {
+      setSFUConfig(undefined);
+    }
+  }, [client, activeFocus, showErrorBoundary]);
+
+  return sfuConfig;
+}
+
 export async function getSFUConfigWithOpenID(
   client: OpenIDClientParts,
-  serviceUrl: string,
-  matrixRoomId: string,
-): Promise<SFUConfig> {
+  activeFocus: LivekitFocus,
+): Promise<SFUConfig | undefined> {
   let openIdToken: IOpenIDToken;
   try {
     openIdToken = await doNetworkOperationWithRetry(async () =>
@@ -39,16 +78,26 @@ export async function getSFUConfigWithOpenID(
   }
   logger.debug("Got openID token", openIdToken);
 
-  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.`);
+  try {
+    logger.info(
+      `Trying to get JWT from call's active focus URL of ${activeFocus.livekit_service_url}...`,
+    );
+    const sfuConfig = await getLiveKitJWT(
+      client,
+      activeFocus.livekit_service_url,
+      activeFocus.livekit_alias,
+      openIdToken,
+    );
+    logger.info(`Got JWT from call's active focus URL.`);
 
-  return sfuConfig;
+    return sfuConfig;
+  } catch (e) {
+    logger.warn(
+      `Failed to get JWT from RTC session's active focus URL of ${activeFocus.livekit_service_url}.`,
+      e,
+    );
+    return undefined;
+  }
 }
 
 async function getLiveKitJWT(

src/livekit/useECConnectionState.test.tsx

@@ -0,0 +1,184 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { type FC, useCallback, useState } from "react";
+import { describe, expect, test, vi, vitest } from "vitest";
+import {
+  ConnectionError,
+  ConnectionErrorReason,
+  type Room,
+} from "livekit-client";
+import userEvent from "@testing-library/user-event";
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { sleep } from "matrix-js-sdk/lib/utils";
+
+import { useECConnectionState } from "./useECConnectionState";
+import { type SFUConfig } from "./openIDSFU";
+import { GroupCallErrorBoundary } from "../room/GroupCallErrorBoundary.tsx";
+
+test.each<[string, ConnectionError]>([
+  [
+    "LiveKit hits track limit",
+    new ConnectionError("", ConnectionErrorReason.InternalError, 503),
+  ],
+  [
+    "LiveKit hits room participant limit",
+    new ConnectionError("", ConnectionErrorReason.ServerUnreachable, 200),
+  ],
+  [
+    "LiveKit Cloud hits connection limit",
+    new ConnectionError("", ConnectionErrorReason.NotAllowed, 429),
+  ],
+])(
+  "useECConnectionState throws error when %s hits track limit",
+  async (_server, error) => {
+    const mockRoom = {
+      on: () => {},
+      off: () => {},
+      once: () => {},
+      connect: () => {
+        throw error;
+      },
+      localParticipant: {
+        getTrackPublication: () => {},
+        createTracks: () => [],
+      },
+    } as unknown as Room;
+
+    const TestComponent: FC = () => {
+      const [sfuConfig, setSfuConfig] = useState<SFUConfig | undefined>(
+        undefined,
+      );
+      const connect = useCallback(
+        () => setSfuConfig({ url: "URL", jwt: "JWT token" }),
+        [],
+      );
+      useECConnectionState("default", false, mockRoom, sfuConfig);
+      return <button onClick={connect}>Connect</button>;
+    };
+
+    const user = userEvent.setup();
+    render(
+      <MemoryRouter>
+        <GroupCallErrorBoundary recoveryActionHandler={vi.fn()} widget={null}>
+          <TestComponent />
+        </GroupCallErrorBoundary>
+      </MemoryRouter>,
+    );
+    await user.click(screen.getByRole("button", { name: "Connect" }));
+    screen.getByText("Insufficient capacity");
+  },
+);
+
+describe("Leaking connection prevention", () => {
+  function createTestComponent(mockRoom: Room): FC {
+    const TestComponent: FC = () => {
+      const [sfuConfig, setSfuConfig] = useState<SFUConfig | undefined>(
+        undefined,
+      );
+      const connect = useCallback(
+        () => setSfuConfig({ url: "URL", jwt: "JWT token" }),
+        [],
+      );
+      useECConnectionState("default", false, mockRoom, sfuConfig);
+      return <button onClick={connect}>Connect</button>;
+    };
+    return TestComponent;
+  }
+
+  test("Should cancel pending connections when the component is unmounted", async () => {
+    const connectCall = vi.fn();
+    const pendingConnection = Promise.withResolvers<void>();
+    // let pendingDisconnection = Promise.withResolvers<void>()
+    const disconnectMock = vi.fn();
+
+    const mockRoom = {
+      on: () => {},
+      off: () => {},
+      once: () => {},
+      connect: async () => {
+        connectCall.call(undefined);
+        return await pendingConnection.promise;
+      },
+      disconnect: disconnectMock,
+      localParticipant: {
+        getTrackPublication: () => {},
+        createTracks: () => [],
+      },
+    } as unknown as Room;
+
+    const TestComponent = createTestComponent(mockRoom);
+
+    const { unmount } = render(<TestComponent />);
+    const user = userEvent.setup();
+    await user.click(screen.getByRole("button", { name: "Connect" }));
+
+    expect(connectCall).toHaveBeenCalled();
+    // unmount while the connection is pending
+    unmount();
+
+    // resolve the pending connection
+    pendingConnection.resolve();
+
+    await vitest.waitUntil(
+      () => {
+        return disconnectMock.mock.calls.length > 0;
+      },
+      {
+        timeout: 1000,
+        interval: 100,
+      },
+    );
+
+    // There should be some cleaning up to avoid leaking an open connection
+    expect(disconnectMock).toHaveBeenCalledTimes(1);
+  });
+
+  test("Should cancel about to open but not yet opened connection", async () => {
+    const createTracksCall = vi.fn();
+    const pendingCreateTrack = Promise.withResolvers<void>();
+    // let pendingDisconnection = Promise.withResolvers<void>()
+    const disconnectMock = vi.fn();
+    const connectMock = vi.fn();
+
+    const mockRoom = {
+      on: () => {},
+      off: () => {},
+      once: () => {},
+      connect: connectMock,
+      disconnect: disconnectMock,
+      localParticipant: {
+        getTrackPublication: () => {},
+        createTracks: async () => {
+          createTracksCall.call(undefined);
+          await pendingCreateTrack.promise;
+          return [];
+        },
+      },
+    } as unknown as Room;
+
+    const TestComponent = createTestComponent(mockRoom);
+
+    const { unmount } = render(<TestComponent />);
+    const user = userEvent.setup();
+    await user.click(screen.getByRole("button", { name: "Connect" }));
+
+    expect(createTracksCall).toHaveBeenCalled();
+    // unmount while createTracks is pending
+    unmount();
+
+    // resolve createTracks
+    pendingCreateTrack.resolve();
+
+    // Yield to the event loop to let the connection attempt finish
+    await sleep(100);
+
+    // The operation should have been aborted before even calling connect.
+    expect(connectMock).not.toHaveBeenCalled();
+  });
+});

src/livekit/useECConnectionState.ts

@@ -0,0 +1,362 @@
+/*
+Copyright 2023, 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import {
+  ConnectionError,
+  ConnectionState,
+  type LocalTrack,
+  type Room,
+  RoomEvent,
+  Track,
+} from "livekit-client";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { logger } from "matrix-js-sdk/lib/logger";
+import * as Sentry from "@sentry/react";
+
+import { type SFUConfig, sfuConfigEquals } from "./openIDSFU";
+import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
+import {
+  ElementCallError,
+  InsufficientCapacityError,
+  SFURoomCreationRestrictedError,
+  UnknownCallError,
+} from "../utils/errors.ts";
+import { AbortHandle } from "../utils/abortHandle.ts";
+
+/*
+ * Additional values for states that a call can be in, beyond what livekit
+ * provides in ConnectionState. Also reconnects the call if the SFU Config
+ * changes.
+ */
+export enum ECAddonConnectionState {
+  // We are switching from one focus to another (or between livekit room aliases on the same focus)
+  ECSwitchingFocus = "ec_switching_focus",
+  // The call has just been initialised and is waiting for credentials to arrive before attempting
+  // to connect. This distinguishes from the 'Disconnected' state which is now just for when livekit
+  // gives up on connectivity and we consider the call to have failed.
+  ECWaiting = "ec_waiting",
+}
+
+export type ECConnectionState = ConnectionState | ECAddonConnectionState;
+
+// This is mostly necessary because an empty useRef is an empty object
+// which is truthy, so we can't just use Boolean(currentSFUConfig.current)
+function sfuConfigValid(sfuConfig?: SFUConfig): boolean {
+  return Boolean(sfuConfig?.url) && Boolean(sfuConfig?.jwt);
+}
+
+async function doConnect(
+  livekitRoom: Room,
+  sfuConfig: SFUConfig,
+  audioEnabled: boolean,
+  initialDeviceId: string | undefined,
+  abortHandle: AbortHandle,
+): Promise<void> {
+  // Always create an audio track manually.
+  // livekit (by default) keeps the mic track open when you mute, but if you start muted,
+  // doesn't publish it until you unmute. We want to publish it from the start so we're
+  // always capturing audio: it helps keep bluetooth headsets in the right mode and
+  // mobile browsers to know we're doing a call.
+  if (
+    livekitRoom!.localParticipant.getTrackPublication(Track.Source.Microphone)
+  ) {
+    logger.warn(
+      "Pre-creating audio track but participant already appears to have an microphone track: this shouldn't happen!",
+    );
+    Sentry.captureMessage(
+      "Pre-creating audio track but participant already appears to have an microphone track!",
+    );
+    return;
+  }
+
+  logger.info("Pre-creating microphone track");
+  let preCreatedAudioTrack: LocalTrack | undefined;
+  try {
+    const audioTracks = await livekitRoom!.localParticipant.createTracks({
+      audio: { deviceId: initialDeviceId },
+    });
+
+    if (audioTracks.length < 1) {
+      logger.info("Tried to pre-create local audio track but got no tracks");
+    } else {
+      preCreatedAudioTrack = audioTracks[0];
+    }
+    // There was a yield point previously (awaiting for the track to be created) so we need to check
+    // if the operation was cancelled and stop connecting if needed.
+    if (abortHandle.isAborted()) {
+      logger.info(
+        "[Lifecycle] Signal Aborted: Pre-created audio track but connection aborted",
+      );
+      preCreatedAudioTrack?.stop();
+      return;
+    }
+
+    logger.info("Pre-created microphone track");
+  } catch (e) {
+    logger.error("Failed to pre-create microphone track", e);
+  }
+
+  if (!audioEnabled) {
+    await preCreatedAudioTrack?.mute();
+    // There was a yield point. Check if the operation was cancelled and stop connecting.
+    if (abortHandle.isAborted()) {
+      logger.info(
+        "[Lifecycle] Signal Aborted: Pre-created audio track but connection aborted",
+      );
+      preCreatedAudioTrack?.stop();
+      return;
+    }
+  }
+
+  // check again having awaited for the track to create
+  if (
+    livekitRoom!.localParticipant.getTrackPublication(Track.Source.Microphone)
+  ) {
+    logger.warn(
+      "Pre-created audio track but participant already appears to have an microphone track: this shouldn't happen!",
+    );
+    preCreatedAudioTrack?.stop();
+    return;
+  }
+
+  logger.info("[Lifecycle] Connecting & publishing");
+  try {
+    await connectAndPublish(livekitRoom, sfuConfig, preCreatedAudioTrack, []);
+    if (abortHandle.isAborted()) {
+      logger.info(
+        "[Lifecycle] Signal Aborted: Connected but operation was cancelled. Force disconnect",
+      );
+      livekitRoom?.disconnect().catch((err) => {
+        logger.error("Failed to disconnect from SFU", err);
+      });
+      return;
+    }
+  } catch (e) {
+    preCreatedAudioTrack?.stop();
+    logger.debug("Stopped precreated audio tracks.");
+    throw e;
+  }
+}
+
+/**
+ * Connect to the SFU and publish specific tracks, if provided.
+ * This is very specific to what we need to do: for instance, we don't
+ * currently have a need to prepublish video tracks. We just prepublish
+ * a mic track at the start of a call and copy any srceenshare tracks over
+ * when switching focus (because we can't re-acquire them without the user
+ * going through the dialog to choose them again).
+ */
+async function connectAndPublish(
+  livekitRoom: Room,
+  sfuConfig: SFUConfig,
+  micTrack: LocalTrack | undefined,
+  screenshareTracks: MediaStreamTrack[],
+): Promise<void> {
+  const tracker = PosthogAnalytics.instance.eventCallConnectDuration;
+  // Track call connect duration
+  tracker.cacheConnectStart();
+  livekitRoom.once(RoomEvent.SignalConnected, tracker.cacheWsConnect);
+
+  try {
+    logger.info(`[Lifecycle] Connecting to livekit room ${sfuConfig!.url} ...`);
+    await livekitRoom!.connect(sfuConfig!.url, sfuConfig!.jwt);
+    logger.info(`[Lifecycle] ... connected to livekit room`);
+  } catch (e) {
+    logger.error("[Lifecycle] Failed to connect", 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
+    // participant limits.
+    // LiveKit Cloud uses 429 for connection limits.
+    // Either way, all these errors can be explained as "insufficient capacity".
+    if (e instanceof ConnectionError) {
+      if (e.status === 503 || e.status === 200 || e.status === 429) {
+        throw new InsufficientCapacityError();
+      }
+      if (e.status === 404) {
+        // error msg is "Could not establish signal connection: requested room does not exist"
+        // The room does not exist. There are two different modes of operation for the SFU:
+        // - the room is created on the fly when connecting (livekit `auto_create` option)
+        // - Only authorized users can create rooms, so the room must exist before connecting (done by the auth jwt service)
+        // In the first case there will not be a 404, so we are in the second case.
+        throw new SFURoomCreationRestrictedError();
+      }
+    }
+    throw e;
+  }
+
+  // remove listener in case the connect promise rejects before `SignalConnected` is emitted.
+  livekitRoom.off(RoomEvent.SignalConnected, tracker.cacheWsConnect);
+  tracker.track({ log: true });
+
+  if (micTrack) {
+    logger.info(`Publishing precreated mic track`);
+    await livekitRoom.localParticipant.publishTrack(micTrack, {
+      source: Track.Source.Microphone,
+    });
+  }
+
+  logger.info(
+    `Publishing ${screenshareTracks.length} precreated screenshare tracks`,
+  );
+  for (const st of screenshareTracks) {
+    livekitRoom.localParticipant
+      .publishTrack(st, {
+        source: Track.Source.ScreenShare,
+      })
+      .catch((e) => {
+        logger.error("Failed to publish screenshare track", e);
+      });
+  }
+}
+
+export function useECConnectionState(
+  initialDeviceId: string | undefined,
+  initialAudioEnabled: boolean,
+  livekitRoom?: Room,
+  sfuConfig?: SFUConfig,
+): ECConnectionState {
+  const [connState, setConnState] = useState(
+    sfuConfig && livekitRoom
+      ? livekitRoom.state
+      : ECAddonConnectionState.ECWaiting,
+  );
+
+  const [isSwitchingFocus, setSwitchingFocus] = useState(false);
+  const [isInDoConnect, setIsInDoConnect] = useState(false);
+  const [error, setError] = useState<ElementCallError | null>(null);
+  if (error !== null) throw error;
+
+  const onConnStateChanged = useCallback((state: ConnectionState) => {
+    if (state == ConnectionState.Connected) setSwitchingFocus(false);
+    setConnState(state);
+  }, []);
+
+  useEffect(() => {
+    const oldRoom = livekitRoom;
+
+    if (livekitRoom) {
+      livekitRoom.on(RoomEvent.ConnectionStateChanged, onConnStateChanged);
+    }
+
+    return (): void => {
+      if (oldRoom)
+        oldRoom.off(RoomEvent.ConnectionStateChanged, onConnStateChanged);
+    };
+  }, [livekitRoom, onConnStateChanged]);
+
+  const doFocusSwitch = useCallback(async (): Promise<void> => {
+    const screenshareTracks: MediaStreamTrack[] = [];
+    for (const t of livekitRoom!.localParticipant.videoTrackPublications.values()) {
+      if (t.track && t.source == Track.Source.ScreenShare) {
+        const newTrack = t.track.mediaStreamTrack.clone();
+        newTrack.enabled = true;
+        screenshareTracks.push(newTrack);
+      }
+    }
+
+    // Flag that we're currently switching focus. This will get reset when the
+    // connection state changes back to connected in onConnStateChanged above.
+    setSwitchingFocus(true);
+    await livekitRoom?.disconnect();
+    setIsInDoConnect(true);
+    try {
+      await connectAndPublish(
+        livekitRoom!,
+        sfuConfig!,
+        undefined,
+        screenshareTracks,
+      );
+    } finally {
+      setIsInDoConnect(false);
+    }
+  }, [livekitRoom, sfuConfig]);
+
+  const currentSFUConfig = useRef(Object.assign({}, sfuConfig));
+
+  // Protection against potential leaks, where the component to be unmounted and there is
+  // still a pending doConnect promise. This would lead the user to still be in the call even
+  // if the component is unmounted.
+  const abortHandlesBag = useRef(new Set<AbortHandle>());
+
+  // This is a cleanup function that will be called when the component is about to be unmounted.
+  // It will cancel all abortHandles in the bag
+  useEffect(() => {
+    const bag = abortHandlesBag.current;
+    return (): void => {
+      bag.forEach((handle) => {
+        handle.abort();
+      });
+    };
+  }, []);
+
+  // Id we are transitioning from a valid config to another valid one, we need
+  // to explicitly switch focus
+  useEffect(() => {
+    if (
+      sfuConfigValid(sfuConfig) &&
+      sfuConfigValid(currentSFUConfig.current) &&
+      !sfuConfigEquals(currentSFUConfig.current, sfuConfig)
+    ) {
+      logger.info(
+        `SFU config changed! URL was ${currentSFUConfig.current?.url} now ${sfuConfig?.url}`,
+      );
+
+      doFocusSwitch().catch((e) => {
+        logger.error("Failed to switch focus", e);
+      });
+    } else if (
+      !sfuConfigValid(currentSFUConfig.current) &&
+      sfuConfigValid(sfuConfig)
+    ) {
+      // if we're transitioning from an invalid config to a valid one (ie. connecting)
+      // then do an initial connection, including publishing the microphone track:
+      // livekit (by default) keeps the mic track open when you mute, but if you start muted,
+      // doesn't publish it until you unmute. We want to publish it from the start so we're
+      // always capturing audio: it helps keep bluetooth headsets in the right mode and
+      // mobile browsers to know we're doing a call.
+      setIsInDoConnect(true);
+      const abortHandle = new AbortHandle();
+      abortHandlesBag.current.add(abortHandle);
+      doConnect(
+        livekitRoom!,
+        sfuConfig!,
+        initialAudioEnabled,
+        initialDeviceId,
+        abortHandle,
+      )
+        .catch((e) => {
+          if (e instanceof ElementCallError) {
+            setError(e); // Bubble up any error screens to React
+          } else if (e instanceof Error) {
+            setError(new UnknownCallError(e));
+          } else logger.error("Failed to connect to SFU", e);
+        })
+        .finally(() => {
+          abortHandlesBag.current.delete(abortHandle);
+          setIsInDoConnect(false);
+        });
+    }
+
+    currentSFUConfig.current = Object.assign({}, sfuConfig);
+  }, [
+    sfuConfig,
+    livekitRoom,
+    initialDeviceId,
+    initialAudioEnabled,
+    doFocusSwitch,
+  ]);
+
+  // Because we create audio tracks by hand, there's more to connecting than
+  // just what LiveKit does in room.connect, and we should continue to return
+  // ConnectionState.Connecting for the entire duration of the doConnect promise
+  return isSwitchingFocus
+    ? ECAddonConnectionState.ECSwitchingFocus
+    : isInDoConnect
+      ? ConnectionState.Connecting
+      : connState;
+}

src/livekit/useLivekit.ts

@@ -0,0 +1,431 @@
+/*
+Copyright 2023, 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import {
+  ConnectionState,
+  type E2EEManagerOptions,
+  ExternalE2EEKeyProvider,
+  type LocalTrackPublication,
+  LocalVideoTrack,
+  Room,
+  type RoomOptions,
+  Track,
+} from "livekit-client";
+import { useEffect, useRef } from "react";
+import E2EEWorker from "livekit-client/e2ee-worker?worker";
+import { logger } from "matrix-js-sdk/lib/logger";
+import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
+import { useObservable, useObservableEagerState } from "observable-hooks";
+import {
+  map,
+  NEVER,
+  type Observable,
+  type Subscription,
+  switchMap,
+} from "rxjs";
+
+import { defaultLiveKitOptions } from "./options";
+import { type SFUConfig } from "./openIDSFU";
+import { type MuteStates } from "../room/MuteStates";
+import { useMediaDevices } from "../MediaDevicesContext";
+import {
+  type ECConnectionState,
+  useECConnectionState,
+} from "./useECConnectionState";
+import { MatrixKeyProvider } from "../e2ee/matrixKeyProvider";
+import { E2eeType } from "../e2ee/e2eeType";
+import { type EncryptionSystem } from "../e2ee/sharedKeyManagement";
+import {
+  useTrackProcessor,
+  useTrackProcessorSync,
+} from "./TrackProcessorContext";
+import { observeTrackReference$ } from "../state/MediaViewModel";
+import { useUrlParams } from "../UrlParams";
+import { useInitial } from "../useInitial";
+import { getValue } from "../utils/observable";
+import { type SelectedDevice } from "../state/MediaDevices";
+
+interface UseLivekitResult {
+  livekitRoom?: Room;
+  connState: ECConnectionState;
+}
+
+export function useLivekit(
+  rtcSession: MatrixRTCSession,
+  muteStates: MuteStates,
+  sfuConfig: SFUConfig | undefined,
+  e2eeSystem: EncryptionSystem,
+): UseLivekitResult {
+  const { controlledAudioDevices } = useUrlParams();
+
+  const initialMuteStates = useInitial(() => muteStates);
+
+  const devices = useMediaDevices();
+  const initialAudioInputId = useInitial(
+    () => getValue(devices.audioInput.selected$)?.id,
+  );
+
+  // Store if audio/video are currently updating. If to prohibit unnecessary calls
+  // to setMicrophoneEnabled/setCameraEnabled
+  const audioMuteUpdating = useRef(false);
+  const videoMuteUpdating = useRef(false);
+  // Store the current button mute state that gets passed to this hook via props.
+  // We need to store it for awaited code that relies on the current value.
+  const buttonEnabled = useRef({
+    audio: initialMuteStates.audio.enabled,
+    video: initialMuteStates.video.enabled,
+  });
+
+  const { processor } = useTrackProcessor();
+
+  // Only ever create the room once via useInitial.
+  const room = useInitial(() => {
+    logger.info("[LivekitRoom] Create LiveKit room");
+
+    let e2ee: E2EEManagerOptions | undefined;
+    if (e2eeSystem.kind === E2eeType.PER_PARTICIPANT) {
+      logger.info("Created MatrixKeyProvider (per participant)");
+      e2ee = {
+        keyProvider: new MatrixKeyProvider(),
+        worker: new E2EEWorker(),
+      };
+    } else if (e2eeSystem.kind === E2eeType.SHARED_KEY && e2eeSystem.secret) {
+      logger.info("Created ExternalE2EEKeyProvider (shared key)");
+      e2ee = {
+        keyProvider: new ExternalE2EEKeyProvider(),
+        worker: new E2EEWorker(),
+      };
+    }
+
+    const roomOptions: RoomOptions = {
+      ...defaultLiveKitOptions,
+      videoCaptureDefaults: {
+        ...defaultLiveKitOptions.videoCaptureDefaults,
+        deviceId: getValue(devices.videoInput.selected$)?.id,
+        processor,
+      },
+      audioCaptureDefaults: {
+        ...defaultLiveKitOptions.audioCaptureDefaults,
+        deviceId: initialAudioInputId,
+      },
+      audioOutput: {
+        // When using controlled audio devices, we don't want to set the
+        // deviceId here, because it will be set by the native app.
+        // (also the id does not need to match a browser device id)
+        deviceId: controlledAudioDevices
+          ? undefined
+          : getValue(devices.audioOutput.selected$)?.id,
+      },
+      e2ee,
+    };
+    // We have to create the room manually here due to a bug inside
+    // @livekit/components-react. JSON.stringify() is used in deps of a
+    // useEffect() with an argument that references itself, if E2EE is enabled
+    const room = new Room(roomOptions);
+    room.setE2EEEnabled(e2eeSystem.kind !== E2eeType.NONE).catch((e) => {
+      logger.error("Failed to set E2EE enabled on room", e);
+    });
+
+    return room;
+  });
+
+  // Setup and update the keyProvider which was create by `createRoom`
+  useEffect(() => {
+    const e2eeOptions = room.options.e2ee;
+    if (
+      e2eeSystem.kind === E2eeType.NONE ||
+      !(e2eeOptions && "keyProvider" in e2eeOptions)
+    )
+      return;
+
+    if (e2eeSystem.kind === E2eeType.PER_PARTICIPANT) {
+      (e2eeOptions.keyProvider as MatrixKeyProvider).setRTCSession(rtcSession);
+    } else if (e2eeSystem.kind === E2eeType.SHARED_KEY && e2eeSystem.secret) {
+      (e2eeOptions.keyProvider as ExternalE2EEKeyProvider)
+        .setKey(e2eeSystem.secret)
+        .catch((e) => {
+          logger.error("Failed to set shared key for E2EE", e);
+        });
+    }
+  }, [room.options.e2ee, e2eeSystem, rtcSession]);
+
+  // Sync the requested track processors with LiveKit
+  useTrackProcessorSync(
+    useObservableEagerState(
+      useObservable(
+        (room$) =>
+          room$.pipe(
+            switchMap(([room]) =>
+              observeTrackReference$(
+                room.localParticipant,
+                Track.Source.Camera,
+              ),
+            ),
+            map((trackRef) => {
+              const track = trackRef?.publication?.track;
+              return track instanceof LocalVideoTrack ? track : null;
+            }),
+          ),
+        [room],
+      ),
+    ),
+  );
+
+  const connectionState = useECConnectionState(
+    initialAudioInputId,
+    initialMuteStates.audio.enabled,
+    room,
+    sfuConfig,
+  );
+
+  // Log errors when local participant has issues publishing a track.
+  useEffect(() => {
+    const localTrackUnpublishedFn = (
+      publication: LocalTrackPublication,
+    ): void => {
+      logger.info(
+        "Local track unpublished",
+        publication.trackName,
+        publication.trackInfo,
+      );
+    };
+    const mediaDevicesErrorFn = (error: Error): void => {
+      logger.warn("Media devices error when publishing a track", error);
+    };
+
+    room.localParticipant.on("localTrackUnpublished", localTrackUnpublishedFn);
+    room.localParticipant.on("mediaDevicesError", mediaDevicesErrorFn);
+
+    return (): void => {
+      room.localParticipant.off(
+        "localTrackUnpublished",
+        localTrackUnpublishedFn,
+      );
+      room.localParticipant.off("mediaDevicesError", mediaDevicesErrorFn);
+    };
+  }, [room.localParticipant]);
+
+  useEffect(() => {
+    // Sync the requested mute states with LiveKit's mute states. We do it this
+    // way around rather than using LiveKit as the source of truth, so that the
+    // states can be consistent throughout the lobby and loading screens.
+    // It's important that we only do this in the connected state, because
+    // LiveKit's internal mute states aren't consistent during connection setup,
+    // and setting tracks to be enabled during this time causes errors.
+    if (room !== undefined && connectionState === ConnectionState.Connected) {
+      const participant = room.localParticipant;
+      // Always update the muteButtonState Ref so that we can read the current
+      // state in awaited blocks.
+      buttonEnabled.current = {
+        audio: muteStates.audio.enabled,
+        video: muteStates.video.enabled,
+      };
+
+      enum MuteDevice {
+        Microphone,
+        Camera,
+      }
+
+      const syncMuteState = async (
+        iterCount: number,
+        type: MuteDevice,
+      ): Promise<void> => {
+        // The approach for muting is to always bring the actual livekit state in sync with the button
+        // This allows for a very predictable and reactive behavior for the user.
+        // (the new state is the old state when pressing the button n times (where n is even))
+        // (the new state is different to the old state when pressing the button n times (where n is uneven))
+        // In case there are issues with the device there might be situations where setMicrophoneEnabled/setCameraEnabled
+        // return immediately. This should be caught with the Error("track with new mute state could not be published").
+        // For now we are still using an iterCount to limit the recursion loop to 10.
+        // This could happen if the device just really does not want to turn on (hardware based issue)
+        // but the mute button is in unmute state.
+        // For now our fail mode is to just stay in this state.
+        // TODO: decide for a UX on how that fail mode should be treated (disable button, hide button, sync button back to muted without user input)
+
+        if (iterCount > 10) {
+          logger.error(
+            "Stop trying to sync the input device with current mute state after 10 failed tries",
+          );
+          return;
+        }
+        let devEnabled;
+        let btnEnabled;
+        let updating;
+        switch (type) {
+          case MuteDevice.Microphone:
+            devEnabled = participant.isMicrophoneEnabled;
+            btnEnabled = buttonEnabled.current.audio;
+            updating = audioMuteUpdating.current;
+            break;
+          case MuteDevice.Camera:
+            devEnabled = participant.isCameraEnabled;
+            btnEnabled = buttonEnabled.current.video;
+            updating = videoMuteUpdating.current;
+            break;
+        }
+        if (devEnabled !== btnEnabled && !updating) {
+          try {
+            let trackPublication;
+            switch (type) {
+              case MuteDevice.Microphone:
+                audioMuteUpdating.current = true;
+                trackPublication = await participant.setMicrophoneEnabled(
+                  buttonEnabled.current.audio,
+                  room.options.audioCaptureDefaults,
+                );
+                audioMuteUpdating.current = false;
+                break;
+              case MuteDevice.Camera:
+                videoMuteUpdating.current = true;
+                trackPublication = await participant.setCameraEnabled(
+                  buttonEnabled.current.video,
+                  room.options.videoCaptureDefaults,
+                );
+                videoMuteUpdating.current = false;
+                break;
+            }
+
+            if (trackPublication) {
+              // await participant.setMicrophoneEnabled can return immediately in some instances,
+              // so that participant.isMicrophoneEnabled !== buttonEnabled.current.audio still holds true.
+              // This happens if the device is still in a pending state
+              // "sleeping" here makes sure we let react do its thing so that participant.isMicrophoneEnabled is updated,
+              // so we do not end up in a recursion loop.
+              await new Promise((r) => setTimeout(r, 100));
+
+              // track got successfully changed to mute/unmute
+              // Run the check again after the change is done. Because the user
+              // can update the state (presses mute button) while the device is enabling
+              // itself we need might need to update the mute state right away.
+              // This async recursion makes sure that setCamera/MicrophoneEnabled is
+              // called as little times as possible.
+              await syncMuteState(iterCount + 1, type);
+            } else {
+              throw new Error(
+                "track with new mute state could not be published",
+              );
+            }
+          } catch (e) {
+            if ((e as DOMException).name === "NotAllowedError") {
+              logger.error(
+                "Fatal error while syncing mute state: resetting",
+                e,
+              );
+              if (type === MuteDevice.Microphone) {
+                audioMuteUpdating.current = false;
+                muteStates.audio.setEnabled?.(false);
+              } else {
+                videoMuteUpdating.current = false;
+                muteStates.video.setEnabled?.(false);
+              }
+            } else {
+              logger.error(
+                "Failed to sync audio mute state with LiveKit (will retry to sync in 1s):",
+                e,
+              );
+              setTimeout(() => {
+                syncMuteState(iterCount + 1, type).catch((e) => {
+                  logger.error(
+                    `Failed to sync ${MuteDevice[type]} mute state with LiveKit iterCount=${iterCount + 1}`,
+                    e,
+                  );
+                });
+              }, 1000);
+            }
+          }
+        }
+      };
+
+      syncMuteState(0, MuteDevice.Microphone).catch((e) => {
+        logger.error("Failed to sync audio mute state with LiveKit", e);
+      });
+      syncMuteState(0, MuteDevice.Camera).catch((e) => {
+        logger.error("Failed to sync video mute state with LiveKit", e);
+      });
+    }
+  }, [room, muteStates, connectionState]);
+
+  useEffect(() => {
+    // Sync the requested devices with LiveKit's devices
+    if (room !== undefined && connectionState === ConnectionState.Connected) {
+      const syncDevice = (
+        kind: MediaDeviceKind,
+        selected$: Observable<SelectedDevice | undefined>,
+      ): Subscription =>
+        selected$.subscribe((device) => {
+          logger.info(
+            "[LivekitRoom] syncDevice room.getActiveDevice(kind) !== d.id :",
+            room.getActiveDevice(kind),
+            " !== ",
+            device?.id,
+          );
+          if (
+            device !== undefined &&
+            room.getActiveDevice(kind) !== device.id
+          ) {
+            room
+              .switchActiveDevice(kind, device.id)
+              .catch((e) =>
+                logger.error(`Failed to sync ${kind} device with LiveKit`, e),
+              );
+          }
+        });
+
+      const subscriptions = [
+        syncDevice("audioinput", devices.audioInput.selected$),
+        !controlledAudioDevices
+          ? syncDevice("audiooutput", devices.audioOutput.selected$)
+          : undefined,
+        syncDevice("videoinput", devices.videoInput.selected$),
+        // Restart the audio input track whenever we detect that the active media
+        // device has changed to refer to a different hardware device. We do this
+        // for the sake of Chrome, which provides a "default" device that is meant
+        // to match the system's default audio input, whatever that may be.
+        // This is special-cased for only audio inputs because we need to dig around
+        // in the LocalParticipant object for the track object and there's not a nice
+        // way to do that generically. There is usually no OS-level default video capture
+        // device anyway, and audio outputs work differently.
+        devices.audioInput.selected$
+          .pipe(switchMap((device) => device?.hardwareDeviceChange$ ?? NEVER))
+          .subscribe(() => {
+            const activeMicTrack = Array.from(
+              room.localParticipant.audioTrackPublications.values(),
+            ).find((d) => d.source === Track.Source.Microphone)?.track;
+
+            if (
+              activeMicTrack &&
+              // only restart if the stream is still running: LiveKit will detect
+              // when a track stops & restart appropriately, so this is not our job.
+              // Plus, we need to avoid restarting again if the track is already in
+              // the process of being restarted.
+              activeMicTrack.mediaStreamTrack.readyState !== "ended"
+            ) {
+              // Restart the track, which will cause Livekit to do another
+              // getUserMedia() call with deviceId: default to get the *new* default device.
+              // Note that room.switchActiveDevice() won't work: Livekit will ignore it because
+              // the deviceId hasn't changed (was & still is default).
+              room.localParticipant
+                .getTrackPublication(Track.Source.Microphone)
+                ?.audioTrack?.restartTrack()
+                .catch((e) => {
+                  logger.error(`Failed to restart audio device track`, e);
+                });
+            }
+          }),
+      ];
+
+      return (): void => {
+        for (const s of subscriptions) s?.unsubscribe();
+      };
+    }
+  }, [room, devices, connectionState, controlledAudioDevices]);
+
+  return {
+    connState: connectionState,
+    livekitRoom: room,
+  };
+}

src/main.tsx

@@ -24,7 +24,6 @@ import { App } from "./App";
 import { init as initRageshake } from "./settings/rageshake";
 import { Initializer } from "./initializer";
 import { AppViewModel } from "./state/AppViewModel";
-import { globalScope } from "./state/ObservableScope";
 
 window.setLKLogLevel = setLKLogLevel;
 
@@ -62,7 +61,7 @@ Initializer.initBeforeReact()
   .then(() => {
     root.render(
       <StrictMode>
-        <App vm={new AppViewModel(globalScope)} />
+        <App vm={new AppViewModel()} />
       </StrictMode>,
     );
   })

src/reactions/ReactionsReader.test.tsx

@@ -7,6 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { renderHook } from "@testing-library/react";
 import { afterEach, test, vitest } from "vitest";
+import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
 import {
   RoomEvent as MatrixRoomEvent,
   MatrixEvent,
@@ -23,7 +24,7 @@ import {
   localRtcMember,
 } from "../utils/test-fixtures";
 import { getBasicRTCSession } from "../utils/test-viewmodel";
-import { testScope, withTestScheduler } from "../utils/test";
+import { withTestScheduler } from "../utils/test";
 import { ElementCallReactionEventType, ReactionSet } from ".";
 
 afterEach(() => {
@@ -37,8 +38,7 @@ test("handles a hand raised reaction", () => {
   withTestScheduler(({ schedule, expectObservable }) => {
     renderHook(() => {
       const { raisedHands$ } = new ReactionsReader(
-        testScope(),
-        rtcSession.asMockedSession(),
+        rtcSession as unknown as MatrixRTCSession,
       );
       schedule("ab", {
         a: () => {},
@@ -48,7 +48,7 @@ test("handles a hand raised reaction", () => {
             new MatrixEvent({
               room_id: rtcSession.room.roomId,
               event_id: reactionEventId,
-              sender: localRtcMember.userId,
+              sender: localRtcMember.sender,
               type: EventType.Reaction,
               origin_server_ts: localTimestamp.getTime(),
               content: {
@@ -68,7 +68,7 @@ test("handles a hand raised reaction", () => {
       expectObservable(raisedHands$).toBe("ab", {
         a: {},
         b: {
-          [`${localRtcMember.userId}:${localRtcMember.deviceId}`]: {
+          [`${localRtcMember.sender}:${localRtcMember.deviceId}`]: {
             reactionEventId,
             membershipEventId: localRtcMember.eventId,
             time: localTimestamp,
@@ -86,8 +86,7 @@ test("handles a redaction", () => {
   withTestScheduler(({ schedule, expectObservable }) => {
     renderHook(() => {
       const { raisedHands$ } = new ReactionsReader(
-        testScope(),
-        rtcSession.asMockedSession(),
+        rtcSession as unknown as MatrixRTCSession,
       );
       schedule("abc", {
         a: () => {},
@@ -97,7 +96,7 @@ test("handles a redaction", () => {
             new MatrixEvent({
               room_id: rtcSession.room.roomId,
               event_id: reactionEventId,
-              sender: localRtcMember.userId,
+              sender: localRtcMember.sender,
               type: EventType.Reaction,
               origin_server_ts: localTimestamp.getTime(),
               content: {
@@ -119,7 +118,7 @@ test("handles a redaction", () => {
             new MatrixEvent({
               room_id: rtcSession.room.roomId,
               event_id: reactionEventId,
-              sender: localRtcMember.userId,
+              sender: localRtcMember.sender,
               type: EventType.RoomRedaction,
               redacts: reactionEventId,
             }),
@@ -131,7 +130,7 @@ test("handles a redaction", () => {
       expectObservable(raisedHands$).toBe("abc", {
         a: {},
         b: {
-          [`${localRtcMember.userId}:${localRtcMember.deviceId}`]: {
+          [`${localRtcMember.sender}:${localRtcMember.deviceId}`]: {
             reactionEventId,
             membershipEventId: localRtcMember.eventId,
             time: localTimestamp,
@@ -150,8 +149,7 @@ test("handles waiting for event decryption", () => {
   withTestScheduler(({ schedule, expectObservable }) => {
     renderHook(() => {
       const { raisedHands$ } = new ReactionsReader(
-        testScope(),
-        rtcSession.asMockedSession(),
+        rtcSession as unknown as MatrixRTCSession,
       );
       schedule("abc", {
         a: () => {},
@@ -159,7 +157,7 @@ test("handles waiting for event decryption", () => {
           const encryptedEvent = new MatrixEvent({
             room_id: rtcSession.room.roomId,
             event_id: reactionEventId,
-            sender: localRtcMember.userId,
+            sender: localRtcMember.sender,
             type: EventType.Reaction,
             origin_server_ts: localTimestamp.getTime(),
             content: {
@@ -186,7 +184,7 @@ test("handles waiting for event decryption", () => {
             new MatrixEvent({
               room_id: rtcSession.room.roomId,
               event_id: reactionEventId,
-              sender: localRtcMember.userId,
+              sender: localRtcMember.sender,
               type: EventType.Reaction,
               origin_server_ts: localTimestamp.getTime(),
               content: {
@@ -202,7 +200,7 @@ test("handles waiting for event decryption", () => {
       expectObservable(raisedHands$).toBe("a-c", {
         a: {},
         c: {
-          [`${localRtcMember.userId}:${localRtcMember.deviceId}`]: {
+          [`${localRtcMember.sender}:${localRtcMember.deviceId}`]: {
             reactionEventId,
             membershipEventId: localRtcMember.eventId,
             time: localTimestamp,
@@ -220,8 +218,7 @@ test("hands rejecting events without a proper membership", () => {
   withTestScheduler(({ schedule, expectObservable }) => {
     renderHook(() => {
       const { raisedHands$ } = new ReactionsReader(
-        testScope(),
-        rtcSession.asMockedSession(),
+        rtcSession as unknown as MatrixRTCSession,
       );
       schedule("ab", {
         a: () => {},
@@ -231,7 +228,7 @@ test("hands rejecting events without a proper membership", () => {
             new MatrixEvent({
               room_id: rtcSession.room.roomId,
               event_id: reactionEventId,
-              sender: localRtcMember.userId,
+              sender: localRtcMember.sender,
               type: EventType.Reaction,
               origin_server_ts: localTimestamp.getTime(),
               content: {
@@ -266,8 +263,7 @@ test("handles a reaction", () => {
   withTestScheduler(({ schedule, time, expectObservable }) => {
     renderHook(() => {
       const { reactions$ } = new ReactionsReader(
-        testScope(),
-        rtcSession.asMockedSession(),
+        rtcSession as unknown as MatrixRTCSession,
       );
       schedule(`abc`, {
         a: () => {},
@@ -277,7 +273,7 @@ test("handles a reaction", () => {
             new MatrixEvent({
               room_id: rtcSession.room.roomId,
               event_id: reactionEventId,
-              sender: localRtcMember.userId,
+              sender: localRtcMember.sender,
               type: ElementCallReactionEventType,
               content: {
                 emoji: reaction.emoji,
@@ -302,7 +298,7 @@ test("handles a reaction", () => {
         {
           a: {},
           b: {
-            [`${localRtcMember.userId}:${localRtcMember.deviceId}`]: {
+            [`${localRtcMember.sender}:${localRtcMember.deviceId}`]: {
               reactionOption: reaction,
               expireAfter: new Date(REACTION_ACTIVE_TIME_MS),
             },
@@ -325,8 +321,7 @@ test("ignores bad reaction events", () => {
   withTestScheduler(({ schedule, expectObservable }) => {
     renderHook(() => {
       const { reactions$ } = new ReactionsReader(
-        testScope(),
-        rtcSession.asMockedSession(),
+        rtcSession as unknown as MatrixRTCSession,
       );
       schedule("ab", {
         a: () => {},
@@ -337,7 +332,7 @@ test("ignores bad reaction events", () => {
             new MatrixEvent({
               room_id: rtcSession.room.roomId,
               event_id: reactionEventId,
-              sender: localRtcMember.userId,
+              sender: localRtcMember.sender,
               type: ElementCallReactionEventType,
               content: {},
             }),
@@ -352,7 +347,7 @@ test("ignores bad reaction events", () => {
             new MatrixEvent({
               room_id: rtcSession.room.roomId,
               event_id: reactionEventId,
-              sender: localRtcMember.userId,
+              sender: localRtcMember.sender,
               type: ElementCallReactionEventType,
               content: {
                 emoji: reaction.emoji,
@@ -373,7 +368,7 @@ test("ignores bad reaction events", () => {
             new MatrixEvent({
               room_id: rtcSession.room.roomId,
               event_id: reactionEventId,
-              sender: aliceRtcMember.userId,
+              sender: aliceRtcMember.sender,
               type: ElementCallReactionEventType,
               content: {
                 emoji: reaction.emoji,
@@ -394,7 +389,7 @@ test("ignores bad reaction events", () => {
             new MatrixEvent({
               room_id: rtcSession.room.roomId,
               event_id: reactionEventId,
-              sender: localRtcMember.userId,
+              sender: localRtcMember.sender,
               type: ElementCallReactionEventType,
               content: {
                 name: reaction.name,
@@ -414,7 +409,7 @@ test("ignores bad reaction events", () => {
             new MatrixEvent({
               room_id: rtcSession.room.roomId,
               event_id: reactionEventId,
-              sender: localRtcMember.userId,
+              sender: localRtcMember.sender,
               type: ElementCallReactionEventType,
               content: {
                 emoji: " ",
@@ -450,8 +445,7 @@ test("that reactions cannot be spammed", () => {
   withTestScheduler(({ schedule, expectObservable }) => {
     renderHook(() => {
       const { reactions$ } = new ReactionsReader(
-        testScope(),
-        rtcSession.asMockedSession(),
+        rtcSession as unknown as MatrixRTCSession,
       );
       schedule("abcd", {
         a: () => {},
@@ -461,7 +455,7 @@ test("that reactions cannot be spammed", () => {
             new MatrixEvent({
               room_id: rtcSession.room.roomId,
               event_id: reactionEventId,
-              sender: localRtcMember.userId,
+              sender: localRtcMember.sender,
               type: ElementCallReactionEventType,
               content: {
                 emoji: reactionA.emoji,
@@ -483,7 +477,7 @@ test("that reactions cannot be spammed", () => {
             new MatrixEvent({
               room_id: rtcSession.room.roomId,
               event_id: reactionEventId,
-              sender: localRtcMember.userId,
+              sender: localRtcMember.sender,
               type: ElementCallReactionEventType,
               content: {
                 emoji: reactionB.emoji,
@@ -508,7 +502,7 @@ test("that reactions cannot be spammed", () => {
         {
           a: {},
           b: {
-            [`${localRtcMember.userId}:${localRtcMember.deviceId}`]: {
+            [`${localRtcMember.sender}:${localRtcMember.deviceId}`]: {
               reactionOption: reactionA,
               expireAfter: new Date(REACTION_ACTIVE_TIME_MS),
             },

src/reactions/ReactionsReader.ts

@@ -18,7 +18,7 @@ import {
   EventType,
   RoomEvent as MatrixRoomEvent,
 } from "matrix-js-sdk";
-import { BehaviorSubject, delay } from "rxjs";
+import { BehaviorSubject, delay, type Subscription } from "rxjs";
 
 import {
   ElementCallReactionEventType,
@@ -28,7 +28,6 @@ import {
   type RaisedHandInfo,
   type ReactionInfo,
 } from ".";
-import { type ObservableScope } from "../state/ObservableScope";
 
 export const REACTION_ACTIVE_TIME_MS = 3000;
 
@@ -55,13 +54,12 @@ export class ReactionsReader {
    */
   public readonly reactions$ = this.reactionsSubject$.asObservable();
 
-  public constructor(
-    private readonly scope: ObservableScope,
-    private readonly rtcSession: MatrixRTCSession,
-  ) {
+  private readonly reactionsSub: Subscription;
+
+  public constructor(private readonly rtcSession: MatrixRTCSession) {
     // Hide reactions after a given time.
-    this.reactionsSubject$
-      .pipe(delay(REACTION_ACTIVE_TIME_MS), this.scope.bind())
+    this.reactionsSub = this.reactionsSubject$
+      .pipe(delay(REACTION_ACTIVE_TIME_MS))
       .subscribe((reactions) => {
         const date = new Date();
         const nextEntries = Object.fromEntries(
@@ -73,38 +71,15 @@ export class ReactionsReader {
         this.reactionsSubject$.next(nextEntries);
       });
 
-    // TODO: Convert this class to the functional reactive style and get rid of
-    // all this manual setup and teardown for event listeners
-
     this.rtcSession.room.on(MatrixRoomEvent.Timeline, this.handleReactionEvent);
-    this.scope.onEnd(() =>
-      this.rtcSession.room.off(
-        MatrixRoomEvent.Timeline,
-        this.handleReactionEvent,
-      ),
-    );
-
     this.rtcSession.room.on(
       MatrixRoomEvent.Redaction,
       this.handleReactionEvent,
     );
-    this.scope.onEnd(() =>
-      this.rtcSession.room.off(
-        MatrixRoomEvent.Redaction,
-        this.handleReactionEvent,
-      ),
-    );
-
     this.rtcSession.room.client.on(
       MatrixEventEvent.Decrypted,
       this.handleReactionEvent,
     );
-    this.scope.onEnd(() =>
-      this.rtcSession.room.client.off(
-        MatrixEventEvent.Decrypted,
-        this.handleReactionEvent,
-      ),
-    );
 
     // We listen for a local echo to get the real event ID, as timeline events
     // may still be sending.
@@ -112,23 +87,11 @@ export class ReactionsReader {
       MatrixRoomEvent.LocalEchoUpdated,
       this.handleReactionEvent,
     );
-    this.scope.onEnd(() =>
-      this.rtcSession.room.off(
-        MatrixRoomEvent.LocalEchoUpdated,
-        this.handleReactionEvent,
-      ),
-    );
 
-    this.rtcSession.on(
+    rtcSession.on(
       MatrixRTCSessionEvent.MembershipsChanged,
       this.onMembershipsChanged,
     );
-    this.scope.onEnd(() =>
-      this.rtcSession.off(
-        MatrixRTCSessionEvent.MembershipsChanged,
-        this.onMembershipsChanged,
-      ),
-    );
 
     // Run this once to ensure we have fetched the state from the call.
     this.onMembershipsChanged([]);
@@ -167,7 +130,7 @@ export class ReactionsReader {
   private onMembershipsChanged = (oldMemberships: CallMembership[]): void => {
     // Remove any raised hands for users no longer joined to the call.
     for (const identifier of Object.keys(this.raisedHandsSubject$.value).filter(
-      (rhId) => oldMemberships.find((u) => u.userId == rhId),
+      (rhId) => oldMemberships.find((u) => u.sender == rhId),
     )) {
       this.removeRaisedHand(identifier);
     }
@@ -175,10 +138,10 @@ export class ReactionsReader {
     // For each member in the call, check to see if a reaction has
     // been raised and adjust.
     for (const m of this.rtcSession.memberships) {
-      if (!m.userId || !m.eventId) {
+      if (!m.sender || !m.eventId) {
         continue;
       }
-      const identifier = `${m.userId}:${m.deviceId}`;
+      const identifier = `${m.sender}:${m.deviceId}`;
       if (
         this.raisedHandsSubject$.value[identifier] &&
         this.raisedHandsSubject$.value[identifier].membershipEventId !==
@@ -188,13 +151,13 @@ export class ReactionsReader {
         // was raised, reset.
         this.removeRaisedHand(identifier);
       }
-      const reaction = this.getLastReactionEvent(m.eventId, m.userId);
+      const reaction = this.getLastReactionEvent(m.eventId, m.sender);
       if (reaction) {
         const eventId = reaction?.getId();
         if (!eventId) {
           continue;
         }
-        this.addRaisedHand(`${m.userId}:${m.deviceId}`, {
+        this.addRaisedHand(`${m.sender}:${m.deviceId}`, {
           membershipEventId: m.eventId,
           reactionEventId: eventId,
           time: new Date(reaction.localTimestamp),
@@ -256,7 +219,7 @@ export class ReactionsReader {
 
       const membershipEventId = content?.["m.relates_to"]?.event_id;
       const membershipEvent = this.rtcSession.memberships.find(
-        (e) => e.eventId === membershipEventId && e.userId === sender,
+        (e) => e.eventId === membershipEventId && e.sender === sender,
       );
       // Check to see if this reaction was made to a membership event (and the
       // sender of the reaction matches the membership)
@@ -266,8 +229,7 @@ export class ReactionsReader {
         );
         return;
       }
-      // TODO refactor to use memer id `membershipEvent.membershipID` (needs to happen in combination with other memberId refactors)
-      const identifier = `${membershipEvent.userId}:${membershipEvent.deviceId}`;
+      const identifier = `${membershipEvent.sender}:${membershipEvent.deviceId}`;
 
       if (!content.emoji) {
         logger.warn(`Reaction had no emoji from ${reactionEventId}`);
@@ -316,7 +278,7 @@ export class ReactionsReader {
       // Check to see if this reaction was made to a membership event (and the
       // sender of the reaction matches the membership)
       const membershipEvent = this.rtcSession.memberships.find(
-        (e) => e.eventId === membershipEventId && e.userId === sender,
+        (e) => e.eventId === membershipEventId && e.sender === sender,
       );
       if (!membershipEvent) {
         logger.warn(
@@ -327,7 +289,7 @@ export class ReactionsReader {
 
       if (content?.["m.relates_to"].key === "🖐️") {
         this.addRaisedHand(
-          `${membershipEvent.userId}:${membershipEvent.deviceId}`,
+          `${membershipEvent.sender}:${membershipEvent.deviceId}`,
           {
             reactionEventId,
             membershipEventId,
@@ -347,4 +309,31 @@ export class ReactionsReader {
       this.removeRaisedHand(targetUser);
     }
   };
+
+  /**
+   * Stop listening for events.
+   */
+  public destroy(): void {
+    this.rtcSession.off(
+      MatrixRTCSessionEvent.MembershipsChanged,
+      this.onMembershipsChanged,
+    );
+    this.rtcSession.room.off(
+      MatrixRoomEvent.Timeline,
+      this.handleReactionEvent,
+    );
+    this.rtcSession.room.off(
+      MatrixRoomEvent.Redaction,
+      this.handleReactionEvent,
+    );
+    this.rtcSession.room.client.off(
+      MatrixEventEvent.Decrypted,
+      this.handleReactionEvent,
+    );
+    this.rtcSession.room.off(
+      MatrixRoomEvent.LocalEchoUpdated,
+      this.handleReactionEvent,
+    );
+    this.reactionsSub.unsubscribe();
+  }
 }

src/reactions/useReactionsSender.tsx

@@ -20,7 +20,7 @@ import { logger } from "matrix-js-sdk/lib/logger";
 import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships";
 import { useClientState } from "../ClientContext";
 import { ElementCallReactionEventType, type ReactionOption } from ".";
-import { type CallViewModel } from "../state/CallViewModel/CallViewModel";
+import { type CallViewModel } from "../state/CallViewModel";
 import { useBehavior } from "../useBehavior";
 
 interface ReactionsSenderContextType {
@@ -65,7 +65,7 @@ export const ReactionsSenderProvider = ({
   const myMembershipEvent = useMemo(
     () =>
       memberships.find(
-        (m) => m.userId === myUserId && m.deviceId === myDeviceId,
+        (m) => m.sender === myUserId && m.deviceId === myDeviceId,
       )?.eventId,
     [memberships, myUserId, myDeviceId],
   );

src/room/CallEventAudioRenderer.test.tsx

@@ -7,6 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { render } from "@testing-library/react";
 import {
+  afterAll,
   beforeEach,
   expect,
   type MockedFunction,
@@ -15,17 +16,9 @@ import {
   afterEach,
 } from "vitest";
 import { act } from "react";
-import { type RoomMember } from "matrix-js-sdk";
-import {
-  type LivekitTransport,
-  type CallMembership,
-} from "matrix-js-sdk/lib/matrixrtc";
+import { type CallMembership } from "matrix-js-sdk/lib/matrixrtc";
 
-import {
-  exampleTransport,
-  mockMatrixRoomMember,
-  mockRtcMembership,
-} from "../utils/test";
+import { mockRtcMembership } from "../utils/test";
 import { CallEventAudioRenderer } from "./CallEventAudioRenderer";
 import { useAudioContext } from "../useAudioContext";
 import { prefetchSounds } from "../soundUtils";
@@ -33,23 +26,21 @@ import { getBasicCallViewModelEnvironment } from "../utils/test-viewmodel";
 import {
   alice,
   aliceRtcMember,
-  bob,
   bobRtcMember,
   local,
   localRtcMember,
 } from "../utils/test-fixtures";
-import { MAX_PARTICIPANT_COUNT_FOR_SOUND } from "../state/CallViewModel/CallViewModel";
+import { MAX_PARTICIPANT_COUNT_FOR_SOUND } from "../state/CallViewModel";
 
-vitest.mock("livekit-client/e2ee-worker?worker");
 vitest.mock("../useAudioContext");
 vitest.mock("../soundUtils");
-vitest.mock("../rtcSessionHelpers", async (importOriginal) => ({
-  ...(await importOriginal()),
-  makeTransport: (): [LivekitTransport] => [exampleTransport],
-}));
 
 afterEach(() => {
-  vitest.clearAllMocks();
+  vitest.resetAllMocks();
+});
+
+afterAll(() => {
+  vitest.restoreAllMocks();
 });
 
 let playSound: MockedFunction<
@@ -79,7 +70,6 @@ test("plays one sound when entering a call", () => {
   const { vm, rtcMemberships$ } = getBasicCallViewModelEnvironment([
     local,
     alice,
-    bob,
   ]);
   render(<CallEventAudioRenderer vm={vm} />);
 
@@ -94,7 +84,6 @@ test("plays a sound when a user joins", () => {
   const { vm, rtcMemberships$ } = getBasicCallViewModelEnvironment([
     local,
     alice,
-    bob,
   ]);
   render(<CallEventAudioRenderer vm={vm} />);
 
@@ -133,16 +122,15 @@ test("does not play a sound before the call is successful", () => {
 });
 
 test("plays no sound when the participant list is more than the maximum size", () => {
-  const mockMembers: RoomMember[] = [local];
   const mockRtcMemberships: CallMembership[] = [localRtcMember];
   for (let i = 0; i < MAX_PARTICIPANT_COUNT_FOR_SOUND; i++) {
-    const membership = mockRtcMembership(`@user${i}:example.org`, `DEVICE${i}`);
-    mockMembers.push(mockMatrixRoomMember(membership));
-    mockRtcMemberships.push(membership);
+    mockRtcMemberships.push(
+      mockRtcMembership(`@user${i}:example.org`, `DEVICE${i}`),
+    );
   }
 
   const { vm, rtcMemberships$ } = getBasicCallViewModelEnvironment(
-    mockMembers,
+    [local, alice],
     mockRtcMemberships,
   );
 
@@ -162,14 +150,12 @@ test("plays one sound when a hand is raised", () => {
   const { vm, handRaisedSubject$ } = getBasicCallViewModelEnvironment([
     local,
     alice,
-    bob,
   ]);
   render(<CallEventAudioRenderer vm={vm} />);
 
   act(() => {
     handRaisedSubject$.next({
-      // TODO: What is this string supposed to be?
-      [`${bobRtcMember.userId}:${bobRtcMember.deviceId}`]: {
+      [bobRtcMember.callId]: {
         time: new Date(),
         membershipEventId: "",
         reactionEventId: "",

src/room/CallEventAudioRenderer.tsx

@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { type ReactNode, useEffect } from "react";
 
-import { type CallViewModel } from "../state/CallViewModel/CallViewModel";
+import { type CallViewModel } from "../state/CallViewModel";
 import joinCallSoundMp3 from "../sound/join_call.mp3";
 import joinCallSoundOgg from "../sound/join_call.ogg";
 import leftCallSoundMp3 from "../sound/left_call.mp3";

src/room/GroupCallErrorBoundary.test.tsx

@@ -26,7 +26,7 @@ import {
   E2EENotSupportedError,
   type ElementCallError,
   InsufficientCapacityError,
-  MatrixRTCTransportMissingError,
+  MatrixRTCFocusMissingError,
   UnknownCallError,
 } from "../utils/errors.ts";
 import { mockConfig } from "../utils/test.ts";
@@ -34,7 +34,7 @@ import { ElementWidgetActions, type WidgetHelpers } from "../widget.ts";
 
 test.each([
   {
-    error: new MatrixRTCTransportMissingError("example.com"),
+    error: new MatrixRTCFocusMissingError("example.com"),
     expectedTitle: "Call is not supported",
   },
   {
@@ -85,7 +85,7 @@ test.each([
 );
 
 test("should render the error page with link back to home", async () => {
-  const error = new MatrixRTCTransportMissingError("example.com");
+  const error = new MatrixRTCFocusMissingError("example.com");
   const TestComponent = (): ReactNode => {
     throw error;
   };
@@ -106,7 +106,7 @@ test("should render the error page with link back to home", async () => {
   await screen.findByText("Call is not supported");
   expect(screen.getByText(/Domain: example\.com/i)).toBeInTheDocument();
   expect(
-    screen.getByText(/Error Code: MISSING_MATRIX_RTC_TRANSPORT/i),
+    screen.getByText(/Error Code: MISSING_MATRIX_RTC_FOCUS/i),
   ).toBeInTheDocument();
 
   await screen.findByRole("button", { name: "Return to home screen" });
@@ -213,7 +213,7 @@ describe("Rageshake button", () => {
 });
 
 test("should have a close button in widget mode", async () => {
-  const error = new MatrixRTCTransportMissingError("example.com");
+  const error = new MatrixRTCFocusMissingError("example.com");
   const TestComponent = (): ReactNode => {
     throw error;
   };

src/room/GroupCallView.test.tsx

@@ -5,10 +5,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-// TODO-MULTI-SFU: Restore or discard these tests. The role of GroupCallView has
-// changed (it no longer manages the connection to the same extent), so they may
-// need extra work to adapt.
-
 import {
   beforeEach,
   expect,
@@ -30,6 +26,7 @@ import { type RelationsContainer } from "matrix-js-sdk/lib/models/relations-cont
 import { useState } from "react";
 import { TooltipProvider } from "@vector-im/compound-web";
 
+import { type MuteStates } from "./MuteStates";
 import { prefetchSounds } from "../soundUtils";
 import { useAudioContext } from "../useAudioContext";
 import { ActiveCall } from "./InCallView";
@@ -45,12 +42,11 @@ import {
 import { GroupCallView } from "./GroupCallView";
 import { type WidgetHelpers } from "../widget";
 import { LazyEventEmitter } from "../LazyEventEmitter";
-import { MatrixRTCTransportMissingError } from "../utils/errors";
+import { MatrixRTCFocusMissingError } from "../utils/errors";
 import { ProcessorProvider } from "../livekit/TrackProcessorContext";
 import { MediaDevicesContext } from "../MediaDevicesContext";
 import { HeaderStyle } from "../UrlParams";
 import { constant } from "../state/Behavior";
-import { type MuteStates } from "../state/MuteStates.ts";
 
 vi.mock("../soundUtils");
 vi.mock("../useAudioContext");
@@ -77,13 +73,12 @@ const leaveRTCSession = vi.hoisted(() =>
   ),
 );
 
-// vi.mock("../rtcSessionHelpers", async (importOriginal) => {
-//   // TODO: perhaps there is a more elegant way to manage the type import here?
-//   // eslint-disable-next-line @typescript-eslint/consistent-type-imports
-//   const orig = await importOriginal<typeof import("../rtcSessionHelpers")>();
-//   // TODO: leaveRTCSession no longer exists! Tests need adapting.
-//   return { ...orig, enterRTCSession, leaveRTCSession };
-// });
+vi.mock("../rtcSessionHelpers", async (importOriginal) => {
+  // TODO: perhaps there is a more elegant way to manage the type import here?
+  // eslint-disable-next-line @typescript-eslint/consistent-type-imports
+  const orig = await importOriginal<typeof import("../rtcSessionHelpers")>();
+  return { ...orig, enterRTCSession, leaveRTCSession };
+});
 
 let playSound: MockedFunction<
   NonNullable<ReturnType<typeof useAudioContext>>["playSound"]
@@ -108,7 +103,7 @@ beforeEach(() => {
   });
   // A trivial implementation of Active call to ensure we are testing GroupCallView exclusively here.
   (ActiveCall as MockedFunction<typeof ActiveCall>).mockImplementation(
-    ({ onLeft: onLeave }) => {
+    ({ onLeave }) => {
       return (
         <div>
           <button onClick={() => onLeave("user")}>Leave</button>
@@ -122,12 +117,12 @@ function createGroupCallView(
   widget: WidgetHelpers | null,
   joined = true,
 ): {
-  rtcSession: MatrixRTCSession;
+  rtcSession: MockRTCSession;
   getByText: ReturnType<typeof render>["getByText"];
 } {
   const client = {
     getUser: () => null,
-    getUserId: () => localRtcMember.userId,
+    getUserId: () => localRtcMember.sender,
     getDeviceId: () => localRtcMember.deviceId,
     getRoom: (rId) => (rId === roomId ? room : null),
   } as Partial<MatrixClient> as MatrixClient;
@@ -155,8 +150,7 @@ function createGroupCallView(
   const muteState = {
     audio: { enabled: false },
     video: { enabled: false },
-    // TODO-MULTI-SFU: This cast isn't valid, it's likely the cause of some current test failures
-  } as unknown as MuteStates;
+  } as MuteStates;
   const { getByText } = render(
     <BrowserRouter>
       <TooltipProvider>
@@ -169,12 +163,10 @@ function createGroupCallView(
               preload={false}
               skipLobby={false}
               header={HeaderStyle.Standard}
-              rtcSession={rtcSession.asMockedSession()}
+              rtcSession={rtcSession as unknown as MatrixRTCSession}
+              isJoined={joined}
               muteStates={muteState}
               widget={widget}
-              // TODO-MULTI-SFU: Make joined and setJoined work
-              joined={true}
-              setJoined={function (value: boolean): void {}}
             />
           </ProcessorProvider>
         </MediaDevicesContext>
@@ -183,11 +175,11 @@ function createGroupCallView(
   );
   return {
     getByText,
-    rtcSession: rtcSession.asMockedSession(),
+    rtcSession,
   };
 }
 
-test.skip("GroupCallView plays a leave sound asynchronously in SPA mode", async () => {
+test("GroupCallView plays a leave sound asynchronously in SPA mode", async () => {
   const user = userEvent.setup();
   const { getByText, rtcSession } = createGroupCallView(null);
   const leaveButton = getByText("Leave");
@@ -204,7 +196,7 @@ test.skip("GroupCallView plays a leave sound asynchronously in SPA mode", async
   await waitFor(() => expect(leaveRTCSession).toHaveResolved());
 });
 
-test.skip("GroupCallView plays a leave sound synchronously in widget mode", async () => {
+test("GroupCallView plays a leave sound synchronously in widget mode", async () => {
   const user = userEvent.setup();
   const widget = {
     api: {
@@ -243,7 +235,7 @@ test.skip("GroupCallView plays a leave sound synchronously in widget mode", asyn
   expect(leaveRTCSession).toHaveBeenCalledOnce();
 });
 
-test.skip("GroupCallView leaves the session when an error occurs", async () => {
+test("GroupCallView leaves the session when an error occurs", async () => {
   (ActiveCall as MockedFunction<typeof ActiveCall>).mockImplementation(() => {
     const [error, setError] = useState<Error | null>(null);
     if (error !== null) throw error;
@@ -264,10 +256,9 @@ test.skip("GroupCallView leaves the session when an error occurs", async () => {
   );
 });
 
-test.skip("GroupCallView shows errors that occur during joining", async () => {
+test("GroupCallView shows errors that occur during joining", async () => {
   const user = userEvent.setup();
-  // This should not mock this error that deep. it should only mock the CallViewModel.
-  enterRTCSession.mockRejectedValue(new MatrixRTCTransportMissingError(""));
+  enterRTCSession.mockRejectedValue(new MatrixRTCFocusMissingError(""));
   onTestFinished(() => {
     enterRTCSession.mockReset();
   });

src/room/GroupCallView.tsx

@@ -38,9 +38,10 @@ import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { useProfile } from "../profile/useProfile";
 import { findDeviceByName } from "../utils/media";
 import { ActiveCall } from "./InCallView";
-import { type MuteStates } from "../state/MuteStates";
+import { MUTE_PARTICIPANT_COUNT, type MuteStates } from "./MuteStates";
 import { useMediaDevices } from "../MediaDevicesContext";
 import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships";
+import { enterRTCSession, leaveRTCSession } from "../rtcSessionHelpers";
 import {
   saveKeyForRoom,
   useRoomEncryptionSystem,
@@ -49,12 +50,7 @@ import { useRoomAvatar } from "./useRoomAvatar";
 import { useRoomName } from "./useRoomName";
 import { useJoinRule } from "./useJoinRule";
 import { InviteModal } from "./InviteModal";
-import {
-  getUrlParams,
-  HeaderStyle,
-  type UrlParams,
-  useUrlParams,
-} from "../UrlParams";
+import { HeaderStyle, type UrlParams, useUrlParams } from "../UrlParams";
 import { E2eeType } from "../e2ee/e2eeType";
 import { useAudioContext } from "../useAudioContext";
 import {
@@ -70,17 +66,16 @@ import {
   UnknownCallError,
 } from "../utils/errors.ts";
 import { GroupCallErrorBoundary } from "./GroupCallErrorBoundary.tsx";
+import {
+  useNewMembershipManager as useNewMembershipManagerSetting,
+  useExperimentalToDeviceTransport as useExperimentalToDeviceTransportSetting,
+  useSetting,
+} from "../settings/settings";
 import { useTypedEventEmitter } from "../useEvents";
 import { muteAllAudio$ } from "../state/MuteAllAudioModel.ts";
 import { useAppBarTitle } from "../AppBar.tsx";
 import { useBehavior } from "../useBehavior.ts";
 
-/**
- * If there already are this many participants in the call, we automatically mute
- * the user.
- */
-export const MUTE_PARTICIPANT_COUNT = 8;
-
 declare global {
   interface Window {
     rtcSession?: MatrixRTCSession;
@@ -95,8 +90,7 @@ interface Props {
   skipLobby: UrlParams["skipLobby"];
   header: HeaderStyle;
   rtcSession: MatrixRTCSession;
-  joined: boolean;
-  setJoined: (value: boolean) => void;
+  isJoined: boolean;
   muteStates: MuteStates;
   widget: WidgetHelpers | null;
 }
@@ -109,8 +103,7 @@ export const GroupCallView: FC<Props> = ({
   skipLobby,
   header,
   rtcSession,
-  joined,
-  setJoined,
+  isJoined,
   muteStates,
   widget,
 }) => {
@@ -131,10 +124,20 @@ export const GroupCallView: FC<Props> = ({
   // This should use `useEffectEvent` (only available in experimental versions)
   useEffect(() => {
     if (memberships.length >= MUTE_PARTICIPANT_COUNT)
-      muteStates.audio.setEnabled$.value?.(false);
+      muteStates.audio.setEnabled?.(false);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // Update our member event when our mute state changes.
+  useEffect(() => {
+    if (!isJoined) {
+      return;
+    }
+    void rtcSession.updateCallIntent(
+      muteStates.video.enabled ? "video" : "audio",
+    );
+  }, [rtcSession, isJoined, muteStates.video.enabled]);
+
   useEffect(() => {
     logger.info("[Lifecycle] GroupCallView Component mounted");
     return (): void => {
@@ -182,6 +185,10 @@ export const GroupCallView: FC<Props> = ({
     password: passwordFromUrl,
   } = useUrlParams();
   const e2eeSystem = useRoomEncryptionSystem(room.roomId);
+  const [useNewMembershipManager] = useSetting(useNewMembershipManagerSetting);
+  const [useExperimentalToDeviceTransport] = useSetting(
+    useExperimentalToDeviceTransportSetting,
+  );
 
   // Save the password once we start the groupCallView
   useEffect(() => {
@@ -206,7 +213,7 @@ export const GroupCallView: FC<Props> = ({
 
   // Count each member only once, regardless of how many devices they use
   const participantCount = useMemo(
-    () => new Set<string>(memberships.map((m) => m.userId!)).size,
+    () => new Set<string>(memberships.map((m) => m.sender!)).size,
     [memberships],
   );
 
@@ -216,9 +223,12 @@ export const GroupCallView: FC<Props> = ({
   const enterRTCSessionOrError = useCallback(
     async (rtcSession: MatrixRTCSession): Promise<void> => {
       try {
-        setJoined(true);
-        // TODO-MULTI-SFU what to do with error handling now that we don't use this function?
-        // @BillCarsonFr
+        await enterRTCSession(
+          rtcSession,
+          perParticipantE2EE,
+          useNewMembershipManager,
+          useExperimentalToDeviceTransport,
+        );
       } catch (e) {
         if (e instanceof ElementCallError) {
           setExternalError(e);
@@ -230,9 +240,12 @@ export const GroupCallView: FC<Props> = ({
           setExternalError(error);
         }
       }
-      return Promise.resolve();
     },
-    [setJoined],
+    [
+      perParticipantE2EE,
+      useExperimentalToDeviceTransport,
+      useNewMembershipManager,
+    ],
   );
 
   useEffect(() => {
@@ -251,7 +264,7 @@ export const GroupCallView: FC<Props> = ({
         if (!deviceId) {
           logger.warn("Unknown audio input: " + audioInput);
           // override the default mute state
-          latestMuteStates.current!.audio.setEnabled$.value?.(false);
+          latestMuteStates.current!.audio.setEnabled?.(false);
         } else {
           logger.debug(
             `Found audio input ID ${deviceId} for name ${audioInput}`,
@@ -265,7 +278,7 @@ export const GroupCallView: FC<Props> = ({
         if (!deviceId) {
           logger.warn("Unknown video input: " + videoInput);
           // override the default mute state
-          latestMuteStates.current!.video.setEnabled$.value?.(false);
+          latestMuteStates.current!.video.setEnabled?.(false);
         } else {
           logger.debug(
             `Found video input ID ${deviceId} for name ${videoInput}`,
@@ -281,7 +294,7 @@ export const GroupCallView: FC<Props> = ({
         const onJoin = (ev: CustomEvent<IWidgetApiRequest>): void => {
           (async (): Promise<void> => {
             await defaultDeviceSetup(ev.detail.data as unknown as JoinCallData);
-            setJoined(true);
+            await enterRTCSessionOrError(rtcSession);
             widget.api.transport.reply(ev.detail, {});
           })().catch((e) => {
             logger.error("Error joining RTC session on preload", e);
@@ -293,7 +306,11 @@ export const GroupCallView: FC<Props> = ({
         };
       } else {
         // No lobby and no preload: we enter the rtc session right away
-        setJoined(true);
+        (async (): Promise<void> => {
+          await enterRTCSessionOrError(rtcSession);
+        })().catch((e) => {
+          logger.error("Error joining RTC session immediately", e);
+        });
       }
     }
   }, [
@@ -304,85 +321,61 @@ export const GroupCallView: FC<Props> = ({
     perParticipantE2EE,
     mediaDevices,
     latestMuteStates,
-    setJoined,
+    enterRTCSessionOrError,
+    useNewMembershipManager,
   ]);
 
-  // TODO refactor this + "joined" to just one callState
   const [left, setLeft] = useState(false);
 
   const navigate = useNavigate();
 
-  const onLeft = useCallback(
-    (reason: "timeout" | "user" | "allOthersLeft" | "decline"): void => {
-      let playSound: CallEventSounds = "left";
-      if (reason === "timeout" || reason === "decline") playSound = reason;
-
-      setJoined(false);
-      setLeft(true);
+  const onLeave = useCallback(
+    (
+      cause: "user" | "error" = "user",
+      playSound: CallEventSounds = "left",
+    ): void => {
       const audioPromise = leaveSoundContext.current?.playSound(playSound);
-      // We need to wait until the callEnded event is tracked on PostHog,
-      // otherwise the iframe may get killed first.
+      // In embedded/widget mode the iFrame will be killed right after the call ended prohibiting the posthog event from getting sent,
+      // therefore we want the event to be sent instantly without getting queued/batched.
+      const sendInstantly = !!widget;
+      setLeft(true);
+      // we need to wait until the callEnded event is tracked on posthog.
+      // Otherwise the iFrame gets killed before the callEnded event got tracked.
       const posthogRequest = new Promise((resolve) => {
-        // To increase the likelihood of the PostHog event being sent out in
-        // widget mode before the iframe is killed, we ask it to skip the
-        // usual queuing/batching of requests.
-        const sendInstantly = widget !== null;
         PosthogAnalytics.instance.eventCallEnded.track(
           room.roomId,
           rtcSession.memberships.length,
           sendInstantly,
           rtcSession,
         );
-        // Unfortunately the PostHog library provides no way to await the
-        // tracking of an event, but we don't really want it to hold up the
-        // closing of the widget that long anyway, so giving it 10 ms will do.
         window.setTimeout(resolve, 10);
       });
 
-      void Promise.all([audioPromise, posthogRequest])
-        .catch((e) =>
-          logger.error(
-            "Failed to play leave audio and/or send PostHog leave event",
-            e,
-          ),
-        )
+      leaveRTCSession(
+        rtcSession,
+        cause,
+        // Wait for the sound in widget mode (it's not long)
+        Promise.all([audioPromise, posthogRequest]),
+      )
+        // Only sends matrix leave event. The Livekit session will disconnect once the ActiveCall-view unmounts.
         .then(async () => {
           if (
             !isPasswordlessUser &&
             !confineToRoom &&
             !PosthogAnalytics.instance.isEnabled()
-          )
-            void navigate("/");
-
-          if (widget) {
-            // After this point the iframe could die at any moment!
-            try {
-              await widget.api.setAlwaysOnScreen(false);
-            } catch (e) {
-              logger.error(
-                "Failed to set call widget `alwaysOnScreen` to false",
-                e,
-              );
-            }
-            // On a normal user hangup we can shut down and close the widget. But if an
-            // error occurs we should keep the widget open until the user reads it.
-            if (reason === "user" && !getUrlParams().returnToLobby) {
-              try {
-                await widget.api.transport.send(ElementWidgetActions.Close, {});
-              } catch (e) {
-                logger.error("Failed to send close action", e);
-              }
-              widget.api.transport.stop();
-            }
+          ) {
+            await navigate("/");
           }
+        })
+        .catch((e) => {
+          logger.error("Error leaving RTC session", e);
         });
     },
     [
-      setJoined,
       leaveSoundContext,
       widget,
-      room.roomId,
       rtcSession,
+      room.roomId,
       isPasswordlessUser,
       confineToRoom,
       navigate,
@@ -390,12 +383,25 @@ export const GroupCallView: FC<Props> = ({
   );
 
   useEffect(() => {
-    if (widget && joined)
+    if (widget && isJoined) {
       // set widget to sticky once joined.
       widget.api.setAlwaysOnScreen(true).catch((e) => {
         logger.error("Error calling setAlwaysOnScreen(true)", e);
       });
-  }, [widget, joined, rtcSession]);
+
+      const onHangup = (ev: CustomEvent<IWidgetApiRequest>): void => {
+        widget.api.transport.reply(ev.detail, {});
+        // Only sends matrix leave event. The Livekit session will disconnect once the ActiveCall-view unmounts.
+        leaveRTCSession(rtcSession, "user").catch((e) => {
+          logger.error("Failed to leave RTC session", e);
+        });
+      };
+      widget.lazyActions.once(ElementWidgetActions.HangupCall, onHangup);
+      return (): void => {
+        widget.lazyActions.off(ElementWidgetActions.HangupCall, onHangup);
+      };
+    }
+  }, [widget, isJoined, rtcSession]);
 
   const joinRule = useJoinRule(room);
 
@@ -430,7 +436,7 @@ export const GroupCallView: FC<Props> = ({
         client={client}
         matrixInfo={matrixInfo}
         muteStates={muteStates}
-        onEnter={() => setJoined(true)}
+        onEnter={async () => enterRTCSessionOrError(rtcSession)}
         confineToRoom={confineToRoom}
         hideHeader={header === HeaderStyle.None}
         participantCount={participantCount}
@@ -448,7 +454,7 @@ export const GroupCallView: FC<Props> = ({
       throw externalError;
     };
     body = <ErrorComponent />;
-  } else if (joined) {
+  } else if (isJoined) {
     body = (
       <>
         {shareModal}
@@ -457,7 +463,7 @@ export const GroupCallView: FC<Props> = ({
           matrixInfo={matrixInfo}
           rtcSession={rtcSession as MatrixRTCSession}
           matrixRoom={room}
-          onLeft={onLeft}
+          onLeave={onLeave}
           header={header}
           muteStates={muteStates}
           e2eeSystem={e2eeSystem}
@@ -518,8 +524,7 @@ export const GroupCallView: FC<Props> = ({
       }}
       onError={
         (/**error*/) => {
-          // TODO this should not be "user". It needs a new case
-          if (rtcSession.isJoined()) onLeft("user");
+          if (rtcSession.isJoined()) onLeave("error");
         }
       }
     >

src/room/InCallView.test.tsx

@@ -13,15 +13,18 @@ import {
   type MockedFunction,
   vi,
 } from "vitest";
-import { render, type RenderResult } from "@testing-library/react";
+import { act, render, type RenderResult } from "@testing-library/react";
 import { type MatrixClient, JoinRule, type RoomState } from "matrix-js-sdk";
+import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
 import { type RelationsContainer } from "matrix-js-sdk/lib/models/relations-container";
 import { type LocalParticipant } from "livekit-client";
 import { of } from "rxjs";
 import { BrowserRouter } from "react-router-dom";
 import { TooltipProvider } from "@vector-im/compound-web";
 import { RoomContext, useLocalParticipant } from "@livekit/components-react";
+import { RoomAndToDeviceEvents } from "matrix-js-sdk/lib/matrixrtc/RoomAndToDeviceKeyTransport";
 
+import { type MuteStates } from "./MuteStates";
 import { InCallView } from "./InCallView";
 import {
   mockLivekitRoom,
@@ -29,7 +32,6 @@ import {
   mockMatrixRoom,
   mockMatrixRoomMember,
   mockMediaDevices,
-  mockMuteStates,
   mockRemoteParticipant,
   mockRtcMembership,
   type MockRTCSession,
@@ -37,12 +39,19 @@ import {
 import { E2eeType } from "../e2ee/e2eeType";
 import { getBasicCallViewModelEnvironment } from "../utils/test-viewmodel";
 import { alice, local } from "../utils/test-fixtures";
+import {
+  developerMode as developerModeSetting,
+  useExperimentalToDeviceTransport as useExperimentalToDeviceTransportSetting,
+} from "../settings/settings";
 import { ReactionsSenderProvider } from "../reactions/useReactionsSender";
 import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
-import { LivekitRoomAudioRenderer } from "../livekit/MatrixAudioRenderer";
+import { MatrixAudioRenderer } from "../livekit/MatrixAudioRenderer";
 import { MediaDevicesContext } from "../MediaDevicesContext";
 import { HeaderStyle } from "../UrlParams";
 
+// vi.hoisted(() => {
+//   localStorage = {} as unknown as Storage;
+// });
 vi.hoisted(
   () =>
     (global.ImageData = class MockImageData {
@@ -55,7 +64,6 @@ vi.mock("../useAudioContext");
 vi.mock("../tile/GridTile");
 vi.mock("../tile/SpotlightTile");
 vi.mock("@livekit/components-react");
-vi.mock("livekit-client/e2ee-worker?worker");
 vi.mock("../e2ee/sharedKeyManagement");
 vi.mock("../livekit/MatrixAudioRenderer");
 vi.mock("react-use-measure", () => ({
@@ -80,7 +88,7 @@ beforeEach(() => {
 
   // MatrixAudioRenderer is tested separately.
   (
-    LivekitRoomAudioRenderer as MockedFunction<typeof LivekitRoomAudioRenderer>
+    MatrixAudioRenderer as MockedFunction<typeof MatrixAudioRenderer>
   ).mockImplementation((_props) => {
     return <div>mocked: MatrixAudioRenderer</div>;
   });
@@ -103,10 +111,9 @@ function createInCallView(): RenderResult & {
 } {
   const client = {
     getUser: () => null,
-    getUserId: () => localRtcMember.userId,
+    getUserId: () => localRtcMember.sender,
     getDeviceId: () => localRtcMember.deviceId,
     getRoom: (rId) => (rId === roomId ? room : null),
-    getDomain: () => "example.com",
   } as Partial<MatrixClient> as MatrixClient;
   const room = mockMatrixRoom({
     relations: {
@@ -117,8 +124,7 @@ function createInCallView(): RenderResult & {
     } as unknown as RelationsContainer,
     client,
     roomId,
-    // getMember: (userId) => roomMembers.get(userId) ?? null,
-    getMembers: () => Array.from(roomMembers.values()),
+    getMember: (userId) => roomMembers.get(userId) ?? null,
     getMxcAvatarUrl: () => null,
     hasEncryptionStateEvent: vi.fn().mockReturnValue(true),
     getCanonicalAlias: () => null,
@@ -127,7 +133,10 @@ function createInCallView(): RenderResult & {
     } as Partial<RoomState> as RoomState,
   });
 
-  const muteState = mockMuteStates();
+  const muteState = {
+    audio: { enabled: false },
+    video: { enabled: false },
+  } as MuteStates;
   const livekitRoom = mockLivekitRoom(
     {
       localParticipant,
@@ -144,14 +153,14 @@ function createInCallView(): RenderResult & {
       <MediaDevicesContext value={mockMediaDevices({})}>
         <ReactionsSenderProvider
           vm={vm}
-          rtcSession={rtcSession.asMockedSession()}
+          rtcSession={rtcSession as unknown as MatrixRTCSession}
         >
           <TooltipProvider>
             <RoomContext value={livekitRoom}>
               <InCallView
                 client={client}
                 header={HeaderStyle.Standard}
-                rtcSession={rtcSession.asMockedSession()}
+                rtcSession={rtcSession as unknown as MatrixRTCSession}
                 muteStates={muteState}
                 vm={vm}
                 matrixInfo={{
@@ -167,6 +176,10 @@ function createInCallView(): RenderResult & {
                   },
                 }}
                 matrixRoom={room}
+                livekitRoom={livekitRoom}
+                onLeave={function (): void {
+                  throw new Error("Function not implemented.");
+                }}
                 onShareClick={null}
               />
             </RoomContext>
@@ -188,4 +201,71 @@ describe("InCallView", () => {
       expect(container).toMatchSnapshot();
     });
   });
+  describe("toDevice label", () => {
+    it("is shown if setting activated and room encrypted", () => {
+      useRoomEncryptionSystemMock.mockReturnValue({
+        kind: E2eeType.PER_PARTICIPANT,
+      });
+      useExperimentalToDeviceTransportSetting.setValue(true);
+      developerModeSetting.setValue(true);
+      const { getByText } = createInCallView();
+      expect(getByText("using to Device key transport")).toBeInTheDocument();
+    });
+
+    it("is not shown in unenecrypted room", () => {
+      useRoomEncryptionSystemMock.mockReturnValue({
+        kind: E2eeType.NONE,
+      });
+      useExperimentalToDeviceTransportSetting.setValue(true);
+      developerModeSetting.setValue(true);
+      const { queryByText } = createInCallView();
+      expect(
+        queryByText("using to Device key transport"),
+      ).not.toBeInTheDocument();
+    });
+
+    it("is hidden once fallback was triggered", async () => {
+      useRoomEncryptionSystemMock.mockReturnValue({
+        kind: E2eeType.PER_PARTICIPANT,
+      });
+      useExperimentalToDeviceTransportSetting.setValue(true);
+      developerModeSetting.setValue(true);
+      const { rtcSession, queryByText } = createInCallView();
+      expect(queryByText("using to Device key transport")).toBeInTheDocument();
+      expect(rtcSession).toBeDefined();
+      await act(() =>
+        rtcSession.emit(RoomAndToDeviceEvents.EnabledTransportsChanged, {
+          toDevice: true,
+          room: true,
+        }),
+      );
+      expect(
+        queryByText("using to Device key transport"),
+      ).not.toBeInTheDocument();
+    });
+
+    it("is not shown if setting is disabled", () => {
+      useExperimentalToDeviceTransportSetting.setValue(false);
+      developerModeSetting.setValue(true);
+      useRoomEncryptionSystemMock.mockReturnValue({
+        kind: E2eeType.PER_PARTICIPANT,
+      });
+      const { queryByText } = createInCallView();
+      expect(
+        queryByText("using to Device key transport"),
+      ).not.toBeInTheDocument();
+    });
+
+    it("is not shown if developer mode is disabled", () => {
+      useExperimentalToDeviceTransportSetting.setValue(true);
+      developerModeSetting.setValue(false);
+      useRoomEncryptionSystemMock.mockReturnValue({
+        kind: E2eeType.PER_PARTICIPANT,
+      });
+      const { queryByText } = createInCallView();
+      expect(
+        queryByText("using to Device key transport"),
+      ).not.toBeInTheDocument();
+    });
+  });
 });

src/room/InCallView.tsx

@@ -5,7 +5,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
+import { RoomContext, useLocalParticipant } from "@livekit/components-react";
 import { IconButton, Text, Tooltip } from "@vector-im/compound-web";
+import { ConnectionState, type Room as LivekitRoom } from "livekit-client";
 import { type MatrixClient, type Room as MatrixRoom } from "matrix-js-sdk";
 import {
   type FC,
@@ -23,8 +25,13 @@ import useMeasure from "react-use-measure";
 import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
 import classNames from "classnames";
 import { BehaviorSubject, map } from "rxjs";
-import { useObservable } from "observable-hooks";
+import {
+  useObservable,
+  useObservableEagerState,
+  useSubscription,
+} from "observable-hooks";
 import { logger } from "matrix-js-sdk/lib/logger";
+import { RoomAndToDeviceEvents } from "matrix-js-sdk/lib/matrixrtc/RoomAndToDeviceKeyTransport";
 import {
   VoiceCallSolidIcon,
   VolumeOnSolidIcon,
@@ -52,21 +59,26 @@ import { type OTelGroupCallMembership } from "../otel/OTelGroupCallMembership";
 import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal";
 import { useRageshakeRequestModal } from "../settings/submit-rageshake";
 import { RageshakeRequestModal } from "./RageshakeRequestModal";
+import { useLivekit } from "../livekit/useLivekit.ts";
 import { useWakeLock } from "../useWakeLock";
 import { useMergedRefs } from "../useMergedRefs";
-import { type MuteStates } from "../state/MuteStates";
+import { type MuteStates } from "./MuteStates";
 import { type MatrixInfo } from "./VideoPreview";
 import { InviteButton } from "../button/InviteButton";
 import { LayoutToggle } from "./LayoutToggle";
+import { useOpenIDSFU } from "../livekit/openIDSFU";
 import {
-  type CallViewModel,
-  createCallViewModel$,
+  CallViewModel,
   type GridMode,
-} from "../state/CallViewModel/CallViewModel.ts";
+  type Layout,
+} from "../state/CallViewModel";
 import { Grid, type TileProps } from "../grid/Grid";
 import { useInitial } from "../useInitial";
 import { SpotlightTile } from "../tile/SpotlightTile";
-import { type EncryptionSystem } from "../e2ee/sharedKeyManagement";
+import {
+  useRoomEncryptionSystem,
+  type EncryptionSystem,
+} from "../e2ee/sharedKeyManagement";
 import { E2eeType } from "../e2ee/e2eeType";
 import { makeGridLayout } from "../grid/GridLayout";
 import {
@@ -85,14 +97,22 @@ import {
 } from "../reactions/useReactionsSender";
 import { ReactionsAudioRenderer } from "./ReactionAudioRenderer";
 import { ReactionsOverlay } from "./ReactionsOverlay";
-import { CallEventAudioRenderer } from "./CallEventAudioRenderer";
+import {
+  CallEventAudioRenderer,
+  type CallEventSounds,
+} from "./CallEventAudioRenderer";
 import {
   debugTileLayout as debugTileLayoutSetting,
+  useExperimentalToDeviceTransport as useExperimentalToDeviceTransportSetting,
+  developerMode as developerModeSetting,
   useSetting,
 } from "../settings/settings";
 import { ReactionsReader } from "../reactions/ReactionsReader";
-import { LivekitRoomAudioRenderer } from "../livekit/MatrixAudioRenderer.tsx";
+import { ConnectionLostError } from "../utils/errors.ts";
+import { useTypedEventEmitter } from "../useEvents.ts";
+import { MatrixAudioRenderer } from "../livekit/MatrixAudioRenderer.tsx";
 import { muteAllAudio$ } from "../state/MuteAllAudioModel.ts";
+import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships.ts";
 import { useMediaDevices } from "../MediaDevicesContext.ts";
 import { EarpieceOverlay } from "./EarpieceOverlay.tsx";
 import { useAppBarHidden, useAppBarSecondaryButton } from "../AppBar.tsx";
@@ -105,68 +125,105 @@ import { prefetchSounds } from "../soundUtils";
 import { useAudioContext } from "../useAudioContext";
 import ringtoneMp3 from "../sound/ringtone.mp3?url";
 import ringtoneOgg from "../sound/ringtone.ogg?url";
-import { useTrackProcessorObservable$ } from "../livekit/TrackProcessorContext.tsx";
-import { type Layout } from "../state/layout-types.ts";
 import { ObservableScope } from "../state/ObservableScope.ts";
 
+const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
+
 const maxTapDurationMs = 400;
 
 export interface ActiveCallProps
   extends Omit<InCallViewProps, "vm" | "livekitRoom" | "connState"> {
   e2eeSystem: EncryptionSystem;
-  // TODO refactor those reasons into an enum
-  onLeft: (reason: "user" | "timeout" | "decline" | "allOthersLeft") => void;
 }
 
 export const ActiveCall: FC<ActiveCallProps> = (props) => {
+  const mediaDevices = useMediaDevices();
+  const sfuConfig = useOpenIDSFU(props.client, props.rtcSession);
+  const { livekitRoom, connState } = useLivekit(
+    props.rtcSession,
+    props.muteStates,
+    sfuConfig,
+    props.e2eeSystem,
+  );
+  const observableScope = useInitial(() => new ObservableScope());
+  const connStateBehavior$ = useObservable(
+    (inputs$) =>
+      observableScope.behavior(
+        inputs$.pipe(map(([connState]) => connState)),
+        connState,
+      ),
+    [connState],
+  );
   const [vm, setVm] = useState<CallViewModel | null>(null);
 
-  const urlParams = useUrlParams();
-  const mediaDevices = useMediaDevices();
-  const trackProcessorState$ = useTrackProcessorObservable$();
   useEffect(() => {
-    const scope = new ObservableScope();
-    const reactionsReader = new ReactionsReader(scope, props.rtcSession);
-    const { autoLeaveWhenOthersLeft, waitForCallPickup, sendNotificationType } =
-      urlParams;
-    const vm = createCallViewModel$(
-      scope,
-      props.rtcSession,
-      props.matrixRoom,
-      mediaDevices,
-      props.muteStates,
-      {
-        encryptionSystem: props.e2eeSystem,
-        autoLeaveWhenOthersLeft,
-        waitForCallPickup: waitForCallPickup && sendNotificationType === "ring",
-      },
-      reactionsReader.raisedHands$,
-      reactionsReader.reactions$,
-      scope.behavior(trackProcessorState$),
+    logger.info(
+      `[Lifecycle] InCallView Component mounted, livekit room state ${livekitRoom?.state}`,
     );
-    setVm(vm);
-
-    vm.leave$.pipe(scope.bind()).subscribe(props.onLeft);
     return (): void => {
-      scope.end();
+      logger.info(
+        `[Lifecycle] InCallView Component unmounted, livekit room state ${livekitRoom?.state}`,
+      );
+      livekitRoom
+        ?.disconnect()
+        .then(() => {
+          logger.info(
+            `[Lifecycle] Disconnected from livekit room, state:${livekitRoom?.state}`,
+          );
+        })
+        .catch((e) => {
+          logger.error("[Lifecycle] Failed to disconnect from livekit room", e);
+        });
     };
+  }, [livekitRoom]);
+
+  const { autoLeaveWhenOthersLeft, sendNotificationType, waitForCallPickup } =
+    useUrlParams();
+
+  useEffect(() => {
+    if (livekitRoom !== undefined) {
+      const reactionsReader = new ReactionsReader(props.rtcSession);
+      const vm = new CallViewModel(
+        props.rtcSession,
+        props.matrixRoom,
+        livekitRoom,
+        mediaDevices,
+        {
+          encryptionSystem: props.e2eeSystem,
+          autoLeaveWhenOthersLeft,
+          waitForCallPickup:
+            waitForCallPickup && sendNotificationType === "ring",
+        },
+        connStateBehavior$,
+        reactionsReader.raisedHands$,
+        reactionsReader.reactions$,
+      );
+      setVm(vm);
+      return (): void => {
+        vm.destroy();
+        reactionsReader.destroy();
+      };
+    }
   }, [
     props.rtcSession,
     props.matrixRoom,
-    props.muteStates,
-    props.e2eeSystem,
-    props.onLeft,
-    urlParams,
+    livekitRoom,
     mediaDevices,
-    trackProcessorState$,
+    props.e2eeSystem,
+    connStateBehavior$,
+    autoLeaveWhenOthersLeft,
+    sendNotificationType,
+    waitForCallPickup,
   ]);
 
-  if (vm === null) return null;
+  if (livekitRoom === undefined || vm === null) return null;
 
   return (
-    <ReactionsSenderProvider vm={vm} rtcSession={props.rtcSession}>
-      <InCallView {...props} vm={vm} />
-    </ReactionsSenderProvider>
+    <RoomContext value={livekitRoom}>
+      <ReactionsSenderProvider vm={vm} rtcSession={props.rtcSession}>
+        <InCallView {...props} vm={vm} livekitRoom={livekitRoom} />
+      </ReactionsSenderProvider>
+    </RoomContext>
   );
 };
 
@@ -176,7 +233,10 @@ export interface InCallViewProps {
   matrixInfo: MatrixInfo;
   rtcSession: MatrixRTCSession;
   matrixRoom: MatrixRoom;
+  livekitRoom: LivekitRoom;
   muteStates: MuteStates;
+  /** Function to call when the user explicitly ends the call */
+  onLeave: (cause: "user", soundFile?: CallEventSounds) => void;
   header: HeaderStyle;
   otelGroupCallMembership?: OTelGroupCallMembership;
   onShareClick: (() => void) | null;
@@ -186,9 +246,11 @@ export const InCallView: FC<InCallViewProps> = ({
   client,
   vm,
   matrixInfo,
+  rtcSession,
   matrixRoom,
+  livekitRoom,
   muteStates,
-
+  onLeave,
   header: headerStyle,
   onShareClick,
 }) => {
@@ -197,23 +259,23 @@ export const InCallView: FC<InCallViewProps> = ({
     useReactionsSender();
 
   useWakeLock();
-  // TODO-MULTI-SFU This is unused now??
-  // const connectionState = useObservableEagerState(vm.livekitConnectionState$);
+  const connectionState = useObservableEagerState(vm.livekitConnectionState$);
 
   // annoyingly we don't get the disconnection reason this way,
   // only by listening for the emitted event
-  // This needs to be done differential. with the vm connection state we start with Disconnected.
-  // TODO-MULTI-SFU decide how to handle this properly
-  // @BillCarsonFr
-  // if (connectionState === ConnectionState.Disconnected)
-  //   throw new ConnectionLostError();
+  if (connectionState === ConnectionState.Disconnected)
+    throw new ConnectionLostError();
 
   const containerRef1 = useRef<HTMLDivElement | null>(null);
   const [containerRef2, bounds] = useMeasure();
   // Merge the refs so they can attach to the same element
   const containerRef = useMergedRefs(containerRef1, containerRef2);
 
-  const { showControls } = useUrlParams();
+  const { hideScreensharing, showControls } = useUrlParams();
+
+  const { isScreenShareEnabled, localParticipant } = useLocalParticipant({
+    room: livekitRoom,
+  });
 
   const muteAllAudio = useBehavior(muteAllAudio$);
   // Call pickup state and display names are needed for waiting overlay/sounds
@@ -232,24 +294,55 @@ export const InCallView: FC<InCallViewProps> = ({
     muted: muteAllAudio,
   });
 
-  const audioEnabled = useBehavior(muteStates.audio.enabled$);
-  const videoEnabled = useBehavior(muteStates.video.enabled$);
-  const toggleAudio = useBehavior(muteStates.audio.toggle$);
-  const toggleVideo = useBehavior(muteStates.video.toggle$);
-  const setAudioEnabled = useBehavior(muteStates.audio.setEnabled$);
+  // This seems like it might be enough logic to use move it into the call view model?
+  const [didFallbackToRoomKey, setDidFallbackToRoomKey] = useState(false);
+  useTypedEventEmitter(
+    rtcSession,
+    RoomAndToDeviceEvents.EnabledTransportsChanged,
+    (enabled) => setDidFallbackToRoomKey(enabled.room),
+  );
+
+  const [developerMode] = useSetting(developerModeSetting);
+  const [useExperimentalToDeviceTransport] = useSetting(
+    useExperimentalToDeviceTransportSetting,
+  );
+  const encryptionSystem = useRoomEncryptionSystem(matrixRoom.roomId);
+  const memberships = useMatrixRTCSessionMemberships(rtcSession);
+
+  const showToDeviceEncryption = useMemo(
+    () =>
+      developerMode &&
+      useExperimentalToDeviceTransport &&
+      encryptionSystem.kind === E2eeType.PER_PARTICIPANT &&
+      !didFallbackToRoomKey,
+    [
+      developerMode,
+      useExperimentalToDeviceTransport,
+      encryptionSystem.kind,
+      didFallbackToRoomKey,
+    ],
+  );
+
+  const toggleMicrophone = useCallback(
+    () => muteStates.audio.setEnabled?.((e) => !e),
+    [muteStates],
+  );
+  const toggleCamera = useCallback(
+    () => muteStates.video.setEnabled?.((e) => !e),
+    [muteStates],
+  );
 
   // This function incorrectly assumes that there is a camera and microphone, which is not always the case.
   // TODO: Make sure that this module is resilient when it comes to camera/microphone availability!
   useCallViewKeyboardShortcuts(
     containerRef1,
-    toggleAudio,
-    toggleVideo,
-    setAudioEnabled,
+    toggleMicrophone,
+    toggleCamera,
+    (muted) => muteStates.audio.setEnabled?.(!muted),
     (reaction) => void sendReaction(reaction),
     () => void toggleRaisedHand(),
   );
 
-  const audioParticipants = useBehavior(vm.audioParticipants$);
   const participantCount = useBehavior(vm.participantCount$);
   const reconnecting = useBehavior(vm.reconnecting$);
   const windowMode = useBehavior(vm.windowMode$);
@@ -261,12 +354,7 @@ export const InCallView: FC<InCallViewProps> = ({
   const showFooter = useBehavior(vm.showFooter$);
   const earpieceMode = useBehavior(vm.earpieceMode$);
   const audioOutputSwitcher = useBehavior(vm.audioOutputSwitcher$);
-  const sharingScreen = useBehavior(vm.sharingScreen$);
-
-  const ringOverlay = useBehavior(vm.ringOverlay$);
-  const fatalCallError = useBehavior(vm.configError$);
-  // Stop the rendering and throw for the error boundary
-  if (fatalCallError) throw fatalCallError;
+  useSubscription(vm.autoLeave$, () => onLeave("user"));
 
   // We need to set the proper timings on the animation based upon the sound length.
   const ringDuration = pickupPhaseAudio?.soundDuration["waiting"] ?? 1;
@@ -287,6 +375,16 @@ export const InCallView: FC<InCallViewProps> = ({
     };
   }, [pickupPhaseAudio?.soundDuration, ringDuration]);
 
+  // When we enter timeout or decline we will leave the call.
+  useEffect((): void | (() => void) => {
+    if (callPickupState === "timeout") {
+      onLeave("user", "timeout");
+    }
+    if (callPickupState === "decline") {
+      onLeave("user", "decline");
+    }
+  }, [callPickupState, onLeave, pickupPhaseAudio]);
+
   // When waiting for pickup, loop a waiting sound
   useEffect((): void | (() => void) => {
     if (callPickupState !== "ringing" || !pickupPhaseAudio) return;
@@ -300,26 +398,46 @@ export const InCallView: FC<InCallViewProps> = ({
 
   // Waiting UI overlay
   const waitingOverlay: JSX.Element | null = useMemo(() => {
-    return ringOverlay ? (
+    // No overlay if not in ringing state
+    if (callPickupState !== "ringing") return null;
+
+    // Use room state for other participants data (the one that we likely want to reach)
+    const roomOthers = [
+      ...matrixRoom.getMembersWithMembership("join"),
+      ...matrixRoom.getMembersWithMembership("invite"),
+    ].filter((m) => m.userId !== client.getUserId());
+    // Yield if there are not other members in the room.
+    if (roomOthers.length === 0) return null;
+
+    const otherMember = roomOthers.length > 0 ? roomOthers[0] : undefined;
+    const isOneOnOne = roomOthers.length === 1 && otherMember;
+    const text = isOneOnOne
+      ? `Waiting for ${otherMember.name ?? otherMember.userId} to join…`
+      : "Waiting for other participants…";
+    const avatarMxc = isOneOnOne
+      ? (otherMember.getMxcAvatarUrl?.() ?? undefined)
+      : (matrixRoom.getMxcAvatarUrl() ?? undefined);
+
+    return (
       <div className={classNames(overlayStyles.bg, waitingStyles.overlay)}>
         <div
           className={classNames(overlayStyles.content, waitingStyles.content)}
         >
           <div className={waitingStyles.pulse}>
             <Avatar
-              id={ringOverlay.idForAvatar}
-              name={ringOverlay.name}
-              src={ringOverlay.avatarMxc}
+              id={isOneOnOne ? otherMember.userId : matrixRoom.roomId}
+              name={isOneOnOne ? otherMember.name : matrixRoom.name}
+              src={avatarMxc}
               size={AvatarSize.XL}
             />
           </div>
           <Text size="md" className={waitingStyles.text}>
-            {ringOverlay.text}
+            {text}
           </Text>
         </div>
       </div>
-    ) : null;
-  }, [ringOverlay]);
+    );
+  }, [callPickupState, client, matrixRoom]);
 
   // 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
@@ -687,33 +805,44 @@ export const InCallView: FC<InCallViewProps> = ({
     matrixRoom.roomId,
   );
 
+  const toggleScreensharing = useCallback(() => {
+    localParticipant
+      .setScreenShareEnabled(!isScreenShareEnabled, {
+        audio: true,
+        selfBrowserSurface: "include",
+        surfaceSwitching: "include",
+        systemAudio: "include",
+      })
+      .catch(logger.error);
+  }, [localParticipant, isScreenShareEnabled]);
+
   const buttons: JSX.Element[] = [];
 
   buttons.push(
     <MicButton
       key="audio"
-      muted={!audioEnabled}
-      onClick={toggleAudio ?? undefined}
+      muted={!muteStates.audio.enabled}
+      onClick={toggleMicrophone}
       onTouchEnd={onControlsTouchEnd}
-      disabled={toggleAudio === null}
+      disabled={muteStates.audio.setEnabled === null}
       data-testid="incall_mute"
     />,
     <VideoButton
       key="video"
-      muted={!videoEnabled}
-      onClick={toggleVideo ?? undefined}
+      muted={!muteStates.video.enabled}
+      onClick={toggleCamera}
       onTouchEnd={onControlsTouchEnd}
-      disabled={toggleVideo === null}
+      disabled={muteStates.video.setEnabled === null}
       data-testid="incall_videomute"
     />,
   );
-  if (vm.toggleScreenSharing !== null) {
+  if (canScreenshare && !hideScreensharing) {
     buttons.push(
       <ShareScreenButton
         key="share_screen"
         className={styles.shareScreen}
-        enabled={sharingScreen}
-        onClick={vm.toggleScreenSharing}
+        enabled={isScreenShareEnabled}
+        onClick={toggleScreensharing}
         onTouchEnd={onControlsTouchEnd}
         data-testid="incall_screenshare"
       />,
@@ -743,7 +872,7 @@ export const InCallView: FC<InCallViewProps> = ({
     <EndCallButton
       key="end_call"
       onClick={function (): void {
-        vm.hangup();
+        onLeave("user");
       }}
       onTouchEnd={onControlsTouchEnd}
       data-testid="incall_leave"
@@ -795,15 +924,19 @@ export const InCallView: FC<InCallViewProps> = ({
       onPointerOut={onPointerOut}
     >
       {header}
-      {audioParticipants.map(({ livekitRoom, url, participants }) => (
-        <LivekitRoomAudioRenderer
-          key={url}
-          url={url}
-          livekitRoom={livekitRoom}
-          validIdentities={participants}
-          muted={muteAllAudio}
-        />
-      ))}
+      {
+        // TODO: remove this once we remove the developer flag gets removed and we have shipped to
+        // device transport as the default.
+        showToDeviceEncryption && (
+          <Text
+            style={{ height: 0, zIndex: 1, alignSelf: "center", margin: 0 }}
+            size="sm"
+          >
+            using to Device key transport
+          </Text>
+        )
+      }
+      <MatrixAudioRenderer members={memberships} muted={muteAllAudio} />
       {renderContent()}
       <CallEventAudioRenderer vm={vm} muted={muteAllAudio} />
       <ReactionsAudioRenderer vm={vm} muted={muteAllAudio} />
@@ -822,8 +955,7 @@ export const InCallView: FC<InCallViewProps> = ({
             onDismiss={closeSettings}
             tab={settingsTab}
             onTabChange={setSettingsTab}
-            // TODO expose correct data to setttings modal
-            livekitRooms={[]}
+            livekitRoom={livekitRoom}
           />
         </>
       )}

src/room/LobbyView.tsx

@@ -31,7 +31,7 @@ import inCallStyles from "./InCallView.module.css";
 import styles from "./LobbyView.module.css";
 import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
 import { type MatrixInfo, VideoPreview } from "./VideoPreview";
-import { type MuteStates } from "../state/MuteStates";
+import { type MuteStates } from "./MuteStates";
 import { InviteButton } from "../button/InviteButton";
 import {
   EndCallButton,
@@ -50,14 +50,14 @@ import {
   useTrackProcessorSync,
 } from "../livekit/TrackProcessorContext";
 import { usePageTitle } from "../usePageTitle";
+import { useLatest } from "../useLatest";
 import { getValue } from "../utils/observable";
-import { useBehavior } from "../useBehavior";
 
 interface Props {
   client: MatrixClient;
   matrixInfo: MatrixInfo;
   muteStates: MuteStates;
-  onEnter: () => void;
+  onEnter: () => Promise<void>;
   enterLabel?: JSX.Element | string;
   confineToRoom: boolean;
   hideHeader: boolean;
@@ -88,10 +88,14 @@ export const LobbyView: FC<Props> = ({
   const { t } = useTranslation();
   usePageTitle(matrixInfo.roomName);
 
-  const audioEnabled = useBehavior(muteStates.audio.enabled$);
-  const videoEnabled = useBehavior(muteStates.video.enabled$);
-  const toggleAudio = useBehavior(muteStates.audio.toggle$);
-  const toggleVideo = useBehavior(muteStates.video.toggle$);
+  const onAudioPress = useCallback(
+    () => muteStates.audio.setEnabled?.((e) => !e),
+    [muteStates],
+  );
+  const onVideoPress = useCallback(
+    () => muteStates.video.setEnabled?.((e) => !e),
+    [muteStates],
+  );
 
   const [settingsModalOpen, setSettingsModalOpen] = useState(false);
   const [settingsTab, setSettingsTab] = useState(defaultSettingsTab);
@@ -129,7 +133,7 @@ export const LobbyView: FC<Props> = ({
   // re-open the devices when they change (see below).
   const initialAudioOptions = useInitial(
     () =>
-      audioEnabled && {
+      muteStates.audio.enabled && {
         deviceId: getValue(devices.audioInput.selected$)?.id,
       },
   );
@@ -146,21 +150,27 @@ export const LobbyView: FC<Props> = ({
       // We also pass in a clone because livekit mutates the object passed in,
       // which would cause the devices to be re-opened on the next render.
       audio: Object.assign({}, initialAudioOptions),
-      video: videoEnabled && {
+      video: muteStates.video.enabled && {
         deviceId: videoInputId,
         processor: initialProcessor,
       },
     }),
-    [initialAudioOptions, videoEnabled, videoInputId, initialProcessor],
+    [
+      initialAudioOptions,
+      muteStates.video.enabled,
+      videoInputId,
+      initialProcessor,
+    ],
   );
 
+  const latestMuteStates = useLatest(muteStates);
   const onError = useCallback(
     (error: Error) => {
       logger.error("Error while creating preview Tracks:", error);
-      muteStates.audio.setEnabled$.value?.(false);
-      muteStates.video.setEnabled$.value?.(false);
+      latestMuteStates.current.audio.setEnabled?.(false);
+      latestMuteStates.current.video.setEnabled?.(false);
     },
-    [muteStates],
+    [latestMuteStates],
   );
 
   const tracks = usePreviewTracks(localTrackOptions, onError);
@@ -183,6 +193,14 @@ export const LobbyView: FC<Props> = ({
 
   useTrackProcessorSync(videoTrack);
 
+  const [waitingToEnter, setWaitingToEnter] = useState(false);
+  const onEnterCall = useCallback(() => {
+    setWaitingToEnter(true);
+    void onEnter().finally(() => setWaitingToEnter(false));
+  }, [onEnter]);
+
+  const waiting = waitingForInvite || waitingToEnter;
+
   // TODO: Unify this component with InCallView, so we can get slick joining
   // animations and don't have to feel bad about reusing its CSS
   return (
@@ -207,17 +225,17 @@ export const LobbyView: FC<Props> = ({
         <div className={styles.content}>
           <VideoPreview
             matrixInfo={matrixInfo}
-            videoEnabled={videoEnabled}
+            muteStates={muteStates}
             videoTrack={videoTrack}
           >
             <Button
               className={classNames(styles.join, {
-                [styles.wait]: waitingForInvite,
+                [styles.wait]: waiting,
               })}
-              size={waitingForInvite ? "sm" : "lg"}
-              disabled={waitingForInvite}
+              size={waiting ? "sm" : "lg"}
+              disabled={waiting}
               onClick={() => {
-                if (!waitingForInvite) onEnter();
+                if (!waiting) onEnterCall();
               }}
               data-testid="lobby_joinCall"
             >
@@ -230,14 +248,14 @@ export const LobbyView: FC<Props> = ({
           {recentsButtonInFooter && recentsButton}
           <div className={inCallStyles.buttons}>
             <MicButton
-              muted={!audioEnabled}
-              onClick={toggleAudio ?? undefined}
-              disabled={toggleAudio === null}
+              muted={!muteStates.audio.enabled}
+              onClick={onAudioPress}
+              disabled={muteStates.audio.setEnabled === null}
             />
             <VideoButton
-              muted={!videoEnabled}
-              onClick={toggleVideo ?? undefined}
-              disabled={toggleVideo === null}
+              muted={!muteStates.video.enabled}
+              onClick={onVideoPress}
+              disabled={muteStates.video.setEnabled === null}
             />
             <SettingsButton onClick={openSettings} />
             {!confineToRoom && <EndCallButton onClick={onLeaveClick} />}

src/room/MuteStates.test.tsx

@@ -0,0 +1,323 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import {
+  afterAll,
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  onTestFinished,
+  vi,
+} from "vitest";
+import { type FC, useCallback, useState } from "react";
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import userEvent from "@testing-library/user-event";
+import { createMediaDeviceObserver } from "@livekit/components-core";
+import { of } from "rxjs";
+
+import { useMuteStates } from "./MuteStates";
+import { MediaDevicesContext } from "../MediaDevicesContext";
+import { mockConfig } from "../utils/test";
+import { MediaDevices } from "../state/MediaDevices";
+import { ObservableScope } from "../state/ObservableScope";
+vi.mock("@livekit/components-core");
+
+interface TestComponentProps {
+  isJoined?: boolean;
+}
+
+const TestComponent: FC<TestComponentProps> = ({ isJoined = false }) => {
+  const muteStates = useMuteStates(isJoined);
+  const onToggleAudio = useCallback(
+    () => muteStates.audio.setEnabled?.(!muteStates.audio.enabled),
+    [muteStates],
+  );
+  return (
+    <div>
+      <div data-testid="audio-enabled">
+        {muteStates.audio.enabled.toString()}
+      </div>
+      <button onClick={onToggleAudio}>Toggle audio</button>
+      <div data-testid="video-enabled">
+        {muteStates.video.enabled.toString()}
+      </div>
+    </div>
+  );
+};
+
+const mockMicrophone: MediaDeviceInfo = {
+  deviceId: "",
+  kind: "audioinput",
+  label: "",
+  groupId: "",
+  toJSON() {
+    return {};
+  },
+};
+
+const mockSpeaker: MediaDeviceInfo = {
+  deviceId: "",
+  kind: "audiooutput",
+  label: "",
+  groupId: "",
+  toJSON() {
+    return {};
+  },
+};
+
+const mockCamera: MediaDeviceInfo = {
+  deviceId: "",
+  kind: "videoinput",
+  label: "",
+  groupId: "",
+  toJSON() {
+    return {};
+  },
+};
+
+function mockMediaDevices(
+  {
+    microphone,
+    speaker,
+    camera,
+  }: {
+    microphone?: boolean;
+    speaker?: boolean;
+    camera?: boolean;
+  } = { microphone: true, speaker: true, camera: true },
+): MediaDevices {
+  vi.mocked(createMediaDeviceObserver).mockImplementation((kind) => {
+    switch (kind) {
+      case "audioinput":
+        return of(microphone ? [mockMicrophone] : []);
+      case "audiooutput":
+        return of(speaker ? [mockSpeaker] : []);
+      case "videoinput":
+        return of(camera ? [mockCamera] : []);
+      case undefined:
+        throw new Error("Unimplemented");
+    }
+  });
+  const scope = new ObservableScope();
+  onTestFinished(() => scope.end());
+  return new MediaDevices(scope);
+}
+
+describe("useMuteStates VITE_PACKAGE='full' (SPA) mode", () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+    vi.stubEnv("VITE_PACKAGE", "full");
+  });
+
+  afterAll(() => {
+    vi.resetAllMocks();
+  });
+
+  it("disabled when no input devices", () => {
+    mockConfig();
+
+    render(
+      <MemoryRouter>
+        <MediaDevicesContext
+          value={mockMediaDevices({
+            microphone: false,
+            camera: false,
+          })}
+        >
+          <TestComponent />
+        </MediaDevicesContext>
+      </MemoryRouter>,
+    );
+    expect(screen.getByTestId("audio-enabled").textContent).toBe("false");
+    expect(screen.getByTestId("video-enabled").textContent).toBe("false");
+  });
+
+  it("enables devices by default in the lobby", () => {
+    mockConfig();
+
+    render(
+      <MemoryRouter>
+        <MediaDevicesContext value={mockMediaDevices()}>
+          <TestComponent />
+        </MediaDevicesContext>
+      </MemoryRouter>,
+    );
+    expect(screen.getByTestId("audio-enabled").textContent).toBe("true");
+    expect(screen.getByTestId("video-enabled").textContent).toBe("true");
+  });
+
+  it("disables devices by default in the call", () => {
+    // Disabling new devices in the call ensures that connecting a webcam
+    // mid-call won't cause it to suddenly be enabled without user input
+    mockConfig();
+
+    render(
+      <MemoryRouter>
+        <MediaDevicesContext value={mockMediaDevices()}>
+          <TestComponent isJoined />
+        </MediaDevicesContext>
+      </MemoryRouter>,
+    );
+    expect(screen.getByTestId("audio-enabled").textContent).toBe("false");
+    expect(screen.getByTestId("video-enabled").textContent).toBe("false");
+  });
+
+  it("uses defaults from config", () => {
+    mockConfig({
+      media_devices: {
+        enable_audio: false,
+        enable_video: false,
+      },
+    });
+
+    render(
+      <MemoryRouter>
+        <MediaDevicesContext value={mockMediaDevices()}>
+          <TestComponent />
+        </MediaDevicesContext>
+      </MemoryRouter>,
+    );
+    expect(screen.getByTestId("audio-enabled").textContent).toBe("false");
+    expect(screen.getByTestId("video-enabled").textContent).toBe("false");
+  });
+
+  it("skipLobby mutes inputs", () => {
+    mockConfig();
+
+    render(
+      <MemoryRouter
+        initialEntries={[
+          "/room/?skipLobby=true&widgetId=1234&parentUrl=www.parent.org",
+        ]}
+      >
+        <MediaDevicesContext value={mockMediaDevices()}>
+          <TestComponent />
+        </MediaDevicesContext>
+      </MemoryRouter>,
+    );
+    expect(screen.getByTestId("audio-enabled").textContent).toBe("false");
+    expect(screen.getByTestId("video-enabled").textContent).toBe("false");
+  });
+
+  it("remembers previous state when devices disappear and reappear", async () => {
+    const user = userEvent.setup();
+    mockConfig();
+    const noDevices = mockMediaDevices({ microphone: false, camera: false });
+    // Warm up these Observables before making further changes to the
+    // createMediaDevicesObserver mock
+    noDevices.audioInput.available$.subscribe(() => {}).unsubscribe();
+    noDevices.videoInput.available$.subscribe(() => {}).unsubscribe();
+    const someDevices = mockMediaDevices();
+
+    const ReappearanceTest: FC = () => {
+      const [devices, setDevices] = useState(someDevices);
+      const onConnectDevicesClick = useCallback(
+        () => setDevices(someDevices),
+        [],
+      );
+      const onDisconnectDevicesClick = useCallback(
+        () => setDevices(noDevices),
+        [],
+      );
+
+      return (
+        <MemoryRouter>
+          <MediaDevicesContext value={devices}>
+            <TestComponent />
+            <button onClick={onConnectDevicesClick}>Connect devices</button>
+            <button onClick={onDisconnectDevicesClick}>
+              Disconnect devices
+            </button>
+          </MediaDevicesContext>
+        </MemoryRouter>
+      );
+    };
+
+    render(<ReappearanceTest />);
+    expect(screen.getByTestId("audio-enabled").textContent).toBe("true");
+    expect(screen.getByTestId("video-enabled").textContent).toBe("true");
+    await user.click(screen.getByRole("button", { name: "Toggle audio" }));
+    expect(screen.getByTestId("audio-enabled").textContent).toBe("false");
+    expect(screen.getByTestId("video-enabled").textContent).toBe("true");
+    await user.click(
+      screen.getByRole("button", { name: "Disconnect devices" }),
+    );
+    expect(screen.getByTestId("audio-enabled").textContent).toBe("false");
+    expect(screen.getByTestId("video-enabled").textContent).toBe("false");
+    await user.click(screen.getByRole("button", { name: "Connect devices" }));
+    // Audio should remember that it was muted, while video should re-enable
+    expect(screen.getByTestId("audio-enabled").textContent).toBe("false");
+    expect(screen.getByTestId("video-enabled").textContent).toBe("true");
+  });
+});
+
+describe("useMuteStates in VITE_PACKAGE='embedded' (widget) mode", () => {
+  beforeEach(() => {
+    vi.stubEnv("VITE_PACKAGE", "embedded");
+  });
+
+  it("uses defaults from config", () => {
+    mockConfig({
+      media_devices: {
+        enable_audio: false,
+        enable_video: false,
+      },
+    });
+
+    render(
+      <MemoryRouter>
+        <MediaDevicesContext value={mockMediaDevices()}>
+          <TestComponent />
+        </MediaDevicesContext>
+      </MemoryRouter>,
+    );
+    expect(screen.getByTestId("audio-enabled").textContent).toBe("false");
+    expect(screen.getByTestId("video-enabled").textContent).toBe("false");
+  });
+
+  it("skipLobby does not mute inputs", () => {
+    mockConfig();
+
+    render(
+      <MemoryRouter
+        initialEntries={[
+          "/room/?skipLobby=true&widgetId=1234&parentUrl=www.parent.org",
+        ]}
+      >
+        <MediaDevicesContext value={mockMediaDevices()}>
+          <TestComponent />
+        </MediaDevicesContext>
+      </MemoryRouter>,
+    );
+    expect(screen.getByTestId("audio-enabled").textContent).toBe("true");
+    expect(screen.getByTestId("video-enabled").textContent).toBe("true");
+  });
+
+  it("url params win over config", () => {
+    // The config sets audio and video to disabled
+    mockConfig({ media_devices: { enable_audio: false, enable_video: false } });
+
+    render(
+      <MemoryRouter
+        initialEntries={[
+          // The Intent sets both audio and video enabled to true via the url param configuration
+          "/room/?intent=start_call_dm&widgetId=1234&parentUrl=www.parent.org",
+        ]}
+      >
+        <MediaDevicesContext value={mockMediaDevices()}>
+          <TestComponent />
+        </MediaDevicesContext>
+      </MemoryRouter>,
+    );
+    // At the end we expect the url param to take precedence, resulting in true
+    expect(screen.getByTestId("audio-enabled").textContent).toBe("true");
+    expect(screen.getByTestId("video-enabled").textContent).toBe("true");
+  });
+});

src/room/MuteStates.ts

@@ -0,0 +1,178 @@
+/*
+Copyright 2023, 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import {
+  type Dispatch,
+  type SetStateAction,
+  useCallback,
+  useEffect,
+  useMemo,
+} from "react";
+import { type IWidgetApiRequest } from "matrix-widget-api";
+import { logger } from "matrix-js-sdk/lib/logger";
+import { useObservableEagerState } from "observable-hooks";
+
+import {
+  type DeviceLabel,
+  type SelectedDevice,
+  type MediaDevice,
+} from "../state/MediaDevices";
+import { useIsEarpiece, useMediaDevices } from "../MediaDevicesContext";
+import { useReactiveState } from "../useReactiveState";
+import { ElementWidgetActions, widget } from "../widget";
+import { Config } from "../config/Config";
+import { useUrlParams } from "../UrlParams";
+
+/**
+ * If there already are this many participants in the call, we automatically mute
+ * the user.
+ */
+export const MUTE_PARTICIPANT_COUNT = 8;
+
+interface DeviceAvailable {
+  enabled: boolean;
+  setEnabled: Dispatch<SetStateAction<boolean>>;
+}
+
+interface DeviceUnavailable {
+  enabled: false;
+  setEnabled: null;
+}
+
+const deviceUnavailable: DeviceUnavailable = {
+  enabled: false,
+  setEnabled: null,
+};
+
+type MuteState = DeviceAvailable | DeviceUnavailable;
+
+export interface MuteStates {
+  audio: MuteState;
+  video: MuteState;
+}
+
+function useMuteState(
+  device: MediaDevice<DeviceLabel, SelectedDevice>,
+  enabledByDefault: () => boolean,
+  forceUnavailable: boolean = false,
+): MuteState {
+  const available = useObservableEagerState(device.available$);
+  const [enabled, setEnabled] = useReactiveState<boolean | undefined>(
+    // Determine the default value once devices are actually connected
+    (prev) => prev ?? (available.size > 0 ? enabledByDefault() : undefined),
+    [available.size],
+  );
+  return useMemo(
+    () =>
+      available.size === 0 || forceUnavailable
+        ? deviceUnavailable
+        : {
+            enabled: enabled ?? false,
+            setEnabled: setEnabled as Dispatch<SetStateAction<boolean>>,
+          },
+    [available.size, enabled, forceUnavailable, setEnabled],
+  );
+}
+
+export function useMuteStates(isJoined: boolean): MuteStates {
+  const devices = useMediaDevices();
+
+  const { skipLobby, defaultAudioEnabled, defaultVideoEnabled } =
+    useUrlParams();
+
+  const audio = useMuteState(
+    devices.audioInput,
+    () =>
+      (defaultAudioEnabled ?? Config.get().media_devices.enable_audio) &&
+      allowJoinUnmuted(skipLobby, isJoined),
+  );
+  useEffect(() => {
+    // If audio is enabled, we need to request the device names again,
+    // because iOS will not be able to switch to the correct device after un-muting.
+    // This is one of the main changes that makes iOS work with bluetooth audio devices.
+    if (audio.enabled) {
+      devices.requestDeviceNames();
+    }
+  }, [audio.enabled, devices]);
+  const isEarpiece = useIsEarpiece();
+  const video = useMuteState(
+    devices.videoInput,
+    () =>
+      (defaultVideoEnabled ?? Config.get().media_devices.enable_video) &&
+      allowJoinUnmuted(skipLobby, isJoined),
+    isEarpiece, // Force video to be unavailable if using earpiece
+  );
+
+  useEffect(() => {
+    widget?.api.transport
+      .send(ElementWidgetActions.DeviceMute, {
+        audio_enabled: audio.enabled,
+        video_enabled: video.enabled,
+      })
+      .catch((e) =>
+        logger.warn("Could not send DeviceMute action to widget", e),
+      );
+  }, [audio, video]);
+
+  const onMuteStateChangeRequest = useCallback(
+    (ev: CustomEvent<IWidgetApiRequest>) => {
+      // First copy the current state into our new state.
+      const newState = {
+        audio_enabled: audio.enabled,
+        video_enabled: video.enabled,
+      };
+      // Update new state if there are any requested changes from the widget action
+      // in `ev.detail.data`.
+      if (
+        ev.detail.data.audio_enabled != null &&
+        typeof ev.detail.data.audio_enabled === "boolean"
+      ) {
+        audio.setEnabled?.(ev.detail.data.audio_enabled);
+        newState.audio_enabled = ev.detail.data.audio_enabled;
+      }
+      if (
+        ev.detail.data.video_enabled != null &&
+        typeof ev.detail.data.video_enabled === "boolean"
+      ) {
+        video.setEnabled?.(ev.detail.data.video_enabled);
+        newState.video_enabled = ev.detail.data.video_enabled;
+      }
+      // Always reply with the new (now "current") state.
+      // This allows to also use this action to just get the unaltered current state
+      // by using a fromWidget request with: `ev.detail.data = {}`
+      widget!.api.transport.reply(ev.detail, newState);
+    },
+    [audio, video],
+  );
+  useEffect(() => {
+    // We setup a event listener for the widget action ElementWidgetActions.DeviceMute.
+    if (widget) {
+      // only setup the listener in widget mode
+
+      widget.lazyActions.on(
+        ElementWidgetActions.DeviceMute,
+        onMuteStateChangeRequest,
+      );
+
+      return (): void => {
+        // return a call to `off` so that we always clean up our listener.
+        widget?.lazyActions.off(
+          ElementWidgetActions.DeviceMute,
+          onMuteStateChangeRequest,
+        );
+      };
+    }
+  }, [onMuteStateChangeRequest]);
+
+  return useMemo(() => ({ audio, video }), [audio, video]);
+}
+
+function allowJoinUnmuted(skipLobby: boolean, isJoined: boolean): boolean {
+  return (
+    (!skipLobby && !isJoined) || import.meta.env.VITE_PACKAGE === "embedded"
+  );
+}

src/room/ReactionAudioRenderer.test.tsx

@@ -10,9 +10,8 @@ import {
   afterAll,
   afterEach,
   beforeEach,
-  describe,
   expect,
-  it,
+  test,
   vitest,
   type MockedFunction,
   type Mock,
@@ -28,7 +27,7 @@ import {
 import { useAudioContext } from "../useAudioContext";
 import { GenericReaction, ReactionSet } from "../reactions";
 import { prefetchSounds } from "../soundUtils";
-import { type CallViewModel } from "../state/CallViewModel/CallViewModel";
+import { type CallViewModel } from "../state/CallViewModel";
 import { getBasicCallViewModelEnvironment } from "../utils/test-viewmodel";
 import {
   alice,
@@ -46,129 +45,125 @@ function TestComponent({ vm }: { vm: CallViewModel }): ReactNode {
   );
 }
 
-vitest.mock("livekit-client/e2ee-worker?worker");
 vitest.mock("../useAudioContext");
 vitest.mock("../soundUtils");
 
+afterEach(() => {
+  vitest.resetAllMocks();
+  playReactionsSoundSetting.setValue(playReactionsSoundSetting.defaultValue);
+  soundEffectVolumeSetting.setValue(soundEffectVolumeSetting.defaultValue);
+});
+
+afterAll(() => {
+  vitest.restoreAllMocks();
+});
+
 let playSound: Mock<
   NonNullable<ReturnType<typeof useAudioContext>>["playSound"]
 >;
 
-describe("ReactionAudioRenderer", () => {
-  afterEach(() => {
-    playReactionsSoundSetting.setValue(playReactionsSoundSetting.defaultValue);
-    soundEffectVolumeSetting.setValue(soundEffectVolumeSetting.defaultValue);
+beforeEach(() => {
+  (prefetchSounds as MockedFunction<typeof prefetchSounds>).mockResolvedValue({
+    sound: new ArrayBuffer(0),
   });
-  beforeEach(() => {
-    (prefetchSounds as MockedFunction<typeof prefetchSounds>).mockResolvedValue(
-      {
-        sound: new ArrayBuffer(0),
-      },
-    );
-    playSound = vitest.fn();
-    (useAudioContext as MockedFunction<typeof useAudioContext>).mockReturnValue(
-      {
-        playSound,
-        playSoundLooping: vitest.fn(),
-        soundDuration: {},
-      },
-    );
-  });
-  afterAll(() => {
-    vitest.restoreAllMocks();
-  });
-
-  it("preloads all audio elements", () => {
-    const { vm } = getBasicCallViewModelEnvironment([local, alice]);
-    playReactionsSoundSetting.setValue(true);
-    render(<TestComponent vm={vm} />);
-    expect(prefetchSounds).toHaveBeenCalledOnce();
-  });
-
-  it("will play an audio sound when there is a reaction", () => {
-    const { vm, reactionsSubject$ } = getBasicCallViewModelEnvironment([
-      local,
-      alice,
-    ]);
-    playReactionsSoundSetting.setValue(true);
-    render(<TestComponent vm={vm} />);
-
-    // Find the first reaction with a sound effect
-    const chosenReaction = ReactionSet.find((r) => !!r.sound);
-    if (!chosenReaction) {
-      throw Error(
-        "No reactions have sounds configured, this test cannot succeed",
-      );
-    }
-    act(() => {
-      reactionsSubject$.next({
-        [aliceRtcMember.deviceId]: {
-          reactionOption: chosenReaction,
-          expireAfter: new Date(0),
-        },
-      });
-    });
-    expect(playSound).toHaveBeenCalledWith(chosenReaction.name);
-  });
-
-  it("will play the generic audio sound when there is soundless reaction", () => {
-    const { vm, reactionsSubject$ } = getBasicCallViewModelEnvironment([
-      local,
-      alice,
-    ]);
-    playReactionsSoundSetting.setValue(true);
-    render(<TestComponent vm={vm} />);
-
-    // Find the first reaction with a sound effect
-    const chosenReaction = ReactionSet.find((r) => !r.sound);
-    if (!chosenReaction) {
-      throw Error(
-        "No reactions have sounds configured, this test cannot succeed",
-      );
-    }
-    act(() => {
-      reactionsSubject$.next({
-        [aliceRtcMember.deviceId]: {
-          reactionOption: chosenReaction,
-          expireAfter: new Date(0),
-        },
-      });
-    });
-    expect(playSound).toHaveBeenCalledWith(GenericReaction.name);
-  });
-
-  it("will play multiple audio sounds when there are multiple different reactions", () => {
-    const { vm, reactionsSubject$ } = getBasicCallViewModelEnvironment([
-      local,
-      alice,
-    ]);
-    playReactionsSoundSetting.setValue(true);
-    render(<TestComponent vm={vm} />);
-
-    // Find the first reaction with a sound effect
-    const [reaction1, reaction2] = ReactionSet.filter((r) => !!r.sound);
-    if (!reaction1 || !reaction2) {
-      throw Error(
-        "No reactions have sounds configured, this test cannot succeed",
-      );
-    }
-    act(() => {
-      reactionsSubject$.next({
-        [aliceRtcMember.deviceId]: {
-          reactionOption: reaction1,
-          expireAfter: new Date(0),
-        },
-        [bobRtcMember.deviceId]: {
-          reactionOption: reaction2,
-          expireAfter: new Date(0),
-        },
-        [localRtcMember.deviceId]: {
-          reactionOption: reaction1,
-          expireAfter: new Date(0),
-        },
-      });
-    });
-    expect(playSound).toHaveBeenCalledWith(reaction1.name);
-    expect(playSound).toHaveBeenCalledWith(reaction2.name);
+  playSound = vitest.fn();
+  (useAudioContext as MockedFunction<typeof useAudioContext>).mockReturnValue({
+    playSound,
+    playSoundLooping: vitest.fn(),
+    soundDuration: {},
   });
 });
+
+test("preloads all audio elements", () => {
+  const { vm } = getBasicCallViewModelEnvironment([local, alice]);
+  playReactionsSoundSetting.setValue(true);
+  render(<TestComponent vm={vm} />);
+  expect(prefetchSounds).toHaveBeenCalledOnce();
+});
+
+test("will play an audio sound when there is a reaction", () => {
+  const { vm, reactionsSubject$ } = getBasicCallViewModelEnvironment([
+    local,
+    alice,
+  ]);
+  playReactionsSoundSetting.setValue(true);
+  render(<TestComponent vm={vm} />);
+
+  // Find the first reaction with a sound effect
+  const chosenReaction = ReactionSet.find((r) => !!r.sound);
+  if (!chosenReaction) {
+    throw Error(
+      "No reactions have sounds configured, this test cannot succeed",
+    );
+  }
+  act(() => {
+    reactionsSubject$.next({
+      [aliceRtcMember.deviceId]: {
+        reactionOption: chosenReaction,
+        expireAfter: new Date(0),
+      },
+    });
+  });
+  expect(playSound).toHaveBeenCalledWith(chosenReaction.name);
+});
+
+test("will play the generic audio sound when there is soundless reaction", () => {
+  const { vm, reactionsSubject$ } = getBasicCallViewModelEnvironment([
+    local,
+    alice,
+  ]);
+  playReactionsSoundSetting.setValue(true);
+  render(<TestComponent vm={vm} />);
+
+  // Find the first reaction with a sound effect
+  const chosenReaction = ReactionSet.find((r) => !r.sound);
+  if (!chosenReaction) {
+    throw Error(
+      "No reactions have sounds configured, this test cannot succeed",
+    );
+  }
+  act(() => {
+    reactionsSubject$.next({
+      [aliceRtcMember.deviceId]: {
+        reactionOption: chosenReaction,
+        expireAfter: new Date(0),
+      },
+    });
+  });
+  expect(playSound).toHaveBeenCalledWith(GenericReaction.name);
+});
+
+test("will play multiple audio sounds when there are multiple different reactions", () => {
+  const { vm, reactionsSubject$ } = getBasicCallViewModelEnvironment([
+    local,
+    alice,
+  ]);
+  playReactionsSoundSetting.setValue(true);
+  render(<TestComponent vm={vm} />);
+
+  // Find the first reaction with a sound effect
+  const [reaction1, reaction2] = ReactionSet.filter((r) => !!r.sound);
+  if (!reaction1 || !reaction2) {
+    throw Error(
+      "No reactions have sounds configured, this test cannot succeed",
+    );
+  }
+  act(() => {
+    reactionsSubject$.next({
+      [aliceRtcMember.deviceId]: {
+        reactionOption: reaction1,
+        expireAfter: new Date(0),
+      },
+      [bobRtcMember.deviceId]: {
+        reactionOption: reaction2,
+        expireAfter: new Date(0),
+      },
+      [localRtcMember.deviceId]: {
+        reactionOption: reaction1,
+        expireAfter: new Date(0),
+      },
+    });
+  });
+  expect(playSound).toHaveBeenCalledWith(reaction1.name);
+  expect(playSound).toHaveBeenCalledWith(reaction2.name);
+});

src/room/ReactionAudioRenderer.tsx

@@ -12,7 +12,7 @@ import { GenericReaction, ReactionSet } from "../reactions";
 import { useAudioContext } from "../useAudioContext";
 import { prefetchSounds } from "../soundUtils";
 import { useLatest } from "../useLatest";
-import { type CallViewModel } from "../state/CallViewModel/CallViewModel";
+import { type CallViewModel } from "../state/CallViewModel";
 
 const soundMap = Object.fromEntries([
   ...ReactionSet.filter((v) => v.sound !== undefined).map((v) => [

src/room/ReactionsOverlay.test.tsx

@@ -6,7 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { render } from "@testing-library/react";
-import { expect, test, afterEach, vi } from "vitest";
+import { expect, test, afterEach } from "vitest";
 import { act } from "react";
 
 import { showReactions } from "../settings/settings";
@@ -20,8 +20,6 @@ import {
 } from "../utils/test-fixtures";
 import { getBasicCallViewModelEnvironment } from "../utils/test-viewmodel";
 
-vi.mock("livekit-client/e2ee-worker?worker");
-
 afterEach(() => {
   showReactions.setValue(showReactions.defaultValue);
 });

src/room/ReactionsOverlay.tsx

@@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details.
 import { type ReactNode } from "react";
 
 import styles from "./ReactionsOverlay.module.css";
-import { type CallViewModel } from "../state/CallViewModel/CallViewModel";
+import { type CallViewModel } from "../state/CallViewModel";
 import { useBehavior } from "../useBehavior";
 
 export function ReactionsOverlay({ vm }: { vm: CallViewModel }): ReactNode {

src/room/RoomPage.tsx

@@ -20,8 +20,6 @@ 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";
@@ -37,13 +35,12 @@ import { CallTerminatedMessage, useLoadGroupCall } from "./useLoadGroupCall";
 import { LobbyView } from "./LobbyView";
 import { E2eeType } from "../e2ee/e2eeType";
 import { useProfile } from "../profile/useProfile";
+import { useMuteStates } from "./MuteStates";
 import { useOptInAnalytics } from "../settings/settings";
 import { Config } from "../config/Config";
 import { Link } from "../button/Link";
 import { ErrorView } from "../ErrorView";
-import { useMediaDevices } from "../MediaDevicesContext";
-import { MuteStates } from "../state/MuteStates";
-import { ObservableScope } from "../state/ObservableScope";
+import { useMatrixRTCSessionJoinState } from "../useMatrixRTCSessionJoinState";
 
 export const RoomPage: FC = () => {
   const { confineToRoom, appPrompt, preload, header, displayName, skipLobby } =
@@ -64,19 +61,10 @@ export const RoomPage: FC = () => {
   const { avatarUrl, displayName: userDisplayName } = useProfile(client);
 
   const groupCallState = useLoadGroupCall(client, roomIdOrAlias, viaServers);
-  const [joined, setJoined] = useState(false);
-
-  const devices = useMediaDevices();
-  const [muteStates, setMuteStates] = useState<MuteStates | null>(null);
-  const joined$ = useObservable(
-    (inputs$) => inputs$.pipe(map(([joined]) => joined)),
-    [joined],
+  const isJoined = useMatrixRTCSessionJoinState(
+    groupCallState.kind === "loaded" ? groupCallState.rtcSession : undefined,
   );
-  useEffect(() => {
-    const scope = new ObservableScope();
-    setMuteStates(new MuteStates(scope, devices, joined$));
-    return (): void => scope.end();
-  }, [devices, joined$]);
+  const muteStates = useMuteStates(isJoined);
 
   useEffect(() => {
     // If we've finished loading, are not already authed and we've been given a display name as
@@ -113,25 +101,22 @@ export const RoomPage: FC = () => {
     }
   }, [groupCallState.kind]);
 
-  const groupCallView = (): ReactNode => {
+  const groupCallView = (): JSX.Element => {
     switch (groupCallState.kind) {
       case "loaded":
         return (
-          muteStates && (
-            <GroupCallView
-              widget={widget}
-              client={client!}
-              rtcSession={groupCallState.rtcSession}
-              joined={joined}
-              setJoined={setJoined}
-              isPasswordlessUser={passwordlessUser}
-              confineToRoom={confineToRoom}
-              preload={preload}
-              skipLobby={skipLobby || wasInWaitForInviteState.current}
-              header={header}
-              muteStates={muteStates}
-            />
-          )
+          <GroupCallView
+            widget={widget}
+            client={client!}
+            rtcSession={groupCallState.rtcSession}
+            isJoined={isJoined}
+            isPasswordlessUser={passwordlessUser}
+            confineToRoom={confineToRoom}
+            preload={preload}
+            skipLobby={skipLobby || wasInWaitForInviteState.current}
+            header={header}
+            muteStates={muteStates}
+          />
         );
       case "waitForInvite":
       case "canKnock": {
@@ -150,35 +135,34 @@ export const RoomPage: FC = () => {
             </>
           );
         return (
-          muteStates && (
-            <LobbyView
-              client={client!}
-              matrixInfo={{
-                userId: client!.getUserId() ?? "",
-                displayName: userDisplayName ?? "",
-                avatarUrl: avatarUrl ?? "",
-                roomAlias: null,
-                roomId: groupCallState.roomSummary.room_id,
-                roomName: groupCallState.roomSummary.name ?? "",
-                roomAvatar: groupCallState.roomSummary.avatar_url ?? null,
-                e2eeSystem: {
-                  kind: groupCallState.roomSummary[
-                    "im.nheko.summary.encryption"
-                  ]
-                    ? E2eeType.PER_PARTICIPANT
-                    : E2eeType.NONE,
-                },
-              }}
-              onEnter={(): void => knock?.()}
-              enterLabel={label}
-              waitingForInvite={groupCallState.kind === "waitForInvite"}
-              confineToRoom={confineToRoom}
-              hideHeader={header !== "standard"}
-              participantCount={null}
-              muteStates={muteStates}
-              onShareClick={null}
-            />
-          )
+          <LobbyView
+            client={client!}
+            matrixInfo={{
+              userId: client!.getUserId() ?? "",
+              displayName: userDisplayName ?? "",
+              avatarUrl: avatarUrl ?? "",
+              roomAlias: null,
+              roomId: groupCallState.roomSummary.room_id,
+              roomName: groupCallState.roomSummary.name ?? "",
+              roomAvatar: groupCallState.roomSummary.avatar_url ?? null,
+              e2eeSystem: {
+                kind: groupCallState.roomSummary["im.nheko.summary.encryption"]
+                  ? E2eeType.PER_PARTICIPANT
+                  : E2eeType.NONE,
+              },
+            }}
+            onEnter={async (): Promise<void> => {
+              knock?.();
+              return Promise.resolve();
+            }}
+            enterLabel={label}
+            waitingForInvite={groupCallState.kind === "waitForInvite"}
+            confineToRoom={confineToRoom}
+            hideHeader={header !== "standard"}
+            participantCount={null}
+            muteStates={muteStates}
+            onShareClick={null}
+          />
         );
       }
       case "loading":

src/room/VideoPreview.test.tsx

@@ -5,12 +5,20 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { expect, describe, it, beforeAll } from "vitest";
+import { expect, describe, it, vi, beforeAll } from "vitest";
 import { render } from "@testing-library/react";
 
 import { type MatrixInfo, VideoPreview } from "./VideoPreview";
+import { type MuteStates } from "./MuteStates";
 import { E2eeType } from "../e2ee/e2eeType";
 
+function mockMuteStates({ audio = true, video = true } = {}): MuteStates {
+  return {
+    audio: { enabled: audio, setEnabled: vi.fn() },
+    video: { enabled: video, setEnabled: vi.fn() },
+  };
+}
+
 describe("VideoPreview", () => {
   const matrixInfo: MatrixInfo = {
     userId: "@a:example.org",
@@ -41,7 +49,7 @@ describe("VideoPreview", () => {
     const { queryByRole } = render(
       <VideoPreview
         matrixInfo={matrixInfo}
-        videoEnabled={false}
+        muteStates={mockMuteStates({ video: false })}
         videoTrack={null}
         children={<></>}
       />,
@@ -53,7 +61,7 @@ describe("VideoPreview", () => {
     const { queryByRole } = render(
       <VideoPreview
         matrixInfo={matrixInfo}
-        videoEnabled
+        muteStates={mockMuteStates({ video: true })}
         videoTrack={null}
         children={<></>}
       />,

src/room/VideoPreview.tsx

@@ -13,6 +13,7 @@ import { useTranslation } from "react-i18next";
 
 import { TileAvatar } from "../tile/TileAvatar";
 import styles from "./VideoPreview.module.css";
+import { type MuteStates } from "./MuteStates";
 import { type EncryptionSystem } from "../e2ee/sharedKeyManagement";
 
 export type MatrixInfo = {
@@ -28,14 +29,14 @@ export type MatrixInfo = {
 
 interface Props {
   matrixInfo: MatrixInfo;
-  videoEnabled: boolean;
+  muteStates: MuteStates;
   videoTrack: LocalVideoTrack | null;
   children: ReactNode;
 }
 
 export const VideoPreview: FC<Props> = ({
   matrixInfo,
-  videoEnabled,
+  muteStates,
   videoTrack,
   children,
 }) => {
@@ -55,8 +56,8 @@ export const VideoPreview: FC<Props> = ({
   }, [videoTrack]);
 
   const cameraIsStarting = useMemo(
-    () => videoEnabled && !videoTrack,
-    [videoEnabled, videoTrack],
+    () => muteStates.video.enabled && !videoTrack,
+    [muteStates.video.enabled, videoTrack],
   );
 
   return (
@@ -75,7 +76,7 @@ export const VideoPreview: FC<Props> = ({
         tabIndex={-1}
         disablePictureInPicture
       />
-      {(!videoEnabled || cameraIsStarting) && (
+      {(!muteStates.video.enabled || cameraIsStarting) && (
         <>
           <div className={styles.avatarContainer}>
             {cameraIsStarting && (

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

@@ -292,7 +292,7 @@ exports[`should have a close button in widget mode 1`] = `
             Call is not supported
           </h1>
           <p>
-            The server is not configured to work with Element Call. Please contact your server admin (Domain: example.com, Error Code: MISSING_MATRIX_RTC_TRANSPORT).
+            The server is not configured to work with Element Call. Please contact your server admin (Domain: example.com, Error Code: MISSING_MATRIX_RTC_FOCUS).
           </p>
           <button
             class="_button_vczzf_8"
@@ -445,7 +445,7 @@ exports[`should render the error page with link back to home 1`] = `
             Call is not supported
           </h1>
           <p>
-            The server is not configured to work with Element Call. Please contact your server admin (Domain: example.com, Error Code: MISSING_MATRIX_RTC_TRANSPORT).
+            The server is not configured to work with Element Call. Please contact your server admin (Domain: example.com, Error Code: MISSING_MATRIX_RTC_FOCUS).
           </p>
           <button
             class="_button_vczzf_8 homeLink"
@@ -598,7 +598,7 @@ exports[`should report correct error for 'Call is not supported' 1`] = `
             Call is not supported
           </h1>
           <p>
-            The server is not configured to work with Element Call. Please contact your server admin (Domain: example.com, Error Code: MISSING_MATRIX_RTC_TRANSPORT).
+            The server is not configured to work with Element Call. Please contact your server admin (Domain: example.com, Error Code: MISSING_MATRIX_RTC_FOCUS).
           </p>
           <button
             class="_button_vczzf_8 homeLink"

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

@@ -83,6 +83,9 @@ exports[`InCallView > rendering > renders 1`] = `
         class="nav rightNav"
       />
     </header>
+    <div>
+      mocked: MatrixAudioRenderer
+    </div>
     <div
       class="scrollingGrid grid"
     >
@@ -285,7 +288,7 @@ exports[`InCallView > rendering > renders 1`] = `
         class="buttons"
       >
         <button
-          aria-disabled="true"
+          aria-disabled="false"
           aria-labelledby="«r8»"
           class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
           data-kind="primary"
@@ -308,7 +311,7 @@ exports[`InCallView > rendering > renders 1`] = `
           </svg>
         </button>
         <button
-          aria-disabled="true"
+          aria-disabled="false"
           aria-labelledby="«rd»"
           class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
           data-kind="primary"

src/room/checkForParallelCalls.test.ts

@@ -0,0 +1,155 @@
+/*
+Copyright 2023, 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { vi, type Mocked, test, expect } from "vitest";
+import { type RoomState } from "matrix-js-sdk";
+
+import { PosthogAnalytics } from "../../src/analytics/PosthogAnalytics";
+import { checkForParallelCalls } from "../../src/room/checkForParallelCalls";
+import { withFakeTimers } from "../utils/test";
+
+const withMockedPosthog = (
+  continuation: (posthog: Mocked<PosthogAnalytics>) => void,
+): void => {
+  const posthog = vi.mocked({
+    trackEvent: vi.fn(),
+  } as unknown as PosthogAnalytics);
+  const instanceSpy = vi
+    .spyOn(PosthogAnalytics, "instance", "get")
+    .mockReturnValue(posthog);
+  try {
+    continuation(posthog);
+  } finally {
+    instanceSpy.mockRestore();
+  }
+};
+
+const mockRoomState = (
+  groupCallMemberContents: Record<string, unknown>[],
+): RoomState => {
+  const stateEvents = groupCallMemberContents.map((content) => ({
+    getContent: (): Record<string, unknown> => content,
+  }));
+  return { getStateEvents: () => stateEvents } as unknown as RoomState;
+};
+
+test("checkForParallelCalls does nothing if all participants are in the same call", () => {
+  withFakeTimers(() => {
+    withMockedPosthog((posthog) => {
+      const roomState = mockRoomState([
+        {
+          "m.calls": [
+            {
+              "m.call_id": "1",
+              "m.devices": [
+                {
+                  device_id: "Element Call",
+                  session_id: "a",
+                  expires_ts: Date.now() + 1000,
+                },
+              ],
+            },
+            {
+              "m.call_id": null, // invalid
+              "m.devices": [
+                {
+                  device_id: "Element Android",
+                  session_id: "a",
+                  expires_ts: Date.now() + 1000,
+                },
+              ],
+            },
+            null, // invalid
+          ],
+        },
+        {
+          "m.calls": [
+            {
+              "m.call_id": "1",
+              "m.devices": [
+                {
+                  device_id: "Element Desktop",
+                  session_id: "a",
+                  expires_ts: Date.now() + 1000,
+                },
+              ],
+            },
+          ],
+        },
+      ]);
+
+      checkForParallelCalls(roomState);
+      expect(posthog.trackEvent).not.toHaveBeenCalled();
+    });
+  });
+});
+
+test("checkForParallelCalls sends diagnostics to PostHog if there is a split-brain", () => {
+  withFakeTimers(() => {
+    withMockedPosthog((posthog) => {
+      const roomState = mockRoomState([
+        {
+          "m.calls": [
+            {
+              "m.call_id": "1",
+              "m.devices": [
+                {
+                  device_id: "Element Call",
+                  session_id: "a",
+                  expires_ts: Date.now() + 1000,
+                },
+              ],
+            },
+            {
+              "m.call_id": "2",
+              "m.devices": [
+                {
+                  device_id: "Element Android",
+                  session_id: "a",
+                  expires_ts: Date.now() + 1000,
+                },
+              ],
+            },
+          ],
+        },
+        {
+          "m.calls": [
+            {
+              "m.call_id": "1",
+              "m.devices": [
+                {
+                  device_id: "Element Desktop",
+                  session_id: "a",
+                  expires_ts: Date.now() + 1000,
+                },
+              ],
+            },
+            {
+              "m.call_id": "2",
+              "m.devices": [
+                {
+                  device_id: "Element Call",
+                  session_id: "a",
+                  expires_ts: Date.now() - 1000,
+                },
+              ],
+            },
+          ],
+        },
+      ]);
+
+      checkForParallelCalls(roomState);
+      expect(posthog.trackEvent).toHaveBeenCalledWith({
+        eventName: "ParallelCalls",
+        participantsPerCall: {
+          "1": 2,
+          "2": 1,
+        },
+      });
+    });
+  });
+});

src/room/checkForParallelCalls.ts

@@ -0,0 +1,55 @@
+/*
+Copyright 2023, 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { EventType, type RoomState } from "matrix-js-sdk";
+
+import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
+
+function isObject(x: unknown): x is Record<string, unknown> {
+  return typeof x === "object" && x !== null;
+}
+
+/**
+ * Checks the state of a room for multiple calls happening in parallel, sending
+ * the details to PostHog if that is indeed what's happening. (This is unwanted
+ * as it indicates a split-brain scenario.)
+ */
+export function checkForParallelCalls(state: RoomState): void {
+  const now = Date.now();
+  const participantsPerCall = new Map<string, number>();
+
+  // For each participant in each call, increment the participant count
+  for (const e of state.getStateEvents(EventType.GroupCallMemberPrefix)) {
+    const content = e.getContent<Record<string, unknown>>();
+    const calls: unknown[] = Array.isArray(content["m.calls"])
+      ? content["m.calls"]
+      : [];
+
+    for (const call of calls) {
+      if (isObject(call) && typeof call["m.call_id"] === "string") {
+        const devices: unknown[] = Array.isArray(call["m.devices"])
+          ? call["m.devices"]
+          : [];
+
+        for (const device of devices) {
+          if (isObject(device) && (device["expires_ts"] as number) > now) {
+            const participantCount =
+              participantsPerCall.get(call["m.call_id"]) ?? 0;
+            participantsPerCall.set(call["m.call_id"], participantCount + 1);
+          }
+        }
+      }
+    }
+  }
+
+  if (participantsPerCall.size > 1) {
+    PosthogAnalytics.instance.trackEvent({
+      eventName: "ParallelCalls",
+      participantsPerCall: Object.fromEntries(participantsPerCall),
+    });
+  }
+}

src/room/useActiveFocus.ts

@@ -0,0 +1,45 @@
+/*
+Copyright 2023, 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import {
+  type MatrixRTCSession,
+  MatrixRTCSessionEvent,
+} from "matrix-js-sdk/lib/matrixrtc";
+import { useCallback, useRef } from "react";
+import { deepCompare } from "matrix-js-sdk/lib/utils";
+import { logger } from "matrix-js-sdk/lib/logger";
+import { type LivekitFocus, isLivekitFocus } from "matrix-js-sdk/lib/matrixrtc";
+
+import { useTypedEventEmitterState } from "../useEvents";
+
+/**
+ * Gets the currently active (livekit) focus for a MatrixRTC session
+ * This logic is specific to livekit foci where the whole call must use one
+ * and the same focus.
+ */
+export function useActiveLivekitFocus(
+  rtcSession: MatrixRTCSession,
+): LivekitFocus | undefined {
+  const prevActiveFocus = useRef<LivekitFocus | undefined>(undefined);
+  return useTypedEventEmitterState(
+    rtcSession,
+    MatrixRTCSessionEvent.MembershipsChanged,
+    useCallback(() => {
+      const f = rtcSession.getActiveFocus();
+      // Only handle foci with type="livekit" for now.
+      if (f && isLivekitFocus(f) && !deepCompare(f, prevActiveFocus.current)) {
+        const oldestMembership = rtcSession.getOldestMembership();
+        logger.info(
+          `Got new active focus from membership: ${oldestMembership?.sender}/${oldestMembership?.deviceId}.
+          Updated focus (focus switch) from ${JSON.stringify(prevActiveFocus.current)} to ${JSON.stringify(f)}`,
+        );
+        prevActiveFocus.current = f;
+      }
+      return prevActiveFocus.current;
+    }, [rtcSession]),
+  );
+}

src/rtcSessionHelpers.test.ts

@@ -6,20 +6,21 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
-import { expect, test, vi } from "vitest";
+import { expect, onTestFinished, test, vi } from "vitest";
 import { AutoDiscovery } from "matrix-js-sdk/lib/autodiscovery";
 import EventEmitter from "events";
 
-import { MatrixRTCMode } from "../../../settings/settings";
-import { mockConfig } from "../../../utils/test";
-import { enterRTCSession } from "./LocalMembership";
+import { enterRTCSession, leaveRTCSession } from "../src/rtcSessionHelpers";
+import { mockConfig } from "./utils/test";
+import { ElementWidgetActions, widget } from "./widget";
+import { ErrorCode } from "./utils/errors.ts";
 
-const MATRIX_RTC_MODE = MatrixRTCMode.Legacy;
 const getUrlParams = vi.hoisted(() => vi.fn(() => ({})));
-vi.mock("../../../UrlParams", () => ({ getUrlParams }));
+vi.mock("./UrlParams", () => ({ getUrlParams }));
 
-vi.mock("../../../widget", async (importOriginal) => ({
-  ...(await importOriginal()),
+const actualWidget = await vi.hoisted(async () => vi.importActual("./widget"));
+vi.mock("./widget", () => ({
+  ...actualWidget,
   widget: {
     api: {
       setAlwaysOnScreen: (): void => {},
@@ -84,33 +85,103 @@ test("It joins the correct Session", async () => {
     }),
     joinRoomSession: vi.fn(),
   }) as unknown as MatrixRTCSession;
-
-  await enterRTCSession(
-    mockedSession,
-    {
-      livekit_alias: "roomId",
-      livekit_service_url: "http://my-well-known-service-url.com",
-      type: "livekit",
-    },
-    {
-      encryptMedia: true,
-      matrixRTCMode: MATRIX_RTC_MODE,
-    },
-  );
+  await enterRTCSession(mockedSession, false);
 
   expect(mockedSession.joinRoomSession).toHaveBeenLastCalledWith(
     [
+      {
+        livekit_alias: "my-oldest-member-service-alias",
+        livekit_service_url: "http://my-oldest-member-service-url.com",
+        type: "livekit",
+      },
       {
         livekit_alias: "roomId",
         livekit_service_url: "http://my-well-known-service-url.com",
         type: "livekit",
       },
+      {
+        livekit_alias: "roomId",
+        livekit_service_url: "http://my-well-known-service-url2.com",
+        type: "livekit",
+      },
+      {
+        livekit_alias: "roomId",
+        livekit_service_url: "http://my-default-service-url.com",
+        type: "livekit",
+      },
     ],
-    undefined,
-    expect.objectContaining({
-      manageMediaKeys: true,
+    {
+      focus_selection: "oldest_membership",
+      type: "livekit",
+    },
+    {
+      manageMediaKeys: false,
       useLegacyMemberEvents: false,
-    }),
+      useNewMembershipManager: true,
+      useExperimentalToDeviceTransport: false,
+    },
+  );
+});
+
+async function testLeaveRTCSession(
+  cause: "user" | "error",
+  expectClose: boolean,
+): Promise<void> {
+  vi.clearAllMocks();
+  const session = { leaveRoomSession: vi.fn() } as unknown as MatrixRTCSession;
+  await leaveRTCSession(session, cause);
+  expect(session.leaveRoomSession).toHaveBeenCalled();
+  expect(widget!.api.transport.send).toHaveBeenCalledWith(
+    ElementWidgetActions.HangupCall,
+    expect.anything(),
+  );
+  if (expectClose) {
+    expect(widget!.api.transport.send).toHaveBeenCalledWith(
+      ElementWidgetActions.Close,
+      expect.anything(),
+    );
+    expect(widget!.api.transport.stop).toHaveBeenCalled();
+  } else {
+    expect(widget!.api.transport.send).not.toHaveBeenCalledWith(
+      ElementWidgetActions.Close,
+      expect.anything(),
+    );
+    expect(widget!.api.transport.stop).not.toHaveBeenCalled();
+  }
+}
+
+test("leaveRTCSession closes the widget on a normal hangup", async () => {
+  await testLeaveRTCSession("user", true);
+});
+
+test("leaveRTCSession doesn't close the widget on a fatal error", async () => {
+  await testLeaveRTCSession("error", false);
+});
+
+test("leaveRTCSession doesn't close the widget when returning to lobby", async () => {
+  getUrlParams.mockReturnValue({ returnToLobby: true });
+  onTestFinished(() => void getUrlParams.mockReset());
+  await testLeaveRTCSession("user", false);
+});
+
+test("It fails with configuration error if no live kit url config is set in fallback", async () => {
+  mockConfig({});
+  vi.spyOn(AutoDiscovery, "getRawClientConfig").mockResolvedValue({});
+
+  const mockedSession = vi.mocked({
+    room: {
+      roomId: "roomId",
+      client: {
+        getDomain: vi.fn().mockReturnValue("example.org"),
+      },
+    },
+    memberships: [],
+    getFocusInUse: vi.fn(),
+    joinRoomSession: vi.fn(),
+  }) as unknown as MatrixRTCSession;
+
+  await expect(enterRTCSession(mockedSession, false)).rejects.toThrowError(
+    expect.objectContaining({ code: ErrorCode.MISSING_MATRIX_RTC_FOCUS }),
   );
 });
 
@@ -143,16 +214,5 @@ test("It should not fail with configuration error if homeserver config has livek
     joinRoomSession: vi.fn(),
   }) as unknown as MatrixRTCSession;
 
-  await enterRTCSession(
-    mockedSession,
-    {
-      livekit_alias: "roomId",
-      livekit_service_url: "http://my-well-known-service-url.com",
-      type: "livekit",
-    },
-    {
-      encryptMedia: true,
-      matrixRTCMode: MATRIX_RTC_MODE,
-    },
-  );
+  await enterRTCSession(mockedSession, false);
 });

src/rtcSessionHelpers.ts

@@ -0,0 +1,201 @@
+/*
+Copyright 2023, 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import {
+  isLivekitFocus,
+  isLivekitFocusConfig,
+  type LivekitFocus,
+  type LivekitFocusActive,
+  type MatrixRTCSession,
+} from "matrix-js-sdk/lib/matrixrtc";
+import { logger } from "matrix-js-sdk/lib/logger";
+import { AutoDiscovery } from "matrix-js-sdk/lib/autodiscovery";
+
+import { PosthogAnalytics } from "./analytics/PosthogAnalytics";
+import { Config } from "./config/Config";
+import { ElementWidgetActions, widget, type WidgetHelpers } from "./widget";
+import { MatrixRTCFocusMissingError } from "./utils/errors";
+import { getUrlParams } from "./UrlParams";
+import { getSFUConfigWithOpenID } from "./livekit/openIDSFU.ts";
+
+const FOCI_WK_KEY = "org.matrix.msc4143.rtc_foci";
+
+export function makeActiveFocus(): LivekitFocusActive {
+  return {
+    type: "livekit",
+    focus_selection: "oldest_membership",
+  };
+}
+
+async function makePreferredLivekitFoci(
+  rtcSession: MatrixRTCSession,
+  livekitAlias: string,
+): Promise<LivekitFocus[]> {
+  logger.log("Start building foci_preferred list: ", rtcSession.room.roomId);
+
+  const preferredFoci: LivekitFocus[] = [];
+
+  // Make the Focus from the running rtc session the highest priority one
+  // This minimizes how often we need to switch foci during a call.
+  const focusInUse = rtcSession.getFocusInUse();
+  if (focusInUse && isLivekitFocus(focusInUse)) {
+    logger.log("Adding livekit focus from oldest member: ", focusInUse);
+    preferredFoci.push(focusInUse);
+  }
+
+  // Warm up the first focus we owned, to ensure livekit room is created before any state event sent.
+  let toWarmUp: LivekitFocus | undefined;
+
+  // Prioritize the .well-known/matrix/client, if available, over the configured SFU
+  const domain = rtcSession.room.client.getDomain();
+  if (domain) {
+    // we use AutoDiscovery instead of relying on the MatrixClient having already
+    // been fully configured and started
+    const wellKnownFoci = (await AutoDiscovery.getRawClientConfig(domain))?.[
+      FOCI_WK_KEY
+    ];
+    if (Array.isArray(wellKnownFoci)) {
+      const validWellKnownFoci = wellKnownFoci
+        .filter((f) => !!f)
+        .filter(isLivekitFocusConfig)
+        .map((wellKnownFocus) => {
+          logger.log("Adding livekit focus from well known: ", wellKnownFocus);
+          return { ...wellKnownFocus, livekit_alias: livekitAlias };
+        });
+      if (validWellKnownFoci.length > 0) {
+        toWarmUp = validWellKnownFoci[0];
+      }
+      preferredFoci.push(...validWellKnownFoci);
+    }
+  }
+
+  const urlFromConf = Config.get().livekit?.livekit_service_url;
+  if (urlFromConf) {
+    const focusFormConf: LivekitFocus = {
+      type: "livekit",
+      livekit_service_url: urlFromConf,
+      livekit_alias: livekitAlias,
+    };
+    toWarmUp = toWarmUp ?? focusFormConf;
+    logger.log("Adding livekit focus from config: ", focusFormConf);
+    preferredFoci.push(focusFormConf);
+  }
+
+  if (toWarmUp) {
+    // this will call the jwt/sfu/get endpoint to pre create the livekit room.
+    await getSFUConfigWithOpenID(rtcSession.room.client, toWarmUp);
+  }
+  if (preferredFoci.length === 0)
+    throw new MatrixRTCFocusMissingError(domain ?? "");
+  return Promise.resolve(preferredFoci);
+
+  // TODO: we want to do something like this:
+  //
+  // const focusOtherMembers = await focusFromOtherMembers(
+  //   rtcSession,
+  //   livekitAlias,
+  // );
+  // if (focusOtherMembers) preferredFoci.push(focusOtherMembers);
+}
+
+export async function enterRTCSession(
+  rtcSession: MatrixRTCSession,
+  encryptMedia: boolean,
+  useNewMembershipManager = true,
+  useExperimentalToDeviceTransport = false,
+): Promise<void> {
+  PosthogAnalytics.instance.eventCallEnded.cacheStartCall(new Date());
+  PosthogAnalytics.instance.eventCallStarted.track(rtcSession.room.roomId);
+
+  // This must be called before we start trying to join the call, as we need to
+  // have started tracking by the time calls start getting created.
+  // groupCallOTelMembership?.onJoinCall();
+
+  // right now we assume everything is a room-scoped call
+  const livekitAlias = rtcSession.room.roomId;
+  const { features, matrix_rtc_session: matrixRtcSessionConfig } = Config.get();
+  const useDeviceSessionMemberEvents =
+    features?.feature_use_device_session_member_events;
+  const { sendNotificationType: notificationType, callIntent } = getUrlParams();
+  rtcSession.joinRoomSession(
+    await makePreferredLivekitFoci(rtcSession, livekitAlias),
+    makeActiveFocus(),
+    {
+      notificationType,
+      callIntent,
+      useNewMembershipManager,
+      manageMediaKeys: encryptMedia,
+      ...(useDeviceSessionMemberEvents !== undefined && {
+        useLegacyMemberEvents: !useDeviceSessionMemberEvents,
+      }),
+      delayedLeaveEventRestartMs:
+        matrixRtcSessionConfig?.delayed_leave_event_restart_ms,
+      delayedLeaveEventDelayMs:
+        matrixRtcSessionConfig?.delayed_leave_event_delay_ms,
+      delayedLeaveEventRestartLocalTimeoutMs:
+        matrixRtcSessionConfig?.delayed_leave_event_restart_local_timeout_ms,
+      networkErrorRetryMs: matrixRtcSessionConfig?.network_error_retry_ms,
+      makeKeyDelay: matrixRtcSessionConfig?.wait_for_key_rotation_ms,
+      membershipEventExpiryMs:
+        matrixRtcSessionConfig?.membership_event_expiry_ms,
+      useExperimentalToDeviceTransport,
+    },
+  );
+  if (widget) {
+    try {
+      await widget.api.transport.send(ElementWidgetActions.JoinCall, {});
+    } catch (e) {
+      logger.error("Failed to send join action", e);
+    }
+  }
+}
+
+const widgetPostHangupProcedure = async (
+  widget: WidgetHelpers,
+  cause: "user" | "error",
+  promiseBeforeHangup?: Promise<unknown>,
+): Promise<void> => {
+  try {
+    await widget.api.setAlwaysOnScreen(false);
+  } catch (e) {
+    logger.error("Failed to set call widget `alwaysOnScreen` to false", e);
+  }
+
+  // Wait for any last bits before hanging up.
+  await promiseBeforeHangup;
+  // We send the hangup event after the memberships have been updated
+  // calling leaveRTCSession.
+  // We need to wait because this makes the client hosting this widget killing the IFrame.
+  try {
+    await widget.api.transport.send(ElementWidgetActions.HangupCall, {});
+  } catch (e) {
+    logger.error("Failed to send hangup action", e);
+  }
+  // On a normal user hangup we can shut down and close the widget. But if an
+  // error occurs we should keep the widget open until the user reads it.
+  if (cause === "user" && !getUrlParams().returnToLobby) {
+    try {
+      await widget.api.transport.send(ElementWidgetActions.Close, {});
+    } catch (e) {
+      logger.error("Failed to send close action", e);
+    }
+    widget.api.transport.stop();
+  }
+};
+
+export async function leaveRTCSession(
+  rtcSession: MatrixRTCSession,
+  cause: "user" | "error",
+  promiseBeforeHangup?: Promise<unknown>,
+): Promise<void> {
+  await rtcSession.leaveRoomSession();
+  if (widget) {
+    await widgetPostHangupProcedure(widget, cause, promiseBeforeHangup);
+  } else {
+    await promiseBeforeHangup;
+  }
+}

src/settings/DeveloperSettingsTab.tsx

@@ -5,103 +5,72 @@ 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,
-  useEffect,
-  useMemo,
-  useState,
-  useId,
-} from "react";
+import { type ChangeEvent, type FC, useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import {
-  UNSTABLE_MSC4354_STICKY_EVENTS,
-  type MatrixClient,
-} from "matrix-js-sdk";
-import { logger } from "matrix-js-sdk/lib/logger";
-import {
-  Root as Form,
-  Heading,
-  HelpMessage,
-  InlineField,
-  Label,
-  RadioControl,
-} from "@vector-im/compound-web";
 
 import { FieldRow, InputField } from "../input/Input";
 import {
   useSetting,
   duplicateTiles as duplicateTilesSetting,
   debugTileLayout as debugTileLayoutSetting,
+  showNonMemberTiles as showNonMemberTilesSetting,
   showConnectionStats as showConnectionStatsSetting,
+  useNewMembershipManager as useNewMembershipManagerSetting,
+  useExperimentalToDeviceTransport as useExperimentalToDeviceTransportSetting,
   muteAllAudio as muteAllAudioSetting,
   alwaysShowIphoneEarpiece as alwaysShowIphoneEarpieceSetting,
-  matrixRTCMode as matrixRTCModeSetting,
-  MatrixRTCMode,
 } from "./settings";
+import type { MatrixClient } from "matrix-js-sdk";
 import type { Room as LivekitRoom } from "livekit-client";
 import styles from "./DeveloperSettingsTab.module.css";
 import { useUrlParams } from "../UrlParams";
-
 interface Props {
   client: MatrixClient;
-  livekitRooms?: { room: LivekitRoom; url: string; isLocal?: boolean }[];
+  livekitRoom?: LivekitRoom;
 }
 
-export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRooms }) => {
+export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRoom }) => {
   const { t } = useTranslation();
   const [duplicateTiles, setDuplicateTiles] = useSetting(duplicateTilesSetting);
   const [debugTileLayout, setDebugTileLayout] = useSetting(
     debugTileLayoutSetting,
   );
-
-  const [stickyEventsSupported, setStickyEventsSupported] = useState(false);
-  useEffect(() => {
-    client
-      .doesServerSupportUnstableFeature(UNSTABLE_MSC4354_STICKY_EVENTS)
-      .then((result) => {
-        setStickyEventsSupported(result);
-      })
-      .catch((ex) => {
-        logger.warn("Failed to check if sticky events are supported", ex);
-      });
-  }, [client]);
-
-  const [matrixRTCMode, setMatrixRTCMode] = useSetting(matrixRTCModeSetting);
-  const matrixRTCModeRadioGroup = useId();
-  const onMatrixRTCModeChange = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) => {
-      setMatrixRTCMode(e.target.value as MatrixRTCMode);
-    },
-    [setMatrixRTCMode],
+  const [showNonMemberTiles, setShowNonMemberTiles] = useSetting(
+    showNonMemberTilesSetting,
   );
 
   const [showConnectionStats, setShowConnectionStats] = useSetting(
     showConnectionStatsSetting,
   );
 
+  const [useNewMembershipManager, setNewMembershipManager] = useSetting(
+    useNewMembershipManagerSetting,
+  );
+
   const [alwaysShowIphoneEarpiece, setAlwaysShowIphoneEarpiece] = useSetting(
     alwaysShowIphoneEarpieceSetting,
   );
+  const [
+    useExperimentalToDeviceTransport,
+    setUseExperimentalToDeviceTransport,
+  ] = useSetting(useExperimentalToDeviceTransportSetting);
 
   const [muteAllAudio, setMuteAllAudio] = useSetting(muteAllAudioSetting);
 
   const urlParams = useUrlParams();
 
-  const localSfuUrl = useMemo((): URL | null => {
-    const localRoom = livekitRooms?.find((r) => r.isLocal)?.room;
-    if (localRoom?.engine.client.ws?.url) {
+  const sfuUrl = useMemo((): URL | null => {
+    if (livekitRoom?.engine.client.ws?.url) {
       // strip the URL params
-      const url = new URL(localRoom.engine.client.ws.url);
+      const url = new URL(livekitRoom.engine.client.ws.url);
       url.search = "";
       return url;
     }
     return null;
-  }, [livekitRooms]);
+  }, [livekitRoom]);
 
   return (
-    <Form>
+    <>
       <p>
         {t("developer_mode.hostname", {
           hostname: window.location.hostname || "unknown",
@@ -158,6 +127,20 @@ export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRooms }) => {
           }
         />
       </FieldRow>
+      <FieldRow>
+        <InputField
+          id="showNonMemberTiles"
+          type="checkbox"
+          label={t("developer_mode.show_non_member_tiles")}
+          checked={!!showNonMemberTiles}
+          onChange={useCallback(
+            (event: ChangeEvent<HTMLInputElement>): void => {
+              setShowNonMemberTiles(event.target.checked);
+            },
+            [setShowNonMemberTiles],
+          )}
+        />
+      </FieldRow>
       <FieldRow>
         <InputField
           id="showConnectionStats"
@@ -172,6 +155,34 @@ export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRooms }) => {
           )}
         />
       </FieldRow>
+      <FieldRow>
+        <InputField
+          id="useNewMembershipManager"
+          type="checkbox"
+          label={t("developer_mode.use_new_membership_manager")}
+          checked={!!useNewMembershipManager}
+          onChange={useCallback(
+            (event: ChangeEvent<HTMLInputElement>): void => {
+              setNewMembershipManager(event.target.checked);
+            },
+            [setNewMembershipManager],
+          )}
+        />
+      </FieldRow>
+      <FieldRow>
+        <InputField
+          id="useToDeviceKeyTransport"
+          type="checkbox"
+          label={t("developer_mode.use_to_device_key_transport")}
+          checked={!!useExperimentalToDeviceTransport}
+          onChange={useCallback(
+            (event: ChangeEvent<HTMLInputElement>): void => {
+              setUseExperimentalToDeviceTransport(event.target.checked);
+            },
+            [setUseExperimentalToDeviceTransport],
+          )}
+        />
+      </FieldRow>
       <FieldRow>
         <InputField
           id="muteAllAudio"
@@ -200,79 +211,26 @@ export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRooms }) => {
           )}
         />{" "}
       </FieldRow>
-      <Heading as="h3" type="body" weight="semibold" size="lg">
-        {t("developer_mode.matrixRTCMode.title")}
-      </Heading>
-      <InlineField
-        name={matrixRTCModeRadioGroup}
-        control={
-          <RadioControl
-            checked={matrixRTCMode === MatrixRTCMode.Legacy}
-            value={MatrixRTCMode.Legacy}
-            onChange={onMatrixRTCModeChange}
-          />
-        }
-      >
-        <Label>{t("developer_mode.matrixRTCMode.Legacy.label")}</Label>
-        <HelpMessage>
-          {t("developer_mode.matrixRTCMode.Legacy.description")}
-        </HelpMessage>
-      </InlineField>
-      <InlineField
-        name={matrixRTCModeRadioGroup}
-        control={
-          <RadioControl
-            checked={matrixRTCMode === MatrixRTCMode.Compatibil}
-            value={MatrixRTCMode.Compatibil}
-            onChange={onMatrixRTCModeChange}
-          />
-        }
-      >
-        <Label>{t("developer_mode.matrixRTCMode.Comptibility.label")}</Label>
-        <HelpMessage>
-          {t("developer_mode.matrixRTCMode.Comptibility.description")}
-        </HelpMessage>
-      </InlineField>
-      <InlineField
-        name={matrixRTCModeRadioGroup}
-        control={
-          <RadioControl
-            checked={matrixRTCMode === MatrixRTCMode.Matrix_2_0}
-            value={MatrixRTCMode.Matrix_2_0}
-            disabled={!stickyEventsSupported}
-            onChange={onMatrixRTCModeChange}
-          />
-        }
-      >
-        <Label>{t("developer_mode.matrixRTCMode.Matrix_2_0.label")}</Label>
-        <HelpMessage>
-          {t("developer_mode.matrixRTCMode.Matrix_2_0.description")}
-        </HelpMessage>
-      </InlineField>
-      {livekitRooms?.map((livekitRoom) => (
+      {livekitRoom ? (
         <>
-          <h3>
-            {t("developer_mode.livekit_sfu", {
-              url: livekitRoom.url || "unknown",
-            })}
-          </h3>
-          {livekitRoom.isLocal && <p>ws-url: {localSfuUrl?.href}</p>}
           <p>
-            {t("developer_mode.livekit_server_info")}(
-            {livekitRoom.isLocal ? "local" : "remote"})
+            {t("developer_mode.livekit_sfu", {
+              url: sfuUrl?.href || "unknown",
+            })}
           </p>
+          <p>{t("developer_mode.livekit_server_info")}</p>
           <pre className={styles.pre}>
-            {livekitRoom.room.serverInfo
-              ? JSON.stringify(livekitRoom.room.serverInfo, null, 2)
+            {livekitRoom.serverInfo
+              ? JSON.stringify(livekitRoom.serverInfo, null, 2)
               : "undefined"}
-            {livekitRoom.room.metadata}
+            {livekitRoom.metadata}
           </pre>
         </>
-      ))}
+      ) : null}
       <p>{t("developer_mode.environment_variables")}</p>
       <pre>{JSON.stringify(import.meta.env, null, 2)}</pre>
       <p>{t("developer_mode.url_params")}</p>
       <pre>{JSON.stringify(urlParams, null, 2)}</pre>
-    </Form>
+    </>
   );
 };

src/settings/SettingsModal.tsx

@@ -51,11 +51,7 @@ interface Props {
   onTabChange: (tab: SettingsTab) => void;
   client: MatrixClient;
   roomId?: string;
-  livekitRooms?: {
-    room: LivekitRoom;
-    url: string;
-    isLocal?: boolean;
-  }[];
+  livekitRoom?: LivekitRoom;
 }
 
 export const defaultSettingsTab: SettingsTab = "audio";
@@ -67,7 +63,7 @@ export const SettingsModal: FC<Props> = ({
   onTabChange,
   client,
   roomId,
-  livekitRooms,
+  livekitRoom,
 }) => {
   const { t } = useTranslation();
 
@@ -208,9 +204,7 @@ export const SettingsModal: FC<Props> = ({
   const developerTab: Tab<SettingsTab> = {
     key: "developer",
     name: t("settings.developer_tab_title"),
-    content: (
-      <DeveloperSettingsTab client={client} livekitRooms={livekitRooms} />
-    ),
+    content: <DeveloperSettingsTab client={client} livekitRoom={livekitRoom} />,
   };
 
   const tabs = [audioTab, videoTab];

src/settings/settings.ts

@@ -76,6 +76,10 @@ export const developerMode = new Setting("developer-settings-tab", false);
 
 export const duplicateTiles = new Setting("duplicate-tiles", 0);
 
+export const showNonMemberTiles = new Setting<boolean>(
+  "show-non-member-tiles",
+  false,
+);
 export const debugTileLayout = new Setting("debug-tile-layout", false);
 
 export const showConnectionStats = new Setting<boolean>(
@@ -115,6 +119,16 @@ export const soundEffectVolume = new Setting<number>(
   0.5,
 );
 
+export const useNewMembershipManager = new Setting<boolean>(
+  "new-membership-manager",
+  true,
+);
+
+export const useExperimentalToDeviceTransport = new Setting<boolean>(
+  "experimental-to-device-transport",
+  true,
+);
+
 export const muteAllAudio = new Setting<boolean>("mute-all-audio", false);
 
 export const alwaysShowSelf = new Setting<boolean>("always-show-self", true);
@@ -123,14 +137,3 @@ export const alwaysShowIphoneEarpiece = new Setting<boolean>(
   "always-show-iphone-earpiece",
   false,
 );
-
-export enum MatrixRTCMode {
-  Legacy = "legacy",
-  Compatibil = "compatibil",
-  Matrix_2_0 = "matrix_2_0",
-}
-
-export const matrixRTCMode = new Setting<MatrixRTCMode>(
-  "matrix-rtc-mode",
-  MatrixRTCMode.Legacy,
-);

src/state/AppViewModel.ts

@@ -6,16 +6,14 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { MediaDevices } from "./MediaDevices";
-import { type ObservableScope } from "./ObservableScope";
+import { ViewModel } from "./ViewModel";
 
 /**
  * The top-level state holder for the application.
  */
-export class AppViewModel {
+export class AppViewModel extends ViewModel {
   public readonly mediaDevices = new MediaDevices(this.scope);
 
   // TODO: Move more application logic here. The CallViewModel, at the very
   // least, ought to be accessible from this object.
-
-  public constructor(private readonly scope: ObservableScope) {}
 }

src/state/CallViewModel/CallNotificationLifecycle.test.ts

@@ -1,354 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-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,
-  type IEvent,
-  type IRoomTimelineData,
-  MatrixEvent,
-  type Room,
-} from "matrix-js-sdk";
-
-import { withTestScheduler } from "../../utils/test";
-import {
-  aliceRtcMember,
-  local,
-  localRtcMember,
-} from "../../utils/test-fixtures";
-import {
-  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,
-): { event_id: string } & IRTCNotificationContent {
-  return {
-    event_id: eventId,
-    ...(lifetimeMs === undefined ? {} : { lifetime: lifetimeMs }),
-    notification_type: "ring",
-    sender,
-  } as unknown as { event_id: string } & IRTCNotificationContent;
-}
-
-describe("waitForCallPickup$", () => {
-  it("unknown -> ringing -> timeout when notified and nobody joins", () => {
-    withTestScheduler(({ scope, expectObservable, behavior, hot }) => {
-      // No one ever joins (only local user)
-      const props: CallNotificationLifecycleProps = {
-        scope,
-        memberships$: scope.behavior(
-          behavior("a", { a: [] }).pipe(trackEpoch()),
-        ),
-        sentCallNotification$: hot("10ms a", {
-          a: [mockRingEvent("$notif1", 30), mockLegacyRingEvent],
-        }),
-        receivedDecline$: hot(""),
-        options: {
-          waitForCallPickup: true,
-          autoLeaveWhenOthersLeft: false,
-        },
-        localUser: localRtcMember,
-      };
-
-      const lifecycle = createCallNotificationLifecycle$(props);
-
-      expectObservable(lifecycle.callPickupState$).toBe("a 9ms b 29ms c", {
-        a: "unknown",
-        b: "ringing",
-        c: "timeout",
-      });
-    });
-  });
-
-  it("ringing -> success if someone joins before timeout is reached", () => {
-    withTestScheduler(({ scope, hot, behavior, expectObservable }) => {
-      // Someone joins at 20ms (both LiveKit participant and MatrixRTC member)
-      const props: CallNotificationLifecycleProps = {
-        scope,
-        memberships$: scope.behavior(
-          behavior("a 19ms b", {
-            a: [localRtcMember],
-            b: [localRtcMember, aliceRtcMember],
-          }).pipe(trackEpoch()),
-        ),
-        sentCallNotification$: hot("5ms a", {
-          a: [mockRingEvent("$notif2", 100), mockLegacyRingEvent],
-        }),
-        receivedDecline$: hot(""),
-        options: {
-          waitForCallPickup: true,
-          autoLeaveWhenOthersLeft: false,
-        },
-        localUser: localRtcMember,
-      };
-      const lifecycle = createCallNotificationLifecycle$(props);
-      expectObservable(lifecycle.callPickupState$).toBe("a 4ms b 14ms c", {
-        a: "unknown",
-        b: "ringing",
-        c: "success",
-      });
-    });
-  });
-  it("success when someone joins before we notify", () => {
-    withTestScheduler(({ scope, hot, behavior, expectObservable }) => {
-      // Someone joins at 20ms (both LiveKit participant and MatrixRTC member)
-      const props: CallNotificationLifecycleProps = {
-        scope,
-        memberships$: scope.behavior(
-          behavior("a 9ms b", {
-            a: [localRtcMember],
-            b: [localRtcMember, aliceRtcMember],
-          }).pipe(trackEpoch()),
-        ),
-        sentCallNotification$: hot("20ms a", {
-          a: [mockRingEvent("$notif2", 50), mockLegacyRingEvent],
-        }),
-        receivedDecline$: hot(""),
-        options: {
-          waitForCallPickup: true,
-          autoLeaveWhenOthersLeft: false,
-        },
-        localUser: localRtcMember,
-      };
-      const lifecycle = createCallNotificationLifecycle$(props);
-      expectObservable(lifecycle.callPickupState$).toBe("a 9ms b", {
-        a: "unknown",
-        b: "success",
-      });
-    });
-  });
-  it("notify without lifetime -> immediate timeout", () => {
-    withTestScheduler(({ scope, hot, behavior, expectObservable }) => {
-      // Someone joins at 20ms (both LiveKit participant and MatrixRTC member)
-      const props: CallNotificationLifecycleProps = {
-        scope,
-        memberships$: scope.behavior(
-          behavior("a", {
-            a: [localRtcMember],
-          }).pipe(trackEpoch()),
-        ),
-        sentCallNotification$: hot("10ms a", {
-          a: [mockRingEvent("$notif2", undefined), mockLegacyRingEvent],
-        }),
-        receivedDecline$: hot(""),
-        options: {
-          waitForCallPickup: true,
-          autoLeaveWhenOthersLeft: false,
-        },
-        localUser: localRtcMember,
-      };
-      const lifecycle = createCallNotificationLifecycle$(props);
-      expectObservable(lifecycle.callPickupState$).toBe("a 9ms b", {
-        a: "unknown",
-        b: "timeout",
-      });
-    });
-  });
-
-  it("stays null when waitForCallPickup=false", () => {
-    withTestScheduler(({ scope, hot, behavior, expectObservable }) => {
-      // Someone joins at 20ms (both LiveKit participant and MatrixRTC member)
-      const validProps: CallNotificationLifecycleProps = {
-        scope,
-        memberships$: scope.behavior(
-          behavior("a--b", {
-            a: [localRtcMember],
-            b: [localRtcMember, aliceRtcMember],
-          }).pipe(trackEpoch()),
-        ),
-        sentCallNotification$: hot("10ms a", {
-          a: [mockRingEvent("$notif5", 30), mockLegacyRingEvent],
-        }),
-        receivedDecline$: hot(""),
-        options: {
-          waitForCallPickup: true,
-          autoLeaveWhenOthersLeft: false,
-        },
-        localUser: localRtcMember,
-      };
-      const propsDeactivated = {
-        ...validProps,
-        options: {
-          ...validProps.options,
-          waitForCallPickup: false,
-        },
-      };
-      const lifecycle = createCallNotificationLifecycle$(propsDeactivated);
-      expectObservable(lifecycle.callPickupState$).toBe("n", {
-        n: null,
-      });
-      const lifecycleReference = createCallNotificationLifecycle$(validProps);
-      expectObservable(lifecycleReference.callPickupState$).toBe("u--s", {
-        u: "unknown",
-        s: "success",
-      });
-    });
-  });
-
-  it("decline before timeout window ends -> decline", () => {
-    withTestScheduler(({ scope, hot, behavior, expectObservable }) => {
-      // Someone joins at 20ms (both LiveKit participant and MatrixRTC member)
-      const props: CallNotificationLifecycleProps = {
-        scope,
-        memberships$: scope.behavior(
-          behavior("a", {
-            a: [localRtcMember],
-          }).pipe(trackEpoch()),
-        ),
-        sentCallNotification$: hot("10ms a", {
-          a: [mockRingEvent("$decl1", 50), mockLegacyRingEvent],
-        }),
-        receivedDecline$: hot("40ms d", {
-          d: [
-            new MatrixEvent({
-              type: EventType.RTCDecline,
-              content: {
-                "m.relates_to": {
-                  rel_type: "m.reference",
-                  event_id: "$decl1",
-                },
-              },
-            }),
-            {} as Room,
-            undefined,
-            false,
-            {} as IRoomTimelineData,
-          ],
-        }),
-        options: {
-          waitForCallPickup: true,
-          autoLeaveWhenOthersLeft: false,
-        },
-        localUser: localRtcMember,
-      };
-      const lifecycle = createCallNotificationLifecycle$(props);
-      expectObservable(lifecycle.callPickupState$).toBe("a 9ms b 29ms e", {
-        a: "unknown",
-        b: "ringing",
-        e: "decline",
-      });
-    });
-  });
-  it("decline after timeout window ends -> stays timeout", () => {
-    withTestScheduler(({ scope, hot, behavior, expectObservable }) => {
-      // Someone joins at 20ms (both LiveKit participant and MatrixRTC member)
-      const props: CallNotificationLifecycleProps = {
-        scope,
-        memberships$: scope.behavior(
-          behavior("a", {
-            a: [localRtcMember],
-          }).pipe(trackEpoch()),
-        ),
-        sentCallNotification$: hot("10ms a", {
-          a: [mockRingEvent("$decl", 20), mockLegacyRingEvent],
-        }),
-        receivedDecline$: hot("40ms d", {
-          d: [
-            new MatrixEvent({
-              type: EventType.RTCDecline,
-              content: {
-                "m.relates_to": {
-                  rel_type: "m.reference",
-                  event_id: "$decl",
-                },
-              },
-            }),
-            {} as Room,
-            undefined,
-            false,
-            {} as IRoomTimelineData,
-          ],
-        }),
-        options: {
-          waitForCallPickup: true,
-          autoLeaveWhenOthersLeft: false,
-        },
-        localUser: localRtcMember,
-      };
-      const lifecycle = createCallNotificationLifecycle$(props);
-      expectObservable(lifecycle.callPickupState$, "50ms !").toBe(
-        "a 9ms b 19ms e",
-        {
-          a: "unknown",
-          b: "ringing",
-          e: "timeout",
-        },
-      );
-    });
-  });
-  //
-  function testStaysRinging(
-    declineEvent: Partial<IEvent>,
-    expectDecline: boolean,
-  ): void {
-    withTestScheduler(({ scope, hot, behavior, expectObservable }) => {
-      // Someone joins at 20ms (both LiveKit participant and MatrixRTC member)
-      const props: CallNotificationLifecycleProps = {
-        scope,
-        memberships$: scope.behavior(
-          behavior("a", {
-            a: [localRtcMember],
-          }).pipe(trackEpoch()),
-        ),
-        sentCallNotification$: hot("10ms a", {
-          a: [mockRingEvent("$right", 50), mockLegacyRingEvent],
-        }),
-        receivedDecline$: hot("20ms d", {
-          d: [
-            new MatrixEvent(declineEvent),
-            {} as Room,
-            undefined,
-            false,
-            {} as IRoomTimelineData,
-          ],
-        }),
-        options: {
-          waitForCallPickup: true,
-          autoLeaveWhenOthersLeft: false,
-        },
-        localUser: localRtcMember,
-      };
-      const lifecycle = createCallNotificationLifecycle$(props);
-      const marbles = expectDecline ? "a 9ms b 9ms d" : "a 9ms b";
-      expectObservable(lifecycle.callPickupState$, "21ms !").toBe(marbles, {
-        a: "unknown",
-        b: "ringing",
-        d: "decline",
-      });
-    });
-  }
-  const reference = (refId?: string, sender?: string): Partial<IEvent> => ({
-    event_id: "$decline",
-    type: EventType.RTCDecline,
-    sender: sender ?? "@other:example.org",
-    content: {
-      "m.relates_to": {
-        rel_type: "m.reference",
-        event_id: refId ?? "$right",
-      },
-    },
-  });
-  it("decline reference works", () => {
-    testStaysRinging(reference(), true);
-  });
-  it("decline with wrong id is ignored (stays ringing)", () => {
-    testStaysRinging(reference("$wrong"), false);
-  });
-  it("decline with wrong id is ignored (stays ringing)", () => {
-    testStaysRinging(reference(undefined, local.userId), false);
-  });
-});

src/state/CallViewModel/CallNotificationLifecycle.ts

@@ -1,211 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import {
-  type CallMembership,
-  type MatrixRTCSession,
-  MatrixRTCSessionEvent,
-  type MatrixRTCSessionEventHandlerMap,
-} from "matrix-js-sdk/lib/matrixrtc";
-import {
-  combineLatest,
-  concat,
-  endWith,
-  filter,
-  fromEvent,
-  ignoreElements,
-  map,
-  merge,
-  NEVER,
-  type Observable,
-  of,
-  pairwise,
-  startWith,
-  switchMap,
-  takeUntil,
-  timer,
-} from "rxjs";
-import {
-  type EventTimelineSetHandlerMap,
-  EventType,
-  type Room as MatrixRoom,
-  RoomEvent,
-} from "matrix-js-sdk";
-
-import { type Behavior } from "../Behavior";
-import { type Epoch, mapEpoch, type ObservableScope } from "../ObservableScope";
-export type AutoLeaveReason = "allOthersLeft" | "timeout" | "decline";
-export type CallPickupState =
-  | "unknown"
-  | "ringing"
-  | "timeout"
-  | "decline"
-  | "success"
-  | null;
-export type CallNotificationWrapper = Parameters<
-  MatrixRTCSessionEventHandlerMap[MatrixRTCSessionEvent.DidSendCallNotification]
->;
-export function createSentCallNotification$(
-  scope: ObservableScope,
-  matrixRTCSession: MatrixRTCSession,
-): Behavior<CallNotificationWrapper | null> {
-  const sentCallNotification$ = scope.behavior(
-    fromEvent(matrixRTCSession, MatrixRTCSessionEvent.DidSendCallNotification),
-    null,
-  ) as Behavior<CallNotificationWrapper | null>;
-  return sentCallNotification$;
-}
-
-export function createReceivedDecline$(
-  matrixRoom: MatrixRoom,
-): Observable<Parameters<EventTimelineSetHandlerMap[RoomEvent.Timeline]>> {
-  return (
-    fromEvent(matrixRoom, RoomEvent.Timeline) as Observable<
-      Parameters<EventTimelineSetHandlerMap[RoomEvent.Timeline]>
-    >
-  ).pipe(filter(([event]) => event.getType() === EventType.RTCDecline));
-}
-
-export interface Props {
-  scope: ObservableScope;
-  memberships$: Behavior<Epoch<CallMembership[]>>;
-  sentCallNotification$: Observable<CallNotificationWrapper | null>;
-  receivedDecline$: Observable<
-    Parameters<EventTimelineSetHandlerMap[RoomEvent.Timeline]>
-  >;
-  options: { waitForCallPickup?: boolean; autoLeaveWhenOthersLeft?: boolean };
-  localUser: { deviceId: string; userId: string };
-}
-/**
- * @returns {callPickupState$, autoLeave$}
- * `callPickupState$` The current call pickup state of the call.
- *  - "unknown": The client has not yet sent the notification event. We don't know if it will because it first needs to send its own membership.
- *     Then we can conclude if we were the first one to join or not.
- *     This may also be set if we are disconnected.
- *  - "ringing": The call is ringing on other devices in this room (This client should give audiovisual feedback that this is happening).
- *  - "timeout": No-one picked up in the defined time this call should be ringing on others devices.
- *     The call failed. If desired this can be used as a trigger to exit the call.
- *  - "success": Someone else joined. The call is in a normal state. No audiovisual feedback.
- *  - null: EC is configured to never show any waiting for answer state.
- *
- * `autoLeave$` An observable that emits (null) when the call should be automatically left.
- *  - if options.autoLeaveWhenOthersLeft is set to true it emits when all others left.
- *  - if options.waitForCallPickup is set to true it emits if noone picked up the ring or if the ring got declined.
- *  - if options.autoLeaveWhenOthersLeft && options.waitForCallPickup is false it will never emit.
- *
- */
-export function createCallNotificationLifecycle$({
-  scope,
-  memberships$,
-  sentCallNotification$,
-  receivedDecline$,
-  options,
-  localUser,
-}: Props): {
-  callPickupState$: Behavior<CallPickupState>;
-  autoLeave$: Observable<AutoLeaveReason>;
-} {
-  const allOthersLeft$ = memberships$.pipe(
-    pairwise(),
-    filter(
-      ([{ value: prev }, { value: current }]) =>
-        current.every((m) => m.userId === localUser.userId) &&
-        prev.some((m) => m.userId !== localUser.userId),
-    ),
-    map(() => {}),
-  );
-
-  /**
-   * Whether some Matrix user other than ourself is joined to the call.
-   */
-  const someoneElseJoined$ = memberships$.pipe(
-    mapEpoch((ms) => ms.some((m) => m.userId !== localUser.userId)),
-  ) as Behavior<Epoch<boolean>>;
-
-  /**
-   * Whenever the RTC session tells us that it intends to ring the remote
-   * participant's devices, this emits an Observable tracking the current state of
-   * that ringing process.
-   */
-  // This is a behavior since we need to store the latest state for when we subscribe to this after `didSendCallNotification$`
-  // has already emitted but we still need the latest observable with a timeout timer that only gets created on after receiving `notificationEvent`.
-  // A behavior will emit the latest observable with the running timer to new subscribers.
-  // see also: callPickupState$ and in particular the line: `return this.ring$.pipe(mergeAll());` here we otherwise might get an EMPTY observable if
-  // `ring$` would not be a behavior.
-  const remoteRingState$: Behavior<"ringing" | "timeout" | "decline" | null> =
-    scope.behavior(
-      sentCallNotification$.pipe(
-        filter(
-          (newAndLegacyEvents) =>
-            // only care about new events (legacy do not have decline pattern)
-            newAndLegacyEvents?.[0].notification_type === "ring",
-        ),
-        map((e) => e as CallNotificationWrapper),
-        switchMap(([notificationEvent]) => {
-          const lifetimeMs = notificationEvent?.lifetime ?? 0;
-          return concat(
-            lifetimeMs === 0
-              ? // If no lifetime, skip the ring state
-                of(null)
-              : // Ring until lifetime ms have passed
-                timer(lifetimeMs).pipe(
-                  ignoreElements(),
-                  startWith("ringing" as const),
-                ),
-            // The notification lifetime has timed out, meaning ringing has likely
-            // stopped on all receiving clients.
-            of("timeout" as const),
-            // This makes sure we will not drop into the `endWith("decline" as const)` state
-            NEVER,
-          ).pipe(
-            takeUntil(
-              receivedDecline$.pipe(
-                filter(
-                  ([event]) =>
-                    event.getRelation()?.rel_type === "m.reference" &&
-                    event.getRelation()?.event_id ===
-                      notificationEvent.event_id &&
-                    event.getSender() !== localUser.userId &&
-                    callPickupState$.value !== "timeout",
-                ),
-              ),
-            ),
-            endWith("decline" as const),
-          );
-        }),
-      ),
-      null,
-    );
-
-  const callPickupState$ = scope.behavior(
-    options.waitForCallPickup === true
-      ? combineLatest(
-          [someoneElseJoined$, remoteRingState$],
-          (someoneElseJoined, ring) => {
-            if (someoneElseJoined.value === true) {
-              return "success" as const;
-            }
-            // Show the ringing state of the most recent ringing attempt.
-            // as long as we have not yet sent an RTC notification event or noone else joined,
-            // ring will be null -> callPickupState$ = unknown.
-            return ring ?? ("unknown" as const);
-          },
-        )
-      : NEVER,
-    null,
-  );
-
-  const autoLeave$ = merge(
-    options.autoLeaveWhenOthersLeft === true
-      ? allOthersLeft$.pipe(map(() => "allOthersLeft" as const))
-      : NEVER,
-    callPickupState$.pipe(
-      filter((state) => state === "timeout" || state === "decline"),
-    ),
-  );
-  return { autoLeave$, callPickupState$ };
-}

src/state/CallViewModel/CallViewModelTestUtils.ts

@@ -1,193 +0,0 @@
-/*
-Copyright 2025 Element Corp.
-Copyright 2024 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import {
-  ConnectionState,
-  type LocalParticipant,
-  type Participant,
-  ParticipantEvent,
-  type RemoteParticipant,
-  type Room as LivekitRoom,
-} from "livekit-client";
-import { SyncState } from "matrix-js-sdk/lib/sync";
-import { BehaviorSubject, type Observable, map, of } from "rxjs";
-import { onTestFinished, vi } from "vitest";
-import { ClientEvent, type MatrixClient } from "matrix-js-sdk";
-import EventEmitter from "events";
-import * as ComponentsCore from "@livekit/components-core";
-
-import type { CallMembership } from "matrix-js-sdk/lib/matrixrtc";
-import { E2eeType } from "../../e2ee/e2eeType";
-import { type RaisedHandInfo, type ReactionInfo } from "../../reactions";
-import {
-  type CallViewModel,
-  createCallViewModel$,
-  type CallViewModelOptions,
-} from "./CallViewModel";
-import {
-  mockConfig,
-  mockLivekitRoom,
-  mockLocalParticipant,
-  mockMatrixRoom,
-  mockMatrixRoomMember,
-  mockMediaDevices,
-  mockMuteStates,
-  MockRTCSession,
-  testScope,
-} from "../../utils/test";
-import {
-  alice,
-  aliceDoppelganger,
-  bob,
-  bobZeroWidthSpace,
-  daveRTL,
-  daveRTLRtcMember,
-  local,
-  localRtcMember,
-} from "../../utils/test-fixtures";
-import { type Behavior, constant } from "../Behavior";
-import { type ProcessorState } from "../../livekit/TrackProcessorContext";
-import { type MediaDevices } from "../MediaDevices";
-
-mockConfig({
-  livekit: { livekit_service_url: "http://my-default-service-url.com" },
-});
-
-const carol = local;
-
-const dave = mockMatrixRoomMember(daveRTLRtcMember, { rawDisplayName: "Dave" });
-
-const roomMembers = new Map(
-  [alice, aliceDoppelganger, bob, bobZeroWidthSpace, carol, dave, daveRTL].map(
-    (p) => [p.userId, p],
-  ),
-);
-
-export interface CallViewModelInputs {
-  remoteParticipants$: Behavior<RemoteParticipant[]>;
-  rtcMembers$: Behavior<Partial<CallMembership>[]>;
-  livekitConnectionState$: Behavior<ConnectionState>;
-  speaking: Map<Participant, Observable<boolean>>;
-  mediaDevices: MediaDevices;
-  initialSyncState: SyncState;
-}
-
-const localParticipant = mockLocalParticipant({ identity: "" });
-
-export function withCallViewModel(
-  {
-    remoteParticipants$ = constant([]),
-    rtcMembers$ = constant([localRtcMember]),
-    livekitConnectionState$: connectionState$ = constant(
-      ConnectionState.Connected,
-    ),
-    speaking = new Map(),
-    mediaDevices = mockMediaDevices({}),
-    initialSyncState = SyncState.Syncing,
-  }: Partial<CallViewModelInputs> = {},
-  continuation: (
-    vm: CallViewModel,
-    rtcSession: MockRTCSession,
-    subjects: { raisedHands$: BehaviorSubject<Record<string, RaisedHandInfo>> },
-    setSyncState: (value: SyncState) => void,
-  ) => void,
-  options: CallViewModelOptions = {
-    encryptionSystem: { kind: E2eeType.PER_PARTICIPANT },
-    autoLeaveWhenOthersLeft: false,
-  },
-): void {
-  let syncState = initialSyncState;
-  const setSyncState = (value: SyncState): void => {
-    const prev = syncState;
-    syncState = value;
-    room.client.emit(ClientEvent.Sync, value, prev);
-  };
-  const room = mockMatrixRoom({
-    client: new (class extends EventEmitter {
-      public getUserId(): string | undefined {
-        return localRtcMember.userId;
-      }
-
-      public getDeviceId(): string {
-        return localRtcMember.deviceId;
-      }
-
-      public getDomain(): string {
-        return "example.com";
-      }
-
-      public getSyncState(): SyncState {
-        return syncState;
-      }
-    })() as Partial<MatrixClient> as MatrixClient,
-    getMembers: () => Array.from(roomMembers.values()),
-    getMembersWithMembership: () => Array.from(roomMembers.values()),
-  });
-  const rtcSession = new MockRTCSession(room, []).withMemberships(rtcMembers$);
-  const participantsSpy = vi
-    .spyOn(ComponentsCore, "connectedParticipantsObserver")
-    .mockReturnValue(remoteParticipants$);
-  const mediaSpy = vi
-    .spyOn(ComponentsCore, "observeParticipantMedia")
-    .mockImplementation((p) =>
-      of({ participant: p } as Partial<
-        ComponentsCore.ParticipantMedia<LocalParticipant>
-      > as ComponentsCore.ParticipantMedia<LocalParticipant>),
-    );
-  const eventsSpy = vi
-    .spyOn(ComponentsCore, "observeParticipantEvents")
-    .mockImplementation((p, ...eventTypes) => {
-      if (eventTypes.includes(ParticipantEvent.IsSpeakingChanged)) {
-        return (speaking.get(p) ?? of(false)).pipe(
-          map((s): Participant => ({ ...p, isSpeaking: s }) as Participant),
-        );
-      } else {
-        return of(p);
-      }
-    });
-
-  const roomEventSelectorSpy = vi
-    .spyOn(ComponentsCore, "roomEventSelector")
-    .mockImplementation((_room, _eventType) => of());
-  const muteStates = mockMuteStates();
-  const raisedHands$ = new BehaviorSubject<Record<string, RaisedHandInfo>>({});
-  const reactions$ = new BehaviorSubject<Record<string, ReactionInfo>>({});
-
-  const vm = createCallViewModel$(
-    testScope(),
-    rtcSession.asMockedSession(),
-    room,
-    mediaDevices,
-    muteStates,
-    {
-      ...options,
-      livekitRoomFactory: (): LivekitRoom =>
-        mockLivekitRoom({
-          localParticipant,
-          disconnect: async () => Promise.resolve(),
-          setE2EEEnabled: async () => Promise.resolve(),
-        }),
-      connectionState$,
-    },
-    raisedHands$,
-    reactions$,
-    new BehaviorSubject<ProcessorState>({
-      processor: undefined,
-      supported: undefined,
-    }),
-  );
-
-  onTestFinished(() => {
-    participantsSpy.mockRestore();
-    mediaSpy.mockRestore();
-    eventsSpy.mockRestore();
-    roomEventSelectorSpy.mockRestore();
-  });
-
-  continuation(vm, rtcSession, { raisedHands$: raisedHands$ }, setSyncState);
-}

src/state/CallViewModel/localMember/LocalMembership.ts

@@ -1,628 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-IdFentifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import {
-  type LocalTrack,
-  type Participant,
-  ParticipantEvent,
-  type LocalParticipant,
-} from "livekit-client";
-import { observeParticipantEvents } from "@livekit/components-core";
-import {
-  type LivekitTransport,
-  type MatrixRTCSession,
-  MembershipManagerEvent,
-  Status,
-} from "matrix-js-sdk/lib/matrixrtc";
-import { ClientEvent, SyncState, type Room as MatrixRoom } from "matrix-js-sdk";
-import {
-  BehaviorSubject,
-  combineLatest,
-  distinctUntilChanged,
-  fromEvent,
-  map,
-  type Observable,
-  of,
-  scan,
-  startWith,
-  switchMap,
-  tap,
-} from "rxjs";
-import { type Logger } from "matrix-js-sdk/lib/logger";
-
-import { type Behavior } from "../../Behavior";
-import { type IConnectionManager } from "../remoteMembers/ConnectionManager";
-import { ObservableScope } from "../../ObservableScope";
-import { Publisher } from "./Publisher";
-import { type MuteStates } from "../../MuteStates";
-import { type ProcessorState } from "../../../livekit/TrackProcessorContext";
-import { type MediaDevices } from "../../MediaDevices";
-import { and$ } from "../../../utils/observable";
-import { ElementCallError, UnknownCallError } from "../../../utils/errors";
-import {
-  ElementWidgetActions,
-  widget,
-  type WidgetHelpers,
-} from "../../../widget";
-import { areLivekitTransportsEqual } from "../remoteMembers/MatrixLivekitMembers";
-import { getUrlParams } from "../../../UrlParams.ts";
-import { PosthogAnalytics } from "../../../analytics/PosthogAnalytics.ts";
-import { MatrixRTCMode } from "../../../settings/settings.ts";
-import { Config } from "../../../config/Config.ts";
-import {
-  type Connection,
-  type ConnectionState,
-} from "../remoteMembers/Connection.ts";
-
-export enum LivekitState {
-  Uninitialized = "uninitialized",
-  Connecting = "connecting",
-  Connected = "connected",
-  Error = "error",
-  Disconnected = "disconnected",
-  Disconnecting = "disconnecting",
-}
-
-type LocalMemberLivekitState =
-  | { state: LivekitState.Error; error: string }
-  | { state: LivekitState.Connected }
-  | { state: LivekitState.Connecting }
-  | { state: LivekitState.Uninitialized }
-  | { state: LivekitState.Disconnected }
-  | { state: LivekitState.Disconnecting };
-
-export enum MatrixState {
-  Connected = "connected",
-  Disconnected = "disconnected",
-  Connecting = "connecting",
-}
-
-type LocalMemberMatrixState =
-  | { state: MatrixState.Connected }
-  | { state: MatrixState.Connecting }
-  | { state: MatrixState.Disconnected };
-
-export interface LocalMemberConnectionState {
-  livekit$: Behavior<LocalMemberLivekitState>;
-  matrix$: Behavior<LocalMemberMatrixState>;
-}
-
-/*
- * - get well known
- * - get oldest membership
- * - get transport to use
- * - get openId + jwt token
- * - wait for createTrack() call
- *    - create tracks
- * - wait for join() call
- *   - Publisher.publishTracks()
- *   - send join state/sticky event
- */
-interface Props {
-  options: Behavior<EnterRTCSessionOptions>;
-  scope: ObservableScope;
-  mediaDevices: MediaDevices;
-  muteStates: MuteStates;
-  connectionManager: IConnectionManager;
-  matrixRTCSession: MatrixRTCSession;
-  matrixRoom: MatrixRoom;
-  localTransport$: Behavior<LivekitTransport | null>;
-  trackProcessorState$: Behavior<ProcessorState>;
-  widget: WidgetHelpers | null;
-  logger: Logger;
-}
-
-/**
- * This class is responsible for managing the own membership in a room.
- * We want
- *  - a publisher
- *  -
- * @param param0
- * @returns
- *  - publisher: The handle to create tracks and publish them to the room.
- *  - connected$: the current connection state. Including matrix server and livekit server connection. (only considering the livekit server we are using for our own media publication)
- *  - transport$: the transport object the ownMembership$ ended up using.
- *  - connectionState: the current connection state. Including matrix server and livekit server connection.
- *  - sharingScreen$: Whether we are sharing our screen. `undefined` if we cannot share the screen.
- */
-export const createLocalMembership$ = ({
-  scope,
-  options,
-  muteStates,
-  mediaDevices,
-  connectionManager,
-  matrixRTCSession,
-  localTransport$,
-  matrixRoom,
-  trackProcessorState$,
-  widget,
-  logger: parentLogger,
-}: Props): {
-  // publisher: Publisher
-  requestConnect: () => LocalMemberConnectionState;
-  startTracks: () => Behavior<LocalTrack[]>;
-  requestDisconnect: () => Observable<LocalMemberLivekitState> | null;
-  connectionState: LocalMemberConnectionState;
-  sharingScreen$: Behavior<boolean>;
-  /**
-   * Callback to toggle screen sharing. If null, screen sharing is not possible.
-   */
-  toggleScreenSharing: (() => void) | null;
-  participant$: Behavior<LocalParticipant | null>;
-  connection$: Behavior<Connection | null>;
-  // deprecated fields
-  /** @deprecated use state instead*/
-  homeserverConnected$: Behavior<boolean>;
-  /** @deprecated use state instead*/
-  connected$: Behavior<boolean>;
-  // this needs to be discussed
-  /** @deprecated use state instead*/
-  reconnecting$: Behavior<boolean>;
-  // also needs to be disccues
-  /** @deprecated use state instead*/
-  configError$: Behavior<ElementCallError | null>;
-} => {
-  const logger = parentLogger.getChild("[LocalMembership]");
-  logger.debug(`Creating local membership..`);
-  const state = {
-    livekit$: new BehaviorSubject<LocalMemberLivekitState>({
-      state: LivekitState.Uninitialized,
-    }),
-    matrix$: new BehaviorSubject<LocalMemberMatrixState>({
-      state: MatrixState.Disconnected,
-    }),
-  };
-
-  // This should be used in a combineLatest with publisher$ to connect.
-  // to make it possible to call startTracks before the preferredTransport$ has resolved.
-  const trackStartRequested$ = new BehaviorSubject(false);
-
-  // This should be used in a combineLatest with publisher$ to connect.
-  // to make it possible to call startTracks before the preferredTransport$ has resolved.
-  const connectRequested$ = new BehaviorSubject(false);
-
-  // This should be used in a combineLatest with publisher$ to connect.
-  const tracks$ = new BehaviorSubject<LocalTrack[]>([]);
-
-  // Drop Epoch data here since we will not combine this anymore
-  const localConnection$ = scope.behavior(
-    combineLatest([connectionManager.connections$, localTransport$]).pipe(
-      map(([connections, localTransport]) => {
-        if (localTransport === null) {
-          return null;
-        }
-        return (
-          connections.value.find((connection) =>
-            areLivekitTransportsEqual(connection.transport, localTransport),
-          ) ?? null
-        );
-      }),
-      tap((connection) => {
-        logger.info(
-          `Local connection updated: ${connection?.transport?.livekit_service_url}`,
-        );
-      }),
-    ),
-  );
-  /**
-   * Whether we are connected to the MatrixRTC session.
-   */
-  const homeserverConnected$ = scope.behavior(
-    // To consider ourselves connected to MatrixRTC, we check the following:
-    and$(
-      // The client is connected to the sync loop
-      (
-        fromEvent(matrixRoom.client, ClientEvent.Sync) as Observable<
-          [SyncState]
-        >
-      ).pipe(
-        startWith([matrixRoom.client.getSyncState()]),
-        map(([state]) => state === SyncState.Syncing),
-      ),
-      // Room state observed by session says we're connected
-      fromEvent(matrixRTCSession, MembershipManagerEvent.StatusChanged).pipe(
-        startWith(null),
-        map(() => matrixRTCSession.membershipStatus === Status.Connected),
-      ),
-      // Also watch out for warnings that we've likely hit a timeout and our
-      // delayed leave event is being sent (this condition is here because it
-      // provides an earlier warning than the sync loop timeout, and we wouldn't
-      // see the actual leave event until we reconnect to the sync loop)
-      fromEvent(matrixRTCSession, MembershipManagerEvent.ProbablyLeft).pipe(
-        startWith(null),
-        map(() => matrixRTCSession.probablyLeft !== true),
-      ),
-    ).pipe(
-      tap((connected) => {
-        logger.info(`Homeserver connected update: ${connected}`);
-      }),
-    ),
-  );
-
-  // /**
-  //  * Whether we are "fully" connected to the call. Accounts for both the
-  //  * connection to the MatrixRTC session and the LiveKit publish connection.
-  //  */
-  // // TODO use this in combination with the MemberState.
-  const connected$ = scope.behavior(
-    and$(
-      homeserverConnected$,
-      localConnection$.pipe(
-        switchMap((c) =>
-          c
-            ? c.state$.pipe(map((state) => state.state === "ConnectedToLkRoom"))
-            : of(false),
-        ),
-      ),
-    ),
-  );
-
-  const publisher$ = new BehaviorSubject<Publisher | null>(null);
-  localConnection$.subscribe((connection) => {
-    if (connection !== null && publisher$.value === null) {
-      // TODO looks strange to not change publisher if connection changes.
-      publisher$.next(
-        new Publisher(
-          scope,
-          connection,
-          mediaDevices,
-          muteStates,
-          trackProcessorState$,
-        ),
-      );
-    }
-  });
-
-  combineLatest([publisher$, trackStartRequested$]).subscribe(
-    ([publisher, shouldStartTracks]) => {
-      if (publisher && shouldStartTracks) {
-        publisher
-          .createAndSetupTracks()
-          .then((tracks) => {
-            tracks$.next(tracks);
-          })
-          .catch((error) => {
-            logger.error("Error creating tracks:", error);
-          });
-      }
-    },
-  );
-
-  // MATRIX RELATED
-
-  // /**
-  //  * Whether we should tell the user that we're reconnecting to the call.
-  //  */
-  // DISCUSSION is there a better way to do this?
-  // sth that is more deriectly implied from the membership manager of the js sdk. (fromEvent(matrixRTCSession, Reconnecting)) ??? or similar
-  const reconnecting$ = scope.behavior(
-    connected$.pipe(
-      // We are reconnecting if we previously had some successful initial
-      // connection but are now disconnected
-      scan(
-        ({ connectedPreviously }, connectedNow) => ({
-          connectedPreviously: connectedPreviously || connectedNow,
-          reconnecting: connectedPreviously && !connectedNow,
-        }),
-        { connectedPreviously: false, reconnecting: false },
-      ),
-      map(({ reconnecting }) => reconnecting),
-    ),
-  );
-
-  const startTracks = (): Behavior<LocalTrack[]> => {
-    trackStartRequested$.next(true);
-    return tracks$;
-  };
-
-  combineLatest([publisher$, tracks$]).subscribe(([publisher, tracks]) => {
-    if (
-      tracks.length === 0 ||
-      // change this to !== Publishing
-      state.livekit$.value.state !== LivekitState.Uninitialized
-    ) {
-      return;
-    }
-    state.livekit$.next({ state: LivekitState.Connecting });
-    publisher
-      ?.startPublishing()
-      .then(() => {
-        state.livekit$.next({ state: LivekitState.Connected });
-      })
-      .catch((error) => {
-        state.livekit$.next({ state: LivekitState.Error, error });
-      });
-  });
-
-  combineLatest([localTransport$, connectRequested$]).subscribe(
-    // TODO reconnect on options change.
-    ([transport, connectRequested]) => {
-      if (
-        transport === null ||
-        !connectRequested ||
-        state.matrix$.value.state !== MatrixState.Disconnected
-      ) {
-        logger.info(
-          "Not yet connecting because: ",
-          "transport === null:",
-          transport === null,
-          "!connectRequested:",
-          !connectRequested,
-          "state.matrix$.value.state !== MatrixState.Disconnected:",
-          state.matrix$.value.state !== MatrixState.Disconnected,
-        );
-        return;
-      }
-      state.matrix$.next({ state: MatrixState.Connecting });
-      logger.info("Matrix State connecting");
-      enterRTCSession(matrixRTCSession, transport, options.value).catch(
-        (error) => {
-          logger.error(error);
-        },
-      );
-    },
-  );
-
-  const requestConnect = (): LocalMemberConnectionState => {
-    trackStartRequested$.next(true);
-    connectRequested$.next(true);
-
-    return state;
-  };
-
-  const requestDisconnect = (): Behavior<LocalMemberLivekitState> | null => {
-    if (state.livekit$.value.state !== LivekitState.Connected) return null;
-    state.livekit$.next({ state: LivekitState.Disconnecting });
-    combineLatest([publisher$, tracks$], (publisher, tracks) => {
-      publisher
-        ?.stopPublishing()
-        .then(() => {
-          tracks.forEach((track) => track.stop());
-          state.livekit$.next({ state: LivekitState.Disconnected });
-        })
-        .catch((error) => {
-          state.livekit$.next({ state: LivekitState.Error, error });
-        });
-    });
-
-    return state.livekit$;
-  };
-
-  // Pause upstream of all local media tracks when we're disconnected from
-  // MatrixRTC, because it can be an unpleasant surprise for the app to say
-  // 'reconnecting' and yet still be transmitting your media to others.
-  // We use matrixConnected$ rather than reconnecting$ because we want to
-  // pause tracks during the initial joining sequence too until we're sure
-  // that our own media is displayed on screen.
-  combineLatest([localConnection$, homeserverConnected$])
-    .pipe(scope.bind())
-    .subscribe(([connection, connected]) => {
-      if (connection?.state$.value.state !== "ConnectedToLkRoom") return;
-      const publications =
-        connection.livekitRoom.localParticipant.trackPublications.values();
-      if (connected) {
-        for (const p of publications) {
-          if (p.track?.isUpstreamPaused === true) {
-            const kind = p.track.kind;
-            logger.info(
-              `Resuming ${kind} track (MatrixRTC connection present)`,
-            );
-            p.track
-              .resumeUpstream()
-              .catch((e) =>
-                logger.error(
-                  `Failed to resume ${kind} track after MatrixRTC reconnection`,
-                  e,
-                ),
-              );
-          }
-        }
-      } else {
-        for (const p of publications) {
-          if (p.track?.isUpstreamPaused === false) {
-            const kind = p.track.kind;
-            logger.info(
-              `Pausing ${kind} track (uncertain MatrixRTC connection)`,
-            );
-            p.track
-              .pauseUpstream()
-              .catch((e) =>
-                logger.error(
-                  `Failed to pause ${kind} track after entering uncertain MatrixRTC connection`,
-                  e,
-                ),
-              );
-          }
-        }
-      }
-    });
-
-  const configError$ = new BehaviorSubject<ElementCallError | null>(null);
-  // TODO I do not fully understand what this does.
-  // Is it needed?
-  // Is this at the right place?
-  // Can this be simplified?
-  // Start and stop session membership as needed
-  scope.reconcile(localTransport$, async (advertised) => {
-    if (advertised !== null && advertised !== undefined) {
-      try {
-        await enterRTCSession(matrixRTCSession, advertised, options.value);
-        configError$.next(null);
-      } catch (e) {
-        logger.error("Error entering RTC session", e);
-      }
-
-      // Update our member event when our mute state changes.
-      const intentScope = new ObservableScope();
-      intentScope.reconcile(muteStates.video.enabled$, async (videoEnabled) =>
-        matrixRTCSession.updateCallIntent(videoEnabled ? "video" : "audio"),
-      );
-
-      return async (): Promise<void> => {
-        intentScope.end();
-        // Only sends Matrix leave event. The LiveKit session will disconnect
-        // as soon as either the stopConnection$ handler above gets to it or
-        // the view model is destroyed.
-        try {
-          await matrixRTCSession.leaveRoomSession();
-        } catch (e) {
-          logger.error("Error leaving RTC session", e);
-        }
-        try {
-          await widget?.api.transport.send(ElementWidgetActions.HangupCall, {});
-        } catch (e) {
-          logger.error("Failed to send hangup action", e);
-        }
-      };
-    }
-  });
-
-  localConnection$
-    .pipe(
-      distinctUntilChanged(),
-      switchMap((c) =>
-        c === null ? of({ state: "Initialized" } as ConnectionState) : c.state$,
-      ),
-      map((s) => {
-        logger.trace(`Local connection state update: ${s.state}`);
-        if (s.state == "FailedToStart") {
-          return s.error instanceof ElementCallError
-            ? s.error
-            : new UnknownCallError(s.error);
-        } else {
-          return null;
-        }
-      }),
-      scope.bind(),
-    )
-    .subscribe((fatalError) => {
-      configError$.next(fatalError);
-    });
-
-  /**
-   * Whether the user is currently sharing their screen.
-   */
-  const sharingScreen$ = scope.behavior(
-    localConnection$.pipe(
-      switchMap((c) =>
-        c === null
-          ? of(false)
-          : observeSharingScreen$(c.livekitRoom.localParticipant),
-      ),
-    ),
-  );
-
-  const toggleScreenSharing =
-    "getDisplayMedia" in (navigator.mediaDevices ?? {}) &&
-    !getUrlParams().hideScreensharing
-      ? (): void =>
-          // If a connection is ready, toggle screen sharing.
-          // We deliberately do nothing in the case of a null connection because
-          // it looks nice for the call control buttons to all become available
-          // at once upon joining the call, rather than introducing a disabled
-          // state. The user can just click again.
-          // We also allow screen sharing to be toggled even if the connection
-          // is still initializing or publishing tracks, because there's no
-          // technical reason to disallow this. LiveKit will publish if it can.
-          void localConnection$.value?.livekitRoom.localParticipant
-            .setScreenShareEnabled(!sharingScreen$.value, {
-              audio: true,
-              selfBrowserSurface: "include",
-              surfaceSwitching: "include",
-              systemAudio: "include",
-            })
-            .catch(logger.error)
-      : null;
-
-  const participant$ = scope.behavior(
-    localConnection$.pipe(map((c) => c?.livekitRoom.localParticipant ?? null)),
-  );
-  return {
-    startTracks,
-    requestConnect,
-    requestDisconnect,
-    connectionState: state,
-    homeserverConnected$,
-    connected$,
-    reconnecting$,
-    configError$,
-    sharingScreen$,
-    toggleScreenSharing,
-    participant$,
-    connection$: localConnection$,
-  };
-};
-
-export function observeSharingScreen$(p: Participant): Observable<boolean> {
-  return observeParticipantEvents(
-    p,
-    ParticipantEvent.TrackPublished,
-    ParticipantEvent.TrackUnpublished,
-    ParticipantEvent.LocalTrackPublished,
-    ParticipantEvent.LocalTrackUnpublished,
-  ).pipe(map((p) => p.isScreenShareEnabled));
-}
-
-interface EnterRTCSessionOptions {
-  encryptMedia: boolean;
-  matrixRTCMode: MatrixRTCMode;
-}
-
-/**
- * TODO! document this function properly
- * @param rtcSession
- * @param transport
- * @param options
- * @throws If the widget could not send ElementWidgetActions.JoinCall action.
- */
-// Exported for unit testing
-export async function enterRTCSession(
-  rtcSession: MatrixRTCSession,
-  transport: LivekitTransport,
-  { encryptMedia, matrixRTCMode }: EnterRTCSessionOptions,
-): Promise<void> {
-  PosthogAnalytics.instance.eventCallEnded.cacheStartCall(new Date());
-  PosthogAnalytics.instance.eventCallStarted.track(rtcSession.room.roomId);
-
-  // This must be called before we start trying to join the call, as we need to
-  // have started tracking by the time calls start getting created.
-  // groupCallOTelMembership?.onJoinCall();
-
-  const { features, matrix_rtc_session: matrixRtcSessionConfig } = Config.get();
-  const useDeviceSessionMemberEvents =
-    features?.feature_use_device_session_member_events;
-  const { sendNotificationType: notificationType, callIntent } = getUrlParams();
-  const multiSFU = matrixRTCMode !== MatrixRTCMode.Legacy;
-  // Multi-sfu does not need a preferred foci list. just the focus that is actually used.
-  rtcSession.joinRoomSession(
-    multiSFU ? [] : [transport],
-    multiSFU ? transport : undefined,
-    {
-      notificationType,
-      callIntent,
-      manageMediaKeys: encryptMedia,
-      ...(useDeviceSessionMemberEvents !== undefined && {
-        useLegacyMemberEvents: !useDeviceSessionMemberEvents,
-      }),
-      delayedLeaveEventRestartMs:
-        matrixRtcSessionConfig?.delayed_leave_event_restart_ms,
-      delayedLeaveEventDelayMs:
-        matrixRtcSessionConfig?.delayed_leave_event_delay_ms,
-      delayedLeaveEventRestartLocalTimeoutMs:
-        matrixRtcSessionConfig?.delayed_leave_event_restart_local_timeout_ms,
-      networkErrorRetryMs: matrixRtcSessionConfig?.network_error_retry_ms,
-      makeKeyDelay: matrixRtcSessionConfig?.wait_for_key_rotation_ms,
-      membershipEventExpiryMs:
-        matrixRtcSessionConfig?.membership_event_expiry_ms,
-      useExperimentalToDeviceTransport: true,
-      unstableSendStickyEvents: matrixRTCMode === MatrixRTCMode.Matrix_2_0,
-    },
-  );
-  if (widget) {
-    await widget.api.transport.send(ElementWidgetActions.JoinCall, {});
-  }
-}

src/state/CallViewModel/localMember/LocalTransport.ts

@@ -1,179 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-IdFentifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import {
-  type CallMembership,
-  isLivekitTransport,
-  type LivekitTransportConfig,
-  type LivekitTransport,
-  isLivekitTransportConfig,
-} from "matrix-js-sdk/lib/matrixrtc";
-import { type MatrixClient } from "matrix-js-sdk";
-import { combineLatest, distinctUntilChanged, first, from, map } from "rxjs";
-import { logger } from "matrix-js-sdk/lib/logger";
-import { AutoDiscovery } from "matrix-js-sdk/lib/autodiscovery";
-
-import { type Behavior } from "../../Behavior.ts";
-import { type Epoch, type ObservableScope } from "../../ObservableScope.ts";
-import { Config } from "../../../config/Config.ts";
-import { MatrixRTCTransportMissingError } from "../../../utils/errors.ts";
-import { getSFUConfigWithOpenID } from "../../../livekit/openIDSFU.ts";
-import { areLivekitTransportsEqual } from "../remoteMembers/MatrixLivekitMembers.ts";
-
-/*
- * - get well known
- * - get oldest membership
- * - get transport to use
- * - get openId + jwt token
- * - wait for createTrack() call
- *    - create tracks
- * - wait for join() call
- *   - Publisher.publishTracks()
- *   - send join state/sticky event
- */
-interface Props {
-  scope: ObservableScope;
-  memberships$: Behavior<Epoch<CallMembership[]>>;
-  client: MatrixClient;
-  roomId: string;
-  useOldestMember$: Behavior<boolean>;
-}
-
-/**
- * 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.
- */
-export const createLocalTransport$ = ({
-  scope,
-  memberships$,
-  client,
-  roomId,
-  useOldestMember$,
-}: Props): Behavior<LivekitTransport | null> => {
-  /**
-   * The transport over which we should be actively publishing our media.
-   * undefined when not joined.
-   */
-  const oldestMemberTransport$ = scope.behavior(
-    memberships$.pipe(
-      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).
-   */
-  const preferredTransport$: Behavior<LivekitTransport | null> = scope.behavior(
-    from(makeTransport(client, roomId)),
-    null,
-  );
-
-  /**
-   * The transport we should advertise in our MatrixRTC membership.
-   */
-  const advertisedTransport$ = scope.behavior(
-    combineLatest([
-      useOldestMember$,
-      oldestMemberTransport$,
-      preferredTransport$,
-    ]).pipe(
-      map(([useOldestMember, oldestMemberTransport, preferredTransport]) =>
-        useOldestMember
-          ? (oldestMemberTransport ?? preferredTransport)
-          : preferredTransport,
-      ),
-      distinctUntilChanged(areLivekitTransportsEqual),
-    ),
-  );
-  return advertisedTransport$;
-};
-
-const FOCI_WK_KEY = "org.matrix.msc4143.rtc_foci";
-
-async function makeTransportInternal(
-  client: MatrixClient,
-  roomId: string,
-): Promise<LivekitTransport> {
-  logger.log("Searching for a preferred transport");
-  //TODO refactor this to use the jwt service returned alias.
-  const livekitAlias = roomId;
-  // TODO-MULTI-SFU: Either remove this dev tool or make it more official
-  const urlFromStorage =
-    localStorage.getItem("robin-matrixrtc-auth") ??
-    localStorage.getItem("timo-focus-url");
-  if (urlFromStorage !== null) {
-    const transportFromStorage: LivekitTransport = {
-      type: "livekit",
-      livekit_service_url: urlFromStorage,
-      livekit_alias: livekitAlias,
-    };
-    logger.log(
-      "Using LiveKit transport from local storage: ",
-      transportFromStorage,
-    );
-    return transportFromStorage;
-  }
-
-  // Prioritize the .well-known/matrix/client, if available, over the configured SFU
-  const domain = client.getDomain();
-  if (domain) {
-    // we use AutoDiscovery instead of relying on the MatrixClient having already
-    // been fully configured and started
-    const wellKnownFoci = (await AutoDiscovery.getRawClientConfig(domain))?.[
-      FOCI_WK_KEY
-    ];
-    if (Array.isArray(wellKnownFoci)) {
-      const transport: LivekitTransportConfig | undefined = wellKnownFoci.find(
-        (f) => f && isLivekitTransportConfig(f),
-      );
-      if (transport !== undefined) {
-        logger.log("Using LiveKit transport from .well-known: ", transport);
-        return { ...transport, livekit_alias: livekitAlias };
-      }
-    }
-  }
-
-  const urlFromConf = Config.get().livekit?.livekit_service_url;
-  if (urlFromConf) {
-    const transportFromConf: LivekitTransport = {
-      type: "livekit",
-      livekit_service_url: urlFromConf,
-      livekit_alias: livekitAlias,
-    };
-    logger.log("Using LiveKit transport from config: ", transportFromConf);
-    return transportFromConf;
-  }
-
-  throw new MatrixRTCTransportMissingError(domain ?? "");
-}
-
-async function makeTransport(
-  client: MatrixClient,
-  roomId: string,
-): Promise<LivekitTransport> {
-  const transport = await makeTransportInternal(client, roomId);
-  // this will call the jwt/sfu/get endpoint to pre create the livekit room.
-  try {
-    await getSFUConfigWithOpenID(
-      client,
-      transport.livekit_service_url,
-      transport.livekit_alias,
-    );
-  } catch (e) {
-    logger.warn(`Failed to get SFU config for transport: ${e}`);
-  }
-  return transport;
-}

src/state/CallViewModel/localMember/Publisher.ts

@@ -1,325 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-import {
-  LocalVideoTrack,
-  type Room as LivekitRoom,
-  Track,
-  type LocalTrack,
-  type LocalTrackPublication,
-  ConnectionState as LivekitConnectionState,
-} from "livekit-client";
-import {
-  map,
-  NEVER,
-  type Observable,
-  type Subscription,
-  switchMap,
-} from "rxjs";
-import { type Logger } from "matrix-js-sdk/lib/logger";
-
-import type { Behavior } from "../../Behavior.ts";
-import type { MediaDevices, SelectedDevice } from "../../MediaDevices.ts";
-import type { MuteStates } from "../../MuteStates.ts";
-import {
-  type ProcessorState,
-  trackProcessorSync,
-} from "../../../livekit/TrackProcessorContext.tsx";
-import { getUrlParams } from "../../../UrlParams.ts";
-import { observeTrackReference$ } from "../../MediaViewModel.ts";
-import { type Connection } from "../remoteMembers/Connection.ts";
-import { type ObservableScope } from "../../ObservableScope.ts";
-
-/**
- * A wrapper for a Connection object.
- * This wrapper will manage the connection used to publish to the LiveKit room.
- * The Publisher is also responsible for creating the media tracks.
- */
-export class Publisher {
-  public tracks: LocalTrack<Track.Kind>[] = [];
-  /**
-   * 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.
-   * @param e2eeLivekitOptions - The E2EE options to use for the LiveKit room. Use to share the same key provider across connections!.
-   * @param trackerProcessorState$ - The processor state for the video track processor (e.g. background blur).
-   */
-  public constructor(
-    private scope: ObservableScope,
-    private connection: Connection,
-    devices: MediaDevices,
-    private readonly muteStates: MuteStates,
-    trackerProcessorState$: Behavior<ProcessorState>,
-    private logger?: Logger,
-  ) {
-    this.logger?.info("[PublishConnection] Create LiveKit room");
-    const { controlledAudioDevices } = getUrlParams();
-
-    const room = connection.livekitRoom;
-
-    room.setE2EEEnabled(room.options.e2ee !== undefined)?.catch((e: Error) => {
-      this.logger?.error("Failed to set E2EE enabled on room", e);
-    });
-
-    // Setup track processor syncing (blur)
-    this.observeTrackProcessors(scope, room, trackerProcessorState$);
-    // Observe media device changes and update LiveKit active devices accordingly
-    this.observeMediaDevices(scope, devices, controlledAudioDevices);
-
-    this.workaroundRestartAudioInputTrackChrome(devices, scope);
-    this.scope.onEnd(() => {
-      this.logger?.info(
-        "[PublishConnection] Scope ended -> stop publishing all tracks",
-      );
-      void this.stopPublishing();
-    });
-  }
-
-  /**
-   * Start the connection to LiveKit and publish local tracks.
-   *
-   * This will:
-   * wait for the connection to be ready.
-   // * 1. Request an OpenId token `request_token` (allows matrix users to verify their identity with a third-party service.)
-   // * 2. Use this token to request the SFU config to the MatrixRtc authentication service.
-   // * 3. Connect to the configured LiveKit room.
-   // * 4. Create local audio and video tracks based on the current mute states and publish them to the room.
-   *
-   * @throws {InsufficientCapacityError} if the LiveKit server indicates that it has insufficient capacity to accept the connection.
-   * @throws {SFURoomCreationRestrictedError} if the LiveKit server indicates that the room does not exist and cannot be created.
-   */
-  public async createAndSetupTracks(): Promise<LocalTrack[]> {
-    const lkRoom = this.connection.livekitRoom;
-    // Observe mute state changes and update LiveKit microphone/camera states accordingly
-    this.observeMuteStates(this.scope);
-
-    // TODO: This should be an autostarted connection no need to start here. just check the connection state.
-    // TODO: This will fetch the JWT token. Perhaps we could keep it preloaded
-    // instead? This optimization would only be safe for a publish connection,
-    // because we don't want to leak the user's intent to perhaps join a call to
-    // remote servers before they actually commit to it.
-    // const { promise, resolve, reject } = Promise.withResolvers<void>();
-    // const sub = this.connection.state$.subscribe((s) => {
-    //   if (s.state === "FailedToStart") {
-    //     reject(new Error("Disconnected from LiveKit server"));
-    //   } else if (s.state === "ConnectedToLkRoom") {
-    //     resolve();
-    //   }
-    // });
-    // try {
-    //   await promise;
-    // } catch (e) {
-    //   throw e;
-    // } finally {
-    //   sub.unsubscribe();
-    // }
-    // TODO-MULTI-SFU: Prepublish a microphone track
-    const audio = this.muteStates.audio.enabled$.value;
-    const video = this.muteStates.video.enabled$.value;
-    // createTracks throws if called with audio=false and video=false
-    if (audio || video) {
-      // TODO this can still throw errors? It will also prompt for permissions if not already granted
-      this.tracks =
-        (await lkRoom.localParticipant
-          .createTracks({
-            audio,
-            video,
-          })
-          .catch((error) => {
-            this.logger?.error("Failed to create tracks", error);
-          })) ?? [];
-    }
-    return this.tracks;
-  }
-
-  public async startPublishing(): Promise<LocalTrack[]> {
-    const lkRoom = this.connection.livekitRoom;
-    const { promise, resolve, reject } = Promise.withResolvers<void>();
-    const sub = this.connection.state$.subscribe((s) => {
-      switch (s.state) {
-        case "ConnectedToLkRoom":
-          resolve();
-          break;
-        case "FailedToStart":
-          reject(new Error("Failed to connect to LiveKit server"));
-          break;
-        default:
-          this.logger?.info("waiting for connection: ", s.state);
-      }
-    });
-    try {
-      await promise;
-    } catch (e) {
-      throw e;
-    } finally {
-      sub.unsubscribe();
-    }
-    for (const track of this.tracks) {
-      // TODO: handle errors? Needs the signaling connection to be up, but it has some retries internally
-      // with a timeout.
-      await lkRoom.localParticipant.publishTrack(track).catch((error) => {
-        this.logger?.error("Failed to publish track", error);
-      });
-
-      // TODO: check if the connection is still active? and break the loop if not?
-    }
-    return this.tracks;
-  }
-
-  public async stopPublishing(): Promise<void> {
-    // TODO-MULTI-SFU: Move these calls back to ObservableScope.onEnd once scope
-    // actually has the right lifetime
-    this.muteStates.audio.unsetHandler();
-    this.muteStates.video.unsetHandler();
-
-    const localParticipant = this.connection.livekitRoom.localParticipant;
-    const tracks: LocalTrack[] = [];
-    const addToTracksIfDefined = (p: LocalTrackPublication): void => {
-      if (p.track !== undefined) tracks.push(p.track);
-    };
-    localParticipant.trackPublications.forEach(addToTracksIfDefined);
-    await localParticipant.unpublishTracks(tracks);
-  }
-
-  /// Private methods
-
-  // Restart the audio input track whenever we detect that the active media
-  // device has changed to refer to a different hardware device. We do this
-  // for the sake of Chrome, which provides a "default" device that is meant
-  // to match the system's default audio input, whatever that may be.
-  // This is special-cased for only audio inputs because we need to dig around
-  // in the LocalParticipant object for the track object and there's not a nice
-  // way to do that generically. There is usually no OS-level default video capture
-  // device anyway, and audio outputs work differently.
-  private workaroundRestartAudioInputTrackChrome(
-    devices: MediaDevices,
-    scope: ObservableScope,
-  ): void {
-    const lkRoom = this.connection.livekitRoom;
-    devices.audioInput.selected$
-      .pipe(
-        switchMap((device) => device?.hardwareDeviceChange$ ?? NEVER),
-        scope.bind(),
-      )
-      .subscribe(() => {
-        if (lkRoom.state != LivekitConnectionState.Connected) return;
-        const activeMicTrack = Array.from(
-          lkRoom.localParticipant.audioTrackPublications.values(),
-        ).find((d) => d.source === Track.Source.Microphone)?.track;
-
-        if (
-          activeMicTrack &&
-          // only restart if the stream is still running: LiveKit will detect
-          // when a track stops & restart appropriately, so this is not our job.
-          // Plus, we need to avoid restarting again if the track is already in
-          // the process of being restarted.
-          activeMicTrack.mediaStreamTrack.readyState !== "ended"
-        ) {
-          // Restart the track, which will cause Livekit to do another
-          // getUserMedia() call with deviceId: default to get the *new* default device.
-          // Note that room.switchActiveDevice() won't work: Livekit will ignore it because
-          // the deviceId hasn't changed (was & still is default).
-          lkRoom.localParticipant
-            .getTrackPublication(Track.Source.Microphone)
-            ?.audioTrack?.restartTrack()
-            .catch((e) => {
-              this.logger?.error(`Failed to restart audio device track`, e);
-            });
-        }
-      });
-  }
-
-  // Observe changes in the selected media devices and update the LiveKit room accordingly.
-  private observeMediaDevices(
-    scope: ObservableScope,
-    devices: MediaDevices,
-    controlledAudioDevices: boolean,
-  ): void {
-    const lkRoom = this.connection.livekitRoom;
-    const syncDevice = (
-      kind: MediaDeviceKind,
-      selected$: Observable<SelectedDevice | undefined>,
-    ): Subscription =>
-      selected$.pipe(scope.bind()).subscribe((device) => {
-        if (lkRoom.state != LivekitConnectionState.Connected) return;
-        // if (this.connectionState$.value !== ConnectionState.Connected) return;
-        this.logger?.info(
-          "[LivekitRoom] syncDevice room.getActiveDevice(kind) !== d.id :",
-          lkRoom.getActiveDevice(kind),
-          " !== ",
-          device?.id,
-        );
-        if (
-          device !== undefined &&
-          lkRoom.getActiveDevice(kind) !== device.id
-        ) {
-          lkRoom
-            .switchActiveDevice(kind, device.id)
-            .catch((e: Error) =>
-              this.logger?.error(
-                `Failed to sync ${kind} device with LiveKit`,
-                e,
-              ),
-            );
-        }
-      });
-
-    syncDevice("audioinput", devices.audioInput.selected$);
-    if (!controlledAudioDevices)
-      syncDevice("audiooutput", devices.audioOutput.selected$);
-    syncDevice("videoinput", devices.videoInput.selected$);
-  }
-
-  /**
-   * Observe changes in the mute states and update the LiveKit room accordingly.
-   * @param scope
-   * @private
-   */
-  private observeMuteStates(scope: ObservableScope): void {
-    const lkRoom = this.connection.livekitRoom;
-    this.muteStates.audio.setHandler(async (desired) => {
-      try {
-        await lkRoom.localParticipant.setMicrophoneEnabled(desired);
-      } catch (e) {
-        this.logger?.error(
-          "Failed to update LiveKit audio input mute state",
-          e,
-        );
-      }
-      return lkRoom.localParticipant.isMicrophoneEnabled;
-    });
-    this.muteStates.video.setHandler(async (desired) => {
-      try {
-        await lkRoom.localParticipant.setCameraEnabled(desired);
-      } catch (e) {
-        this.logger?.error(
-          "Failed to update LiveKit video input mute state",
-          e,
-        );
-      }
-      return lkRoom.localParticipant.isCameraEnabled;
-    });
-  }
-
-  private observeTrackProcessors(
-    scope: ObservableScope,
-    room: LivekitRoom,
-    trackerProcessorState$: Behavior<ProcessorState>,
-  ): void {
-    const track$ = scope.behavior(
-      observeTrackReference$(room.localParticipant, Track.Source.Camera).pipe(
-        map((trackRef) => {
-          const track = trackRef?.publication?.track;
-          return track instanceof LocalVideoTrack ? track : null;
-        }),
-      ),
-      null,
-    );
-    trackProcessorSync(scope, track$, trackerProcessorState$);
-  }
-}

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

@@ -1,599 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-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 MockedObject,
-  onTestFinished,
-  vi,
-} from "vitest";
-import {
-  type LocalParticipant,
-  type RemoteParticipant,
-  type Room as LivekitRoom,
-  RoomEvent,
-  ConnectionState as LivekitConnectionState,
-} from "livekit-client";
-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 { LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
-import {
-  Connection,
-  type ConnectionOpts,
-  type ConnectionState,
-  type PublishingParticipant,
-} from "./Connection.ts";
-import { ObservableScope } from "../../ObservableScope.ts";
-import { type OpenIDClientParts } from "../../../livekit/openIDSFU.ts";
-import { FailToGetOpenIdToken } from "../../../utils/errors.ts";
-
-let testScope: ObservableScope;
-
-let client: MockedObject<OpenIDClientParts>;
-
-let fakeLivekitRoom: MockedObject<LivekitRoom>;
-
-let localParticipantEventEmiter: EventEmitter;
-let fakeLocalParticipant: MockedObject<LocalParticipant>;
-
-let fakeRoomEventEmiter: EventEmitter;
-// let fakeMembershipsFocusMap$: BehaviorSubject<
-//   { membership: CallMembership; transport: LivekitTransport }[]
-// >;
-
-const livekitFocus: LivekitTransport = {
-  livekit_alias: "!roomID:example.org",
-  livekit_service_url: "https://matrix-rtc.example.org/livekit/jwt",
-  type: "livekit",
-};
-
-function setupTest(): void {
-  testScope = new ObservableScope();
-  client = vi.mocked<OpenIDClientParts>({
-    getOpenIdToken: vi.fn().mockResolvedValue({
-      access_token: "rYsmGUEwNjKgJYyeNUkZseJN",
-      token_type: "Bearer",
-      matrix_server_name: "example.org",
-      expires_in: 3600,
-    }),
-    getDeviceId: vi.fn().mockReturnValue("ABCDEF"),
-  } as unknown as OpenIDClientParts);
-
-  localParticipantEventEmiter = new EventEmitter();
-
-  fakeLocalParticipant = vi.mocked<LocalParticipant>({
-    identity: "@me:example.org",
-    isMicrophoneEnabled: vi.fn().mockReturnValue(true),
-    getTrackPublication: vi.fn().mockReturnValue(undefined),
-    on: localParticipantEventEmiter.on.bind(localParticipantEventEmiter),
-    off: localParticipantEventEmiter.off.bind(localParticipantEventEmiter),
-    addListener: localParticipantEventEmiter.addListener.bind(
-      localParticipantEventEmiter,
-    ),
-    removeListener: localParticipantEventEmiter.removeListener.bind(
-      localParticipantEventEmiter,
-    ),
-    removeAllListeners: localParticipantEventEmiter.removeAllListeners.bind(
-      localParticipantEventEmiter,
-    ),
-  } as unknown as LocalParticipant);
-  fakeRoomEventEmiter = new EventEmitter();
-
-  fakeLivekitRoom = vi.mocked<LivekitRoom>({
-    connect: vi.fn(),
-    disconnect: vi.fn(),
-    remoteParticipants: new Map(),
-    localParticipant: fakeLocalParticipant,
-    state: LivekitConnectionState.Disconnected,
-    on: fakeRoomEventEmiter.on.bind(fakeRoomEventEmiter),
-    off: fakeRoomEventEmiter.off.bind(fakeRoomEventEmiter),
-    addListener: fakeRoomEventEmiter.addListener.bind(fakeRoomEventEmiter),
-    removeListener:
-      fakeRoomEventEmiter.removeListener.bind(fakeRoomEventEmiter),
-    removeAllListeners:
-      fakeRoomEventEmiter.removeAllListeners.bind(fakeRoomEventEmiter),
-    setE2EEEnabled: vi.fn().mockResolvedValue(undefined),
-  } as unknown as LivekitRoom);
-}
-
-function setupRemoteConnection(): Connection {
-  const opts: ConnectionOpts = {
-    client: client,
-    transport: livekitFocus,
-    scope: testScope,
-    livekitRoomFactory: () => fakeLivekitRoom,
-  };
-
-  fetchMock.post(`${livekitFocus.livekit_service_url}/sfu/get`, () => {
-    return {
-      status: 200,
-      body: {
-        url: "wss://matrix-rtc.m.localhost/livekit/sfu",
-        jwt: "ATOKEN",
-      },
-    };
-  });
-
-  fakeLivekitRoom.connect.mockResolvedValue(undefined);
-
-  return new Connection(opts, logger);
-}
-
-afterEach(() => {
-  vi.useRealTimers();
-  vi.clearAllMocks();
-  fetchMock.reset();
-});
-
-describe("Start connection states", () => {
-  it("start in initialized state", () => {
-    setupTest();
-
-    const opts: ConnectionOpts = {
-      client: client,
-      transport: livekitFocus,
-      scope: testScope,
-      livekitRoomFactory: () => fakeLivekitRoom,
-    };
-    const connection = new Connection(opts, logger);
-
-    expect(connection.state$.getValue().state).toEqual("Initialized");
-  });
-
-  it("fail to getOpenId token then error state", async () => {
-    setupTest();
-    vi.useFakeTimers();
-
-    const opts: ConnectionOpts = {
-      client: client,
-      transport: livekitFocus,
-      scope: testScope,
-      livekitRoomFactory: () => fakeLivekitRoom,
-    };
-
-    const connection = new Connection(opts, logger);
-
-    const capturedStates: ConnectionState[] = [];
-    const s = connection.state$.subscribe((value) => {
-      capturedStates.push(value);
-    });
-    onTestFinished(() => s.unsubscribe());
-
-    const deferred = Promise.withResolvers<IOpenIDToken>();
-
-    client.getOpenIdToken.mockImplementation(
-      async (): Promise<IOpenIDToken> => {
-        return await deferred.promise;
-      },
-    );
-
-    connection.start().catch(() => {
-      // expected to throw
-    });
-
-    let capturedState = capturedStates.pop();
-    expect(capturedState).toBeDefined();
-    expect(capturedState!.state).toEqual("FetchingConfig");
-
-    deferred.reject(new FailToGetOpenIdToken(new Error("Failed to get token")));
-
-    await vi.runAllTimersAsync();
-
-    capturedState = capturedStates.pop();
-    if (capturedState!.state === "FailedToStart") {
-      expect(capturedState!.error.message).toEqual("Something went wrong");
-      expect(capturedState!.transport.livekit_alias).toEqual(
-        livekitFocus.livekit_alias,
-      );
-    } else {
-      expect.fail(
-        "Expected FailedToStart state but got " + capturedState?.state,
-      );
-    }
-  });
-
-  it("fail to get JWT token and error state", async () => {
-    setupTest();
-    vi.useFakeTimers();
-
-    const opts: ConnectionOpts = {
-      client: client,
-      transport: livekitFocus,
-      scope: testScope,
-      livekitRoomFactory: () => fakeLivekitRoom,
-    };
-
-    const connection = new Connection(opts, logger);
-
-    const capturedStates: ConnectionState[] = [];
-    const s = connection.state$.subscribe((value) => {
-      capturedStates.push(value);
-    });
-    onTestFinished(() => s.unsubscribe());
-
-    const deferredSFU = Promise.withResolvers<void>();
-    // mock the /sfu/get call
-    fetchMock.post(`${livekitFocus.livekit_service_url}/sfu/get`, async () => {
-      await deferredSFU.promise;
-      return {
-        status: 500,
-        body: "Internal Server Error",
-      };
-    });
-
-    connection.start().catch(() => {
-      // expected to throw
-    });
-
-    let capturedState = capturedStates.pop();
-    expect(capturedState).toBeDefined();
-    expect(capturedState?.state).toEqual("FetchingConfig");
-
-    deferredSFU.resolve();
-    await vi.runAllTimersAsync();
-
-    capturedState = capturedStates.pop();
-
-    if (capturedState?.state === "FailedToStart") {
-      expect(capturedState?.error.message).toContain(
-        "SFU Config fetch failed with exception Error",
-      );
-      expect(capturedState?.transport.livekit_alias).toEqual(
-        livekitFocus.livekit_alias,
-      );
-    } else {
-      expect.fail(
-        "Expected FailedToStart state but got " + capturedState?.state,
-      );
-    }
-  });
-
-  it("fail to connect to livekit error state", async () => {
-    setupTest();
-    vi.useFakeTimers();
-
-    const opts: ConnectionOpts = {
-      client: client,
-      transport: livekitFocus,
-      scope: testScope,
-      livekitRoomFactory: () => fakeLivekitRoom,
-    };
-
-    const connection = new Connection(opts, logger);
-
-    const capturedStates: ConnectionState[] = [];
-    const s = connection.state$.subscribe((value) => {
-      capturedStates.push(value);
-    });
-    onTestFinished(() => s.unsubscribe());
-
-    const deferredSFU = Promise.withResolvers<void>();
-    // mock the /sfu/get call
-    fetchMock.post(`${livekitFocus.livekit_service_url}/sfu/get`, () => {
-      return {
-        status: 200,
-        body: {
-          url: "wss://matrix-rtc.m.localhost/livekit/sfu",
-          jwt: "ATOKEN",
-        },
-      };
-    });
-
-    fakeLivekitRoom.connect.mockImplementation(async () => {
-      await deferredSFU.promise;
-      throw new Error("Failed to connect to livekit");
-    });
-
-    connection.start().catch(() => {
-      // expected to throw
-    });
-
-    let capturedState = capturedStates.pop();
-    expect(capturedState).toBeDefined();
-
-    expect(capturedState?.state).toEqual("FetchingConfig");
-
-    deferredSFU.resolve();
-    await vi.runAllTimersAsync();
-
-    capturedState = capturedStates.pop();
-
-    if (capturedState && capturedState?.state === "FailedToStart") {
-      expect(capturedState.error.message).toContain(
-        "Failed to connect to livekit",
-      );
-      expect(capturedState.transport.livekit_alias).toEqual(
-        livekitFocus.livekit_alias,
-      );
-    } else {
-      expect.fail(
-        "Expected FailedToStart state but got " + JSON.stringify(capturedState),
-      );
-    }
-  });
-
-  it("connection states happy path", async () => {
-    vi.useFakeTimers();
-    setupTest();
-
-    const connection = setupRemoteConnection();
-
-    const capturedStates: ConnectionState[] = [];
-    const s = connection.state$.subscribe((value) => {
-      capturedStates.push(value);
-    });
-    onTestFinished(() => s.unsubscribe());
-
-    await connection.start();
-    await vi.runAllTimersAsync();
-
-    const initialState = capturedStates.shift();
-    expect(initialState?.state).toEqual("Initialized");
-    const fetchingState = capturedStates.shift();
-    expect(fetchingState?.state).toEqual("FetchingConfig");
-    const connectingState = capturedStates.shift();
-    expect(connectingState?.state).toEqual("ConnectingToLkRoom");
-    const connectedState = capturedStates.shift();
-    expect(connectedState?.state).toEqual("ConnectedToLkRoom");
-  });
-
-  it("shutting down the scope should stop the connection", async () => {
-    setupTest();
-    vi.useFakeTimers();
-
-    const connection = setupRemoteConnection();
-    await connection.start();
-
-    const stopSpy = vi.spyOn(connection, "stop");
-    testScope.end();
-
-    expect(stopSpy).toHaveBeenCalled();
-    expect(fakeLivekitRoom.disconnect).toHaveBeenCalled();
-  });
-});
-
-function fakeRemoteLivekitParticipant(
-  id: string,
-  publications: number = 1,
-): RemoteParticipant {
-  return {
-    identity: id,
-    getTrackPublications: () => Array(publications),
-  } as unknown as RemoteParticipant;
-}
-
-describe("Publishing participants observations", () => {
-  it("should emit the list of publishing participants", () => {
-    setupTest();
-
-    const connection = setupRemoteConnection();
-
-    const bobIsAPublisher = Promise.withResolvers<void>();
-    const danIsAPublisher = Promise.withResolvers<void>();
-    const observedPublishers: PublishingParticipant[][] = [];
-    const s = connection.remoteParticipantsWithTracks$.subscribe(
-      (publishers) => {
-        observedPublishers.push(publishers);
-        if (publishers.some((p) => p.identity === "@bob:example.org:DEV111")) {
-          bobIsAPublisher.resolve();
-        }
-        if (publishers.some((p) => p.identity === "@dan:example.org:DEV333")) {
-          danIsAPublisher.resolve();
-        }
-      },
-    );
-    onTestFinished(() => s.unsubscribe());
-    // The publishingParticipants$ observable is derived from the current members of the
-    // livekitRoom and the rtc membership in order to publish the members that are publishing
-    // on this connection.
-
-    let participants: RemoteParticipant[] = [
-      fakeRemoteLivekitParticipant("@alice:example.org:DEV000", 0),
-      fakeRemoteLivekitParticipant("@bob:example.org:DEV111", 0),
-      fakeRemoteLivekitParticipant("@carol:example.org:DEV222", 0),
-      fakeRemoteLivekitParticipant("@dan:example.org:DEV333", 0),
-    ];
-
-    // Let's simulate 3 members on the livekitRoom
-    vi.spyOn(fakeLivekitRoom, "remoteParticipants", "get").mockImplementation(
-      () => new Map(participants.map((p) => [p.identity, p])),
-    );
-
-    participants.forEach((p) =>
-      fakeRoomEventEmiter.emit(RoomEvent.ParticipantConnected, p),
-    );
-
-    // At this point there should be no publishers
-    expect(observedPublishers.pop()!.length).toEqual(0);
-
-    participants = [
-      fakeRemoteLivekitParticipant("@alice:example.org:DEV000", 1),
-      fakeRemoteLivekitParticipant("@bob:example.org:DEV111", 1),
-      fakeRemoteLivekitParticipant("@carol:example.org:DEV222", 1),
-      fakeRemoteLivekitParticipant("@dan:example.org:DEV333", 2),
-    ];
-    participants.forEach((p) =>
-      fakeRoomEventEmiter.emit(RoomEvent.ParticipantConnected, p),
-    );
-
-    // At this point there should be no publishers
-    expect(observedPublishers.pop()!.length).toEqual(4);
-  });
-
-  it("should be scoped to parent scope", (): void => {
-    setupTest();
-
-    const connection = setupRemoteConnection();
-
-    let observedPublishers: PublishingParticipant[][] = [];
-    const s = connection.remoteParticipantsWithTracks$.subscribe(
-      (publishers) => {
-        observedPublishers.push(publishers);
-      },
-    );
-    onTestFinished(() => s.unsubscribe());
-
-    let participants: RemoteParticipant[] = [
-      fakeRemoteLivekitParticipant("@bob:example.org:DEV111", 0),
-    ];
-
-    // Let's simulate 3 members on the livekitRoom
-    vi.spyOn(fakeLivekitRoom, "remoteParticipants", "get").mockImplementation(
-      () => new Map(participants.map((p) => [p.identity, p])),
-    );
-
-    for (const participant of participants) {
-      fakeRoomEventEmiter.emit(RoomEvent.ParticipantConnected, participant);
-    }
-
-    // At this point there should be no publishers
-    expect(observedPublishers.pop()!.length).toEqual(0);
-
-    participants = [fakeRemoteLivekitParticipant("@bob:example.org:DEV111", 1)];
-
-    for (const participant of participants) {
-      fakeRoomEventEmiter.emit(RoomEvent.ParticipantConnected, participant);
-    }
-
-    // We should have bob has a publisher now
-    const publishers = observedPublishers.pop();
-    expect(publishers?.length).toEqual(1);
-    expect(publishers?.[0]?.identity).toEqual("@bob:example.org:DEV111");
-
-    // end the parent scope
-    testScope.end();
-    observedPublishers = [];
-
-    // SHOULD NOT emit any more publishers as the scope is ended
-    participants = participants.filter(
-      (p) => p.identity !== "@bob:example.org:DEV111",
-    );
-
-    fakeRoomEventEmiter.emit(
-      RoomEvent.ParticipantDisconnected,
-      fakeRemoteLivekitParticipant("@bob:example.org:DEV111"),
-    );
-
-    expect(observedPublishers.length).toEqual(0);
-  });
-});
-
-//
-// NOT USED ANYMORE ?
-//
-// This setup look like sth for the Publisher. Not a connection.
-
-// describe("PublishConnection", () => {
-//   // let fakeBlurProcessor: ProcessorWrapper<BackgroundOptions>;
-//   let roomFactoryMock: Mock<() => LivekitRoom>;
-//   let muteStates: MockedObject<MuteStates>;
-
-//   function setUpPublishConnection(): void {
-//     setupTest();
-
-//     roomFactoryMock = vi.fn().mockReturnValue(fakeLivekitRoom);
-
-//     muteStates = mockMuteStates();
-
-//     // fakeBlurProcessor = vi.mocked<ProcessorWrapper<BackgroundOptions>>({
-//     //   name: "BackgroundBlur",
-//     //   restart: vi.fn().mockResolvedValue(undefined),
-//     //   setOptions: vi.fn().mockResolvedValue(undefined),
-//     //   getOptions: vi.fn().mockReturnValue({ strength: 0.5 }),
-//     //   isRunning: vi.fn().mockReturnValue(false)
-//     // });
-//   }
-
-// describe("Livekit room creation", () => {
-//   function createSetup(): void {
-//     setUpPublishConnection();
-
-//     const fakeTrackProcessorSubject$ = new BehaviorSubject<ProcessorState>({
-//       supported: true,
-//       processor: undefined,
-//     });
-
-//     const opts: ConnectionOpts = {
-//       client: client,
-//       transport: livekitFocus,
-//       scope: testScope,
-//       livekitRoomFactory: roomFactoryMock,
-//     };
-
-//     const audioInput = {
-//       available$: of(new Map([["mic1", { id: "mic1" }]])),
-//       selected$: new BehaviorSubject({ id: "mic1" }),
-//       select(): void {},
-//     };
-
-//     const videoInput = {
-//       available$: of(new Map([["cam1", { id: "cam1" }]])),
-//       selected$: new BehaviorSubject({ id: "cam1" }),
-//       select(): void {},
-//     };
-
-//     const audioOutput = {
-//       available$: of(new Map([["speaker", { id: "speaker" }]])),
-//       selected$: new BehaviorSubject({ id: "speaker" }),
-//       select(): void {},
-//     };
-
-//     // TODO understand what is wrong with our mocking that requires ts-expect-error
-//     const fakeDevices = mockMediaDevices({
-//       // @ts-expect-error Mocking only
-//       audioInput,
-//       // @ts-expect-error Mocking only
-//       videoInput,
-//       // @ts-expect-error Mocking only
-//       audioOutput,
-//     });
-
-//     new Connection(
-//       opts,
-//       fakeDevices,
-//       muteStates,
-//       undefined,
-//       fakeTrackProcessorSubject$,
-//     );
-//   }
-
-//   it("should create room with proper initial audio and video settings", () => {
-//     createSetup();
-
-//     expect(roomFactoryMock).toHaveBeenCalled();
-
-//     const lastCallArgs =
-//       roomFactoryMock.mock.calls[roomFactoryMock.mock.calls.length - 1];
-
-//     const roomOptions = lastCallArgs.pop() as unknown as RoomOptions;
-//     expect(roomOptions).toBeDefined();
-
-//     expect(roomOptions!.videoCaptureDefaults?.deviceId).toEqual("cam1");
-//     expect(roomOptions!.audioCaptureDefaults?.deviceId).toEqual("mic1");
-//     expect(roomOptions!.audioOutput?.deviceId).toEqual("speaker");
-//   });
-
-//   it("respect controlledAudioDevices", () => {
-//     // TODO: Refactor the code to make it testable.
-//     // The UrlParams module is a singleton has a cache and is very hard to test.
-//     // This breaks other tests as well if not handled properly.
-//     // vi.mock(import("./../UrlParams"), () => {
-//     //   return {
-//     //     getUrlParams: vi.fn().mockReturnValue({
-//     //       controlledAudioDevices: true
-//     //     })
-//     //   };
-//     // });
-//   });
-// });
-// });

src/state/CallViewModel/remoteMembers/Connection.ts

@@ -1,247 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import {
-  connectedParticipantsObserver,
-  connectionStateObserver,
-} from "@livekit/components-core";
-import {
-  ConnectionError,
-  type ConnectionState as LivekitConenctionState,
-  type Room as LivekitRoom,
-  type LocalParticipant,
-  type RemoteParticipant,
-  RoomEvent,
-} from "livekit-client";
-import { type LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
-import { BehaviorSubject, map, type Observable } from "rxjs";
-import { type Logger } from "matrix-js-sdk/lib/logger";
-
-import {
-  getSFUConfigWithOpenID,
-  type OpenIDClientParts,
-  type SFUConfig,
-} from "../../../livekit/openIDSFU.ts";
-import { type Behavior } from "../../Behavior.ts";
-import { type ObservableScope } from "../../ObservableScope.ts";
-import {
-  InsufficientCapacityError,
-  SFURoomCreationRestrictedError,
-} from "../../../utils/errors.ts";
-
-export type PublishingParticipant = LocalParticipant | RemoteParticipant;
-
-export interface ConnectionOpts {
-  /** The media transport to connect to. */
-  transport: LivekitTransport;
-  /** The Matrix client to use for OpenID and SFU config requests. */
-  client: OpenIDClientParts;
-  /** The observable scope to use for this connection. */
-  scope: ObservableScope;
-
-  /** Optional factory to create the LiveKit room, mainly for testing purposes. */
-  livekitRoomFactory: () => LivekitRoom;
-}
-
-export type ConnectionState =
-  | { state: "Initialized" }
-  | { state: "FetchingConfig"; transport: LivekitTransport }
-  | { state: "ConnectingToLkRoom"; transport: LivekitTransport }
-  | { state: "PublishingTracks"; transport: LivekitTransport }
-  | { state: "FailedToStart"; error: Error; transport: LivekitTransport }
-  | {
-      state: "ConnectedToLkRoom";
-      livekitConnectionState$: Observable<LivekitConenctionState>;
-      transport: LivekitTransport;
-    }
-  | { state: "Stopped"; transport: LivekitTransport };
-
-/**
- * A connection to a Matrix RTC LiveKit backend.
- *
- * Expose observables for participants and connection state.
- */
-export class Connection {
-  // Private Behavior
-  private readonly _state$ = new BehaviorSubject<ConnectionState>({
-    state: "Initialized",
-  });
-
-  /**
-   * The current state of the connection to the media transport.
-   */
-  public readonly state$: Behavior<ConnectionState> = this._state$;
-
-  /**
-   * Whether the connection has been stopped.
-   * @see Connection.stop
-   * */
-  protected stopped = false;
-
-  /**
-   * Starts the connection.
-   *
-   * This will:
-   * 1. Request an OpenId token `request_token` (allows matrix users to verify their identity with a third-party service.)
-   * 2. Use this token to request the SFU config to the MatrixRtc authentication service.
-   * 3. Connect to the configured LiveKit room.
-   *
-   * The errors are also represented as a state in the `state$` observable.
-   * It is safe to ignore those errors and handle them accordingly via the `state$` observable.
-   * @throws {InsufficientCapacityError} if the LiveKit server indicates that it has insufficient capacity to accept the connection.
-   * @throws {SFURoomCreationRestrictedError} if the LiveKit server indicates that the room does not exist and cannot be created.
-   */
-  // TODO dont make this throw and instead store a connection error state in this class?
-  // TODO consider an autostart pattern...
-  public async start(): Promise<void> {
-    this.logger.debug("Starting Connection");
-    this.stopped = false;
-    try {
-      this._state$.next({
-        state: "FetchingConfig",
-        transport: this.transport,
-      });
-      const { url, jwt } = await this.getSFUConfigWithOpenID();
-      // If we were stopped while fetching the config, don't proceed to connect
-      if (this.stopped) return;
-
-      this._state$.next({
-        state: "ConnectingToLkRoom",
-        transport: this.transport,
-      });
-      try {
-        await this.livekitRoom.connect(url, jwt);
-      } catch (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
-        // participant limits.
-        // LiveKit Cloud uses 429 for connection limits.
-        // Either way, all these errors can be explained as "insufficient capacity".
-        if (e instanceof ConnectionError) {
-          if (e.status === 503 || e.status === 200 || e.status === 429) {
-            throw new InsufficientCapacityError();
-          }
-          if (e.status === 404) {
-            // error msg is "Could not establish signal connection: requested room does not exist"
-            // The room does not exist. There are two different modes of operation for the SFU:
-            // - the room is created on the fly when connecting (livekit `auto_create` option)
-            // - Only authorized users can create rooms, so the room must exist before connecting (done by the auth jwt service)
-            // In the first case there will not be a 404, so we are in the second case.
-            throw new SFURoomCreationRestrictedError();
-          }
-        }
-        throw e;
-      }
-      // If we were stopped while connecting, don't proceed to update state.
-      if (this.stopped) return;
-
-      this._state$.next({
-        state: "ConnectedToLkRoom",
-        transport: this.transport,
-        livekitConnectionState$: connectionStateObserver(this.livekitRoom),
-      });
-    } catch (error) {
-      this.logger.debug(`Failed to connect to LiveKit room: ${error}`);
-      this._state$.next({
-        state: "FailedToStart",
-        error: error instanceof Error ? error : new Error(`${error}`),
-        transport: this.transport,
-      });
-      throw error;
-    }
-  }
-
-  protected async getSFUConfigWithOpenID(): Promise<SFUConfig> {
-    return await getSFUConfigWithOpenID(
-      this.client,
-      this.transport.livekit_service_url,
-      this.transport.livekit_alias,
-    );
-  }
-
-  /**
-   * Stops the connection.
-   *
-   * This will disconnect from the LiveKit room.
-   * If the connection is already stopped, this is a no-op.
-   */
-  public async stop(): Promise<void> {
-    this.logger.debug(
-      `Stopping connection to ${this.transport.livekit_service_url}`,
-    );
-    if (this.stopped) return;
-    await this.livekitRoom.disconnect();
-    this._state$.next({
-      state: "Stopped",
-      transport: this.transport,
-    });
-    this.stopped = true;
-  }
-
-  /**
-   * An observable of the participants that are publishing on this connection. (Excluding our local participant)
-   * This is derived from `participantsIncludingSubscribers$` and `remoteTransports$`.
-   * It filters the participants to only those that are associated with a membership that claims to publish on this connection.
-   */
-  public readonly remoteParticipantsWithTracks$: Behavior<
-    PublishingParticipant[]
-  >;
-
-  /**
-   * The media transport to connect to.
-   */
-  public readonly transport: LivekitTransport;
-
-  private readonly client: OpenIDClientParts;
-  public readonly livekitRoom: LivekitRoom;
-
-  private readonly logger: Logger;
-
-  /**
-   * Creates a new connection to a matrix RTC LiveKit backend.
-   *
-   * @param opts - Connection options {@link ConnectionOpts}.
-   *
-   * @param logger
-   */
-  public constructor(opts: ConnectionOpts, logger: Logger) {
-    this.logger = logger.getChild("[Connection]");
-    this.logger.info(
-      `[Connection] Creating new connection to ${opts.transport.livekit_service_url} ${opts.transport.livekit_alias}`,
-    );
-    const { transport, client, scope } = opts;
-
-    this.livekitRoom = opts.livekitRoomFactory();
-    this.transport = transport;
-    this.client = client;
-
-    // REMOTE participants with track!!!
-    // this.remoteParticipantsWithTracks$
-    this.remoteParticipantsWithTracks$ = scope.behavior(
-      // only tracks remote participants
-      connectedParticipantsObserver(this.livekitRoom, {
-        additionalRoomEvents: [
-          RoomEvent.TrackPublished,
-          RoomEvent.TrackUnpublished,
-        ],
-      }).pipe(
-        map((participants) => {
-          return participants.filter(
-            (participant) => participant.getTrackPublications().length > 0,
-          );
-        }),
-      ),
-      [],
-    );
-
-    scope.onEnd(() => {
-      this.logger.info(`Connection scope ended, stopping connection`);
-      void this.stop();
-    });
-  }
-}

src/state/CallViewModel/remoteMembers/ConnectionFactory.ts

@@ -1,121 +0,0 @@
-/*
-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.
-*/
-
-import { type LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
-import {
-  type E2EEOptions,
-  Room as LivekitRoom,
-  type RoomOptions,
-  type BaseKeyProvider,
-} from "livekit-client";
-import { type Logger } from "matrix-js-sdk/lib/logger";
-import E2EEWorker from "livekit-client/e2ee-worker?worker";
-
-import { type ObservableScope } from "../../ObservableScope.ts";
-import { Connection } from "./Connection.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";
-import { defaultLiveKitOptions } from "../../../livekit/options.ts";
-
-export interface ConnectionFactory {
-  createConnection(
-    transport: LivekitTransport,
-    scope: ObservableScope,
-    logger: Logger,
-  ): Connection;
-}
-
-export class ECConnectionFactory implements ConnectionFactory {
-  private readonly livekitRoomFactory: () => LivekitRoom;
-
-  /**
-   * Creates a ConnectionFactory for LiveKit connections.
-   *
-   * @param client - The OpenID client parts for authentication, needed to get openID and JWT tokens.
-   * @param devices - Used for video/audio out/in capture options.
-   * @param processorState$ - Effects like background blur (only for publishing connection?)
-   * @param e2eeLivekitOptions - The E2EE options to use for the LiveKit Room.
-   * @param controlledAudioDevices - Option to indicate whether audio output device is controlled externally (native mobile app).
-   * @param livekitRoomFactory - Optional factory function (for testing) to create LivekitRoom instances. If not provided, a default factory is used.
-   */
-  public constructor(
-    private client: OpenIDClientParts,
-    private devices: MediaDevices,
-    private processorState$: Behavior<ProcessorState>,
-    livekitKeyProvider: BaseKeyProvider | undefined,
-    private controlledAudioDevices: boolean,
-    livekitRoomFactory?: () => LivekitRoom,
-  ) {
-    const defaultFactory = (): LivekitRoom =>
-      new LivekitRoom(
-        generateRoomOption(
-          this.devices,
-          this.processorState$.value,
-          livekitKeyProvider && {
-            keyProvider: livekitKeyProvider,
-            // It's important that every room use a separate E2EE worker.
-            // They get confused if given streams from multiple rooms.
-            worker: new E2EEWorker(),
-          },
-          this.controlledAudioDevices,
-        ),
-      );
-    this.livekitRoomFactory = livekitRoomFactory ?? defaultFactory;
-  }
-
-  public createConnection(
-    transport: LivekitTransport,
-    scope: ObservableScope,
-    logger: Logger,
-  ): Connection {
-    return new Connection(
-      {
-        transport,
-        client: this.client,
-        scope: scope,
-        livekitRoomFactory: this.livekitRoomFactory,
-      },
-      logger,
-    );
-  }
-}
-
-/**
- *  Generate the initial LiveKit RoomOptions based on the current media devices and processor state.
- */
-function generateRoomOption(
-  devices: MediaDevices,
-  processorState: ProcessorState,
-  e2eeLivekitOptions: E2EEOptions | undefined,
-  controlledAudioDevices: boolean,
-): RoomOptions {
-  return {
-    ...defaultLiveKitOptions,
-    videoCaptureDefaults: {
-      ...defaultLiveKitOptions.videoCaptureDefaults,
-      deviceId: devices.videoInput.selected$.value?.id,
-      processor: processorState.processor,
-    },
-    audioCaptureDefaults: {
-      ...defaultLiveKitOptions.audioCaptureDefaults,
-      deviceId: devices.audioInput.selected$.value?.id,
-    },
-    audioOutput: {
-      // When using controlled audio devices, we don't want to set the
-      // deviceId here, because it will be set by the native app.
-      // (also the id does not need to match a browser device id)
-      deviceId: controlledAudioDevices
-        ? undefined
-        : devices.audioOutput.selected$.value?.id,
-    },
-    e2ee: e2eeLivekitOptions,
-    // TODO test and consider this:
-    // webAudioMix: true,
-  };
-}

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

@@ -1,332 +0,0 @@
-/*
-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.
-*/
-
-import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
-import { BehaviorSubject } from "rxjs";
-import { type LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
-import { type Participant as LivekitParticipant } from "livekit-client";
-import { logger } from "matrix-js-sdk/lib/logger";
-
-import { Epoch, ObservableScope } from "../../ObservableScope.ts";
-import {
-  createConnectionManager$,
-  type ConnectionManagerData,
-} from "./ConnectionManager.ts";
-import { type ConnectionFactory } from "./ConnectionFactory.ts";
-import { type Connection } from "./Connection.ts";
-import { withTestScheduler } from "../../../utils/test.ts";
-import { areLivekitTransportsEqual } from "./MatrixLivekitMembers.ts";
-import { type Behavior } from "../../Behavior.ts";
-
-// Some test constants
-
-const TRANSPORT_1: LivekitTransport = {
-  type: "livekit",
-  livekit_service_url: "https://lk.example.org",
-  livekit_alias: "!alias:example.org",
-};
-
-const TRANSPORT_2: LivekitTransport = {
-  type: "livekit",
-  livekit_service_url: "https://lk.sample.com",
-  livekit_alias: "!alias:sample.com",
-};
-
-let fakeConnectionFactory: ConnectionFactory;
-let testScope: ObservableScope;
-
-// Can be useful to track all created connections in tests, even the disposed ones
-let allCreatedConnections: Connection[];
-
-beforeEach(() => {
-  testScope = new ObservableScope();
-  allCreatedConnections = [];
-  fakeConnectionFactory = {} as unknown as ConnectionFactory;
-  vi.mocked(fakeConnectionFactory).createConnection = vi
-    .fn()
-    .mockImplementation(
-      (transport: LivekitTransport, scope: ObservableScope) => {
-        const mockConnection = {
-          transport,
-          remoteParticipantsWithTracks$: new BehaviorSubject([]),
-        } as unknown as Connection;
-        vi.mocked(mockConnection).start = vi.fn();
-        vi.mocked(mockConnection).stop = vi.fn();
-        // Tie the connection's lifecycle to the scope to test scope lifecycle management
-        scope.onEnd(() => {
-          void mockConnection.stop();
-        });
-        allCreatedConnections.push(mockConnection);
-        return mockConnection;
-      },
-    );
-});
-
-afterEach(() => {
-  testScope.end();
-});
-
-describe("connections$ stream", () => {
-  test("Should create and start new connections for each transports", () => {
-    withTestScheduler(({ behavior, expectObservable }) => {
-      const { connections$ } = createConnectionManager$({
-        scope: testScope,
-        connectionFactory: fakeConnectionFactory,
-        inputTransports$: behavior("a", {
-          a: new Epoch([TRANSPORT_1, TRANSPORT_2], 0),
-        }),
-        logger: logger,
-      });
-
-      expectObservable(connections$).toBe("a", {
-        a: expect.toSatisfy((e: Epoch<Connection[]>) => {
-          const connections = e.value;
-          expect(connections.length).toBe(2);
-
-          expect(
-            vi.mocked(fakeConnectionFactory).createConnection,
-          ).toHaveBeenCalledTimes(2);
-
-          const conn1 = connections.find((c) =>
-            areLivekitTransportsEqual(c.transport, TRANSPORT_1),
-          );
-          expect(conn1).toBeDefined();
-          expect(conn1!.start).toHaveBeenCalled();
-
-          const conn2 = connections.find((c) =>
-            areLivekitTransportsEqual(c.transport, TRANSPORT_2),
-          );
-          expect(conn2).toBeDefined();
-          expect(conn2!.start).toHaveBeenCalled();
-          return true;
-        }),
-      });
-    });
-  });
-
-  test("Should start connection only once", () => {
-    withTestScheduler(({ behavior, expectObservable }) => {
-      const { connections$ } = createConnectionManager$({
-        scope: testScope,
-        connectionFactory: fakeConnectionFactory,
-        inputTransports$: behavior("abcdef", {
-          a: new Epoch([TRANSPORT_1], 0),
-          b: new Epoch([TRANSPORT_1], 1),
-          c: new Epoch([TRANSPORT_1], 2),
-          d: new Epoch([TRANSPORT_1], 3),
-          e: new Epoch([TRANSPORT_1], 4),
-          f: new Epoch([TRANSPORT_1, TRANSPORT_2], 5),
-        }),
-        logger: logger,
-      });
-
-      expectObservable(connections$).toBe("xxxxxa", {
-        x: expect.anything(),
-        a: expect.toSatisfy((e: Epoch<Connection[]>) => {
-          const connections = e.value;
-
-          expect(connections.length).toBe(2);
-          expect(
-            vi.mocked(fakeConnectionFactory).createConnection,
-          ).toHaveBeenCalledTimes(2);
-
-          const conn2 = connections.find((c) =>
-            areLivekitTransportsEqual(c.transport, TRANSPORT_2),
-          );
-          expect(conn2).toBeDefined();
-
-          const conn1 = connections.find((c) =>
-            areLivekitTransportsEqual(c.transport, TRANSPORT_1),
-          );
-          expect(conn1).toBeDefined();
-          expect(conn1!.start).toHaveBeenCalledOnce();
-
-          return true;
-        }),
-      });
-    });
-  });
-
-  test("Should cleanup connections when not needed anymore", () => {
-    withTestScheduler(({ behavior, expectObservable }) => {
-      const { connections$ } = createConnectionManager$({
-        scope: testScope,
-        connectionFactory: fakeConnectionFactory,
-        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,
-      });
-
-      expectObservable(connections$).toBe("xab", {
-        x: expect.anything(),
-        a: expect.toSatisfy((e: Epoch<Connection[]>) => {
-          const connections = e.value;
-          expect(connections.length).toBe(2);
-          return true;
-        }),
-        b: expect.toSatisfy((e: Epoch<Connection[]>) => {
-          const connections = e.value;
-
-          expect(connections.length).toBe(1);
-          // The second connection should have been stopped has it is no longer needed.
-          const connection2 = allCreatedConnections.find((c) =>
-            areLivekitTransportsEqual(c.transport, TRANSPORT_2),
-          );
-          expect(connection2).toBeDefined();
-          expect(connection2!.stop).toHaveBeenCalled();
-
-          // The first connection should still be active
-          const conn1 = connections[0];
-          expect(conn1.stop).not.toHaveBeenCalledOnce();
-
-          return true;
-        }),
-      });
-    });
-  });
-});
-
-describe("connectionManagerData$ stream", () => {
-  // Used in test to control fake connections' remoteParticipantsWithTracks$ streams
-  let fakePublishingParticipantsStreams: Map<
-    string,
-    Behavior<LivekitParticipant[]>
-  >;
-
-  function keyForTransport(transport: LivekitTransport): string {
-    return `${transport.livekit_service_url}|${transport.livekit_alias}`;
-  }
-
-  beforeEach(() => {
-    fakePublishingParticipantsStreams = new Map();
-
-    function getPublishingParticipantsFor(
-      transport: LivekitTransport,
-    ): Behavior<LivekitParticipant[]> {
-      return (
-        fakePublishingParticipantsStreams.get(keyForTransport(transport)) ??
-        new BehaviorSubject([])
-      );
-    }
-
-    // need a more advanced fake connection factory
-    vi.mocked(fakeConnectionFactory).createConnection = vi
-      .fn()
-      .mockImplementation(
-        (transport: LivekitTransport, scope: ObservableScope) => {
-          const fakePublishingParticipants$ = new BehaviorSubject<
-            LivekitParticipant[]
-          >([]);
-          const mockConnection = {
-            transport,
-            remoteParticipantsWithTracks$:
-              getPublishingParticipantsFor(transport),
-          } as unknown as Connection;
-          vi.mocked(mockConnection).start = vi.fn();
-          vi.mocked(mockConnection).stop = vi.fn();
-          // Tie the connection's lifecycle to the scope to test scope lifecycle management
-          scope.onEnd(() => {
-            void mockConnection.stop();
-          });
-
-          fakePublishingParticipantsStreams.set(
-            keyForTransport(transport),
-            fakePublishingParticipants$,
-          );
-          return mockConnection;
-        },
-      );
-  });
-
-  test("Should report connections with the publishing participants", () => {
-    withTestScheduler(({ expectObservable, schedule, behavior }) => {
-      // Setup the fake participants streams behavior
-      // ==============================
-      fakePublishingParticipantsStreams.set(
-        keyForTransport(TRANSPORT_1),
-        behavior("oa-b", {
-          o: [],
-          a: [{ identity: "user1A" } as LivekitParticipant],
-          b: [
-            { identity: "user1A" } as LivekitParticipant,
-            { identity: "user1B" } as LivekitParticipant,
-          ],
-        }),
-      );
-
-      fakePublishingParticipantsStreams.set(
-        keyForTransport(TRANSPORT_2),
-        behavior("o-a", {
-          o: [],
-          a: [{ identity: "user2A" } as LivekitParticipant],
-        }),
-      );
-      // ==============================
-
-      const { connectionManagerData$ } = createConnectionManager$({
-        scope: testScope,
-        connectionFactory: fakeConnectionFactory,
-        inputTransports$: behavior("a", {
-          a: new Epoch([TRANSPORT_1, TRANSPORT_2], 0),
-        }),
-        logger,
-      });
-
-      expectObservable(connectionManagerData$).toBe("abcd", {
-        a: expect.toSatisfy((e) => {
-          const data: ConnectionManagerData = e.value;
-          expect(data.getConnections().length).toBe(2);
-          expect(data.getParticipantForTransport(TRANSPORT_1).length).toBe(0);
-          expect(data.getParticipantForTransport(TRANSPORT_2).length).toBe(0);
-          return true;
-        }),
-        b: expect.toSatisfy((e) => {
-          const data: ConnectionManagerData = e.value;
-          expect(data.getConnections().length).toBe(2);
-          expect(data.getParticipantForTransport(TRANSPORT_1).length).toBe(1);
-          expect(data.getParticipantForTransport(TRANSPORT_2).length).toBe(0);
-          expect(data.getParticipantForTransport(TRANSPORT_1)[0].identity).toBe(
-            "user1A",
-          );
-          return true;
-        }),
-        c: expect.toSatisfy((e) => {
-          const data: ConnectionManagerData = e.value;
-          expect(data.getConnections().length).toBe(2);
-          expect(data.getParticipantForTransport(TRANSPORT_1).length).toBe(1);
-          expect(data.getParticipantForTransport(TRANSPORT_2).length).toBe(1);
-          expect(data.getParticipantForTransport(TRANSPORT_1)[0].identity).toBe(
-            "user1A",
-          );
-          expect(data.getParticipantForTransport(TRANSPORT_2)[0].identity).toBe(
-            "user2A",
-          );
-          return true;
-        }),
-        d: expect.toSatisfy((e) => {
-          const data: ConnectionManagerData = e.value;
-          expect(data.getConnections().length).toBe(2);
-          expect(data.getParticipantForTransport(TRANSPORT_1).length).toBe(2);
-          expect(data.getParticipantForTransport(TRANSPORT_2).length).toBe(1);
-          expect(data.getParticipantForTransport(TRANSPORT_1)[0].identity).toBe(
-            "user1A",
-          );
-          expect(data.getParticipantForTransport(TRANSPORT_1)[1].identity).toBe(
-            "user1B",
-          );
-          expect(data.getParticipantForTransport(TRANSPORT_2)[0].identity).toBe(
-            "user2A",
-          );
-          return true;
-        }),
-      });
-    });
-  });
-});

src/state/CallViewModel/remoteMembers/ConnectionManager.ts

@@ -1,234 +0,0 @@
-// TODOs:
-// - make ConnectionManager its own actual class
-
-/*
-Copyright 2025 Element Creations Ltd.
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import {
-  type LivekitTransport,
-  type ParticipantId,
-} from "matrix-js-sdk/lib/matrixrtc";
-import { BehaviorSubject, combineLatest, map, of, switchMap, tap } from "rxjs";
-import { type Logger } from "matrix-js-sdk/lib/logger";
-import { type LocalParticipant, type RemoteParticipant } from "livekit-client";
-
-import { type Behavior } from "../../Behavior.ts";
-import { type Connection } from "./Connection.ts";
-import { Epoch, type ObservableScope } from "../../ObservableScope.ts";
-import { generateItemsWithEpoch } from "../../../utils/observable.ts";
-import { areLivekitTransportsEqual } from "./MatrixLivekitMembers.ts";
-import { type ConnectionFactory } from "./ConnectionFactory.ts";
-
-export class ConnectionManagerData {
-  private readonly store: Map<
-    string,
-    [Connection, (LocalParticipant | RemoteParticipant)[]]
-  > = new Map();
-
-  public constructor() {}
-
-  public add(
-    connection: Connection,
-    participants: (LocalParticipant | RemoteParticipant)[],
-  ): void {
-    const key = this.getKey(connection.transport);
-    const existing = this.store.get(key);
-    if (!existing) {
-      this.store.set(key, [connection, participants]);
-    } else {
-      existing[1].push(...participants);
-    }
-  }
-
-  private getKey(transport: LivekitTransport): string {
-    return transport.livekit_service_url + "|" + transport.livekit_alias;
-  }
-
-  public getConnections(): Connection[] {
-    return Array.from(this.store.values()).map(([connection]) => connection);
-  }
-
-  public getConnectionForTransport(
-    transport: LivekitTransport,
-  ): Connection | null {
-    return this.store.get(this.getKey(transport))?.[0] ?? null;
-  }
-
-  public getParticipantForTransport(
-    transport: LivekitTransport,
-  ): (LocalParticipant | RemoteParticipant)[] {
-    const key = transport.livekit_service_url + "|" + transport.livekit_alias;
-    const existing = this.store.get(key);
-    if (existing) {
-      return existing[1];
-    }
-    return [];
-  }
-  /**
-   * Get all connections where the given participant is publishing.
-   * In theory, there could be several connections where the same participant is publishing but with
-   * only well behaving clients a participant should only be publishing on a single connection.
-   * @param participantId
-   */
-  public getConnectionsForParticipant(
-    participantId: ParticipantId,
-  ): Connection[] {
-    const connections: Connection[] = [];
-    for (const [connection, participants] of this.store.values()) {
-      if (participants.some((p) => p.identity === participantId)) {
-        connections.push(connection);
-      }
-    }
-    return connections;
-  }
-}
-interface Props {
-  scope: ObservableScope;
-  connectionFactory: ConnectionFactory;
-  inputTransports$: Behavior<Epoch<LivekitTransport[]>>;
-  logger: Logger;
-}
-// TODO - write test for scopes (do we really need to bind scope)
-export interface IConnectionManager {
-  transports$: Behavior<Epoch<LivekitTransport[]>>;
-  connectionManagerData$: Behavior<Epoch<ConnectionManagerData>>;
-  connections$: Behavior<Epoch<Connection[]>>;
-}
-/**
- * Crete a `ConnectionManager`
- * @param scope the observable scope used by this object.
- * @param connectionFactory used to create new connections.
- * @param _transportsSubscriptions$ A list of Behaviors each containing a LIST of LivekitTransport.
- *   Each of these behaviors can be interpreted as subscribed list of transports.
- *
- *   Using `registerTransports` independent external modules can control what connections
- *   are created by the ConnectionManager.
- *
- *   The connection manager will remove all duplicate transports in each subscibed list.
- *
- *   See `unregisterAllTransports` and `unregisterTransport` for details on how to unsubscribe.
- */
-export function createConnectionManager$({
-  scope,
-  connectionFactory,
-  inputTransports$,
-  logger: parentLogger,
-}: Props): IConnectionManager {
-  const logger = parentLogger.getChild("[ConnectionManager]");
-
-  const running$ = new BehaviorSubject(true);
-  scope.onEnd(() => running$.next(false));
-  // TODO logger: only construct one logger from the client and make it compatible via a EC specific sing
-
-  /**
-   * All transports currently managed by the ConnectionManager.
-   *
-   * This list does not include duplicate transports.
-   *
-   * It is build based on the list of subscribed transports (`transportsSubscriptions$`).
-   * externally this is modified via `registerTransports()`.
-   */
-  const transports$ = scope.behavior(
-    combineLatest([running$, inputTransports$]).pipe(
-      map(([running, transports]) =>
-        transports.mapInner((transport) => (running ? transport : [])),
-      ),
-      map((transports) => transports.mapInner(removeDuplicateTransports)),
-      tap(({ value: transports }) => {
-        logger.trace(
-          `Managing transports: ${transports.map((t) => t.livekit_service_url).join(", ")}`,
-        );
-      }),
-    ),
-  );
-
-  /**
-   * Connections for each transport in use by one or more session members.
-   */
-  const connections$ = scope.behavior(
-    transports$.pipe(
-      generateItemsWithEpoch(
-        function* (transports) {
-          for (const transport of transports)
-            yield {
-              keys: [transport.livekit_service_url, transport.livekit_alias],
-              data: undefined,
-            };
-        },
-        (scope, _data$, serviceUrl, alias) => {
-          logger.debug(`Creating connection to ${serviceUrl} (${alias})`);
-          const connection = connectionFactory.createConnection(
-            {
-              type: "livekit",
-              livekit_service_url: serviceUrl,
-              livekit_alias: alias,
-            },
-            scope,
-            logger,
-          );
-          // Start the connection immediately
-          // Use connection state to track connection progress
-          void connection.start();
-          // TODO subscribe to connection state to retry or log issues?
-          return connection;
-        },
-      ),
-    ),
-  );
-
-  const connectionManagerData$ = scope.behavior(
-    connections$.pipe(
-      switchMap((connections) => {
-        const epoch = connections.epoch;
-
-        // Map the connections to list of {connection, participants}[]
-        const listOfConnectionsWithPublishingParticipants =
-          connections.value.map((connection) => {
-            return connection.remoteParticipantsWithTracks$.pipe(
-              map((participants) => ({
-                connection,
-                participants,
-              })),
-            );
-          });
-
-        // probably not required
-        if (listOfConnectionsWithPublishingParticipants.length === 0) {
-          return of(new Epoch(new ConnectionManagerData(), epoch));
-        }
-
-        // combineLatest the several streams into a single stream with the ConnectionManagerData
-        return combineLatest(listOfConnectionsWithPublishingParticipants).pipe(
-          map(
-            (lists) =>
-              new Epoch(
-                lists.reduce((data, { connection, participants }) => {
-                  data.add(connection, participants);
-                  return data;
-                }, new ConnectionManagerData()),
-                epoch,
-              ),
-          ),
-        );
-      }),
-    ),
-    new Epoch(new ConnectionManagerData()),
-  );
-
-  return { transports$, connectionManagerData$, connections$ };
-}
-
-function removeDuplicateTransports(
-  transports: LivekitTransport[],
-): LivekitTransport[] {
-  return transports.reduce((acc, transport) => {
-    if (!acc.some((t) => areLivekitTransportsEqual(t, transport)))
-      acc.push(transport);
-    return acc;
-  }, [] as LivekitTransport[]);
-}

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

@@ -1,384 +0,0 @@
-/*
-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.
-*/
-
-import { describe, test, expect, beforeEach, afterEach } from "vitest";
-import {
-  type CallMembership,
-  type LivekitTransport,
-} from "matrix-js-sdk/lib/matrixrtc";
-import { getParticipantId } from "matrix-js-sdk/lib/matrixrtc/utils";
-import { combineLatest, map, type Observable } from "rxjs";
-
-import { type IConnectionManager } from "./ConnectionManager.ts";
-import {
-  type MatrixLivekitMember,
-  createMatrixLivekitMembers$,
-} from "./MatrixLivekitMembers.ts";
-import {
-  Epoch,
-  mapEpoch,
-  ObservableScope,
-  trackEpoch,
-} from "../../ObservableScope.ts";
-import { ConnectionManagerData } from "./ConnectionManager.ts";
-import {
-  mockCallMembership,
-  mockRemoteParticipant,
-  withTestScheduler,
-} from "../../../utils/test.ts";
-import { type Connection } from "./Connection.ts";
-
-let testScope: ObservableScope;
-
-const transportA: LivekitTransport = {
-  type: "livekit",
-  livekit_service_url: "https://lk.example.org",
-  livekit_alias: "!alias:example.org",
-};
-
-const transportB: LivekitTransport = {
-  type: "livekit",
-  livekit_service_url: "https://lk.sample.com",
-  livekit_alias: "!alias:sample.com",
-};
-
-const bobMembership = mockCallMembership(
-  "@bob:example.org",
-  "DEV000",
-  transportA,
-);
-const carlMembership = mockCallMembership(
-  "@carl:sample.com",
-  "DEV111",
-  transportB,
-);
-
-beforeEach(() => {
-  testScope = new ObservableScope();
-});
-
-afterEach(() => {
-  testScope.end();
-});
-
-function epochMeWith$<T, U>(
-  source$: Observable<Epoch<U>>,
-  me$: Observable<T>,
-): Observable<Epoch<T>> {
-  return combineLatest([source$, me$]).pipe(
-    map(([ep, cd]) => {
-      return new Epoch(cd, ep.epoch);
-    }),
-  );
-}
-
-test("should signal participant not yet connected to livekit", () => {
-  withTestScheduler(({ behavior, expectObservable }) => {
-    const { memberships$, membershipsWithTransport$ } = fromMemberships$(
-      behavior("a", {
-        a: [bobMembership],
-      }),
-    );
-
-    const connectionManagerData$ = epochMeWith$(
-      memberships$,
-      behavior("a", {
-        a: new ConnectionManagerData(),
-      }),
-    );
-
-    const matrixLivekitMember$ = createMatrixLivekitMembers$({
-      scope: testScope,
-      membershipsWithTransport$: testScope.behavior(membershipsWithTransport$),
-      connectionManager: {
-        connectionManagerData$: connectionManagerData$,
-      } as unknown as IConnectionManager,
-    });
-
-    expectObservable(matrixLivekitMember$.pipe(map((e) => e.value))).toBe("a", {
-      a: expect.toSatisfy((data: MatrixLivekitMember[]) => {
-        expect(data.length).toEqual(1);
-        expectObservable(data[0].membership$).toBe("a", {
-          a: bobMembership,
-        });
-        expectObservable(data[0].participant$).toBe("a", {
-          a: null,
-        });
-        expectObservable(data[0].connection$).toBe("a", {
-          a: null,
-        });
-        return true;
-      }),
-    });
-  });
-});
-
-// Helper to create epoch'ed memberships$ and membershipsWithTransport$ from memberships observable.
-function fromMemberships$(m$: Observable<CallMembership[]>): {
-  memberships$: Observable<Epoch<CallMembership[]>>;
-  membershipsWithTransport$: Observable<
-    Epoch<{ membership: CallMembership; transport?: LivekitTransport }[]>
-  >;
-} {
-  const memberships$ = m$.pipe(trackEpoch());
-  const membershipsWithTransport$ = memberships$.pipe(
-    mapEpoch((members) => {
-      return members.map((m) => {
-        const tr = m.getTransport(m);
-        return {
-          membership: m,
-          transport:
-            tr?.type === "livekit" ? (tr as LivekitTransport) : undefined,
-        };
-      });
-    }),
-  );
-  return {
-    memberships$,
-    membershipsWithTransport$,
-  };
-}
-
-test("should signal participant on a connection that is publishing", () => {
-  withTestScheduler(({ behavior, expectObservable }) => {
-    const bobParticipantId = getParticipantId(
-      bobMembership.userId,
-      bobMembership.deviceId,
-    );
-
-    const { memberships$, membershipsWithTransport$ } = fromMemberships$(
-      behavior("a", {
-        a: [bobMembership],
-      }),
-    );
-
-    const connection = {
-      transport: bobMembership.getTransport(bobMembership),
-    } as unknown as Connection;
-    const dataWithPublisher = new ConnectionManagerData();
-    dataWithPublisher.add(connection, [
-      mockRemoteParticipant({ identity: bobParticipantId }),
-    ]);
-
-    const connectionManagerData$ = epochMeWith$(
-      memberships$,
-      behavior("a", {
-        a: dataWithPublisher,
-      }),
-    );
-
-    const matrixLivekitMember$ = createMatrixLivekitMembers$({
-      scope: testScope,
-      membershipsWithTransport$: testScope.behavior(membershipsWithTransport$),
-      connectionManager: {
-        connectionManagerData$: connectionManagerData$,
-      } as unknown as IConnectionManager,
-    });
-
-    expectObservable(matrixLivekitMember$.pipe(map((e) => e.value))).toBe("a", {
-      a: expect.toSatisfy((data: MatrixLivekitMember[]) => {
-        expect(data.length).toEqual(1);
-        expectObservable(data[0].membership$).toBe("a", {
-          a: bobMembership,
-        });
-        expectObservable(data[0].participant$).toBe("a", {
-          a: expect.toSatisfy((participant) => {
-            expect(participant).toBeDefined();
-            expect(participant!.identity).toEqual(bobParticipantId);
-            return true;
-          }),
-        });
-        expectObservable(data[0].connection$).toBe("a", {
-          a: connection,
-        });
-        return true;
-      }),
-    });
-  });
-});
-
-test("should signal participant on a connection that is not publishing", () => {
-  withTestScheduler(({ behavior, expectObservable }) => {
-    const { memberships$, membershipsWithTransport$ } = fromMemberships$(
-      behavior("a", {
-        a: [bobMembership],
-      }),
-    );
-
-    const connection = {
-      transport: bobMembership.getTransport(bobMembership),
-    } as unknown as Connection;
-    const dataWithPublisher = new ConnectionManagerData();
-    dataWithPublisher.add(connection, []);
-
-    const connectionManagerData$ = epochMeWith$(
-      memberships$,
-      behavior("a", {
-        a: dataWithPublisher,
-      }),
-    );
-
-    const matrixLivekitMember$ = createMatrixLivekitMembers$({
-      scope: testScope,
-      membershipsWithTransport$: testScope.behavior(membershipsWithTransport$),
-      connectionManager: {
-        connectionManagerData$: connectionManagerData$,
-      } as unknown as IConnectionManager,
-    });
-
-    expectObservable(matrixLivekitMember$.pipe(map((e) => e.value))).toBe("a", {
-      a: expect.toSatisfy((data: MatrixLivekitMember[]) => {
-        expect(data.length).toEqual(1);
-        expectObservable(data[0].membership$).toBe("a", {
-          a: bobMembership,
-        });
-        expectObservable(data[0].participant$).toBe("a", {
-          a: null,
-        });
-        expectObservable(data[0].connection$).toBe("a", {
-          a: connection,
-        });
-        return true;
-      }),
-    });
-  });
-});
-
-describe("Publication edge case", () => {
-  test("bob is publishing in several connections", () => {
-    withTestScheduler(({ behavior, expectObservable }) => {
-      const { memberships$, membershipsWithTransport$ } = fromMemberships$(
-        behavior("a", {
-          a: [bobMembership, carlMembership],
-        }),
-      );
-
-      const connectionWithPublisher = new ConnectionManagerData();
-      const bobParticipantId = getParticipantId(
-        bobMembership.userId,
-        bobMembership.deviceId,
-      );
-      const connectionA = {
-        transport: transportA,
-      } as unknown as Connection;
-      const connectionB = {
-        transport: transportB,
-      } as unknown as Connection;
-
-      connectionWithPublisher.add(connectionA, [
-        mockRemoteParticipant({ identity: bobParticipantId }),
-      ]);
-      connectionWithPublisher.add(connectionB, [
-        mockRemoteParticipant({ identity: bobParticipantId }),
-      ]);
-
-      const connectionManagerData$ = epochMeWith$(
-        memberships$,
-        behavior("a", {
-          a: connectionWithPublisher,
-        }),
-      );
-
-      const matrixLivekitMember$ = createMatrixLivekitMembers$({
-        scope: testScope,
-        membershipsWithTransport$: testScope.behavior(
-          membershipsWithTransport$,
-        ),
-        connectionManager: {
-          connectionManagerData$: connectionManagerData$,
-        } as unknown as IConnectionManager,
-      });
-
-      expectObservable(matrixLivekitMember$.pipe(map((e) => e.value))).toBe(
-        "a",
-        {
-          a: expect.toSatisfy((data: MatrixLivekitMember[]) => {
-            expect(data.length).toEqual(2);
-            expectObservable(data[0].membership$).toBe("a", {
-              a: bobMembership,
-            });
-            expectObservable(data[0].connection$).toBe("a", {
-              // The real connection should be from transportA as per the membership
-              a: connectionA,
-            });
-            expectObservable(data[0].participant$).toBe("a", {
-              a: expect.toSatisfy((participant) => {
-                expect(participant).toBeDefined();
-                expect(participant!.identity).toEqual(bobParticipantId);
-                return true;
-              }),
-            });
-            return true;
-          }),
-        },
-      );
-    });
-  });
-
-  test("bob is publishing in the wrong connection", () => {
-    withTestScheduler(({ behavior, expectObservable }) => {
-      const { memberships$, membershipsWithTransport$ } = fromMemberships$(
-        behavior("a", {
-          a: [bobMembership, carlMembership],
-        }),
-      );
-
-      const connectionWithPublisher = new ConnectionManagerData();
-      const bobParticipantId = getParticipantId(
-        bobMembership.userId,
-        bobMembership.deviceId,
-      );
-      const connectionA = { transport: transportA } as unknown as Connection;
-      const connectionB = { transport: transportB } as unknown as Connection;
-
-      // Bob is not publishing on A
-      connectionWithPublisher.add(connectionA, []);
-      // Bob is publishing on B but his membership says A
-      connectionWithPublisher.add(connectionB, [
-        mockRemoteParticipant({ identity: bobParticipantId }),
-      ]);
-
-      const connectionManagerData$ = epochMeWith$(
-        memberships$,
-        behavior("a", {
-          a: connectionWithPublisher,
-        }),
-      );
-
-      const matrixLivekitMember$ = createMatrixLivekitMembers$({
-        scope: testScope,
-        membershipsWithTransport$: testScope.behavior(
-          membershipsWithTransport$,
-        ),
-        connectionManager: {
-          connectionManagerData$: connectionManagerData$,
-        } as unknown as IConnectionManager,
-      });
-
-      expectObservable(matrixLivekitMember$.pipe(map((e) => e.value))).toBe(
-        "a",
-        {
-          a: expect.toSatisfy((data: MatrixLivekitMember[]) => {
-            expect(data.length).toEqual(2);
-            expectObservable(data[0].membership$).toBe("a", {
-              a: bobMembership,
-            });
-            expectObservable(data[0].connection$).toBe("a", {
-              // The real connection should be from transportA as per the membership
-              a: connectionA,
-            });
-            expectObservable(data[0].participant$).toBe("a", {
-              // No participant as Bob is not publishing on his membership transport
-              a: null,
-            });
-            return true;
-          }),
-        },
-      );
-    });
-  });
-});

src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.ts

@@ -1,138 +0,0 @@
-/*
-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.
-*/
-
-import {
-  type LocalParticipant as LocalLivekitParticipant,
-  type RemoteParticipant as RemoteLivekitParticipant,
-} from "livekit-client";
-import {
-  type LivekitTransport,
-  type CallMembership,
-} from "matrix-js-sdk/lib/matrixrtc";
-import { combineLatest, filter, map } from "rxjs";
-import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
-
-import { type Behavior } from "../../Behavior";
-import { type IConnectionManager } from "./ConnectionManager";
-import { Epoch, type ObservableScope } from "../../ObservableScope";
-import { type Connection } from "./Connection";
-import { generateItemsWithEpoch } from "../../../utils/observable";
-
-const logger = rootLogger.getChild("[MatrixLivekitMembers]");
-
-/**
- * Represents a Matrix call member and their associated LiveKit participation.
- * `livekitParticipant` can be undefined if the member is not yet connected to the livekit room
- * or if it has no livekit transport at all.
- */
-export interface MatrixLivekitMember {
-  membership$: Behavior<CallMembership>;
-  participant$: Behavior<
-    LocalLivekitParticipant | RemoteLivekitParticipant | null
-  >;
-  connection$: Behavior<Connection | null>;
-  // participantId: string; We do not want a participantId here since it will be generated by the jwt
-  // TODO decide if we can also drop the userId. Its in the matrix membership anyways.
-  userId: string;
-}
-
-interface Props {
-  scope: ObservableScope;
-  membershipsWithTransport$: Behavior<
-    Epoch<{ membership: CallMembership; transport?: LivekitTransport }[]>
-  >;
-  connectionManager: IConnectionManager;
-}
-/**
- * Combines MatrixRTC and Livekit worlds.
- *
- * It has a small public interface:
- *  - in (via constructor):
- *    - an observable of CallMembership[] to track the call members (The matrix side)
- *    - a `ConnectionManager` for the lk rooms (The livekit side)
- *  - out (via public Observable):
- *    - `remoteMatrixLivekitMember` an observable of MatrixLivekitMember[] to track the remote members and associated livekit data.
- */
-export function createMatrixLivekitMembers$({
-  scope,
-  membershipsWithTransport$,
-  connectionManager,
-}: Props): Behavior<Epoch<MatrixLivekitMember[]>> {
-  /**
-   * Stream of all the call members and their associated livekit data (if available).
-   */
-
-  return scope.behavior(
-    combineLatest([
-      membershipsWithTransport$,
-      connectionManager.connectionManagerData$,
-    ]).pipe(
-      filter((values) =>
-        values.every((value) => value.epoch === values[0].epoch),
-      ),
-      map(
-        ([
-          { value: membershipsWithTransports, epoch },
-          { value: managerData },
-        ]) =>
-          new Epoch([membershipsWithTransports, managerData] as const, epoch),
-      ),
-      generateItemsWithEpoch(
-        // Generator function.
-        // creates an array of `{key, data}[]`
-        // Each change in the keys (new key, missing key) will result in a call to the factory function.
-        function* ([membershipsWithTransports, managerData]) {
-          for (const { membership, transport } of membershipsWithTransports) {
-            // TODO! cannot use membership.membershipID yet, Currently its hardcoded by the jwt service to
-            const participantId = /*membership.membershipID*/ `${membership.userId}:${membership.deviceId}`;
-
-            const participants = transport
-              ? managerData.getParticipantForTransport(transport)
-              : [];
-            const participant =
-              participants.find((p) => p.identity == participantId) ?? null;
-            const connection = transport
-              ? managerData.getConnectionForTransport(transport)
-              : null;
-
-            yield {
-              keys: [participantId, membership.userId],
-              data: { membership, participant, connection },
-            };
-          }
-        },
-        // Each update where the key of the generator array do not change will result in updates to the `data$` observable in the factory.
-        (scope, data$, participantId, userId) => {
-          logger.debug(
-            `Updating data$ for participantId: ${participantId}, userId: ${userId}`,
-          );
-          // will only get called once per `participantId, userId` pair.
-          // updates to data$ and as a result to displayName$ and mxcAvatarUrl$ are more frequent.
-          return {
-            participantId,
-            userId,
-            ...scope.splitBehavior(data$),
-          };
-        },
-      ),
-    ),
-  );
-}
-
-// TODO add back in the callviewmodel pauseWhen(this.pretendToBeDisconnected$)
-
-// TODO add this to the JS-SDK
-export function areLivekitTransportsEqual(
-  t1: LivekitTransport | null,
-  t2: LivekitTransport | null,
-): boolean {
-  if (t1 && t2) return t1.livekit_service_url === t2.livekit_service_url;
-  // In case we have different lk rooms in the same SFU (depends on the livekit authorization service)
-  // It is only needed in case the livekit authorization service is not behaving as expected (or custom implementation)
-  if (!t1 && !t2) return true;
-  return false;
-}

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

@@ -1,615 +0,0 @@
-/*
-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.
-*/
-
-import { afterEach, beforeEach, describe, vi } from "vitest";
-import {
-  type MatrixEvent,
-  type RoomMember,
-  type RoomState,
-  RoomStateEvent,
-} from "matrix-js-sdk";
-import EventEmitter from "events";
-import { it } from "vitest";
-
-import { ObservableScope } from "../../ObservableScope.ts";
-import type { Room as MatrixRoom } from "matrix-js-sdk/lib/models/room";
-import {
-  mockCallMembership,
-  mockMatrixRoomMember,
-  withTestScheduler,
-} from "../../../utils/test.ts";
-import {
-  createMatrixMemberMetadata$,
-  createRoomMembers$,
-} from "./MatrixMemberMetadata.ts";
-let testScope: ObservableScope;
-let mockMatrixRoom: MatrixRoom;
-
-describe("MatrixMemberMetadata", () => {
-  /*
-   * To be populated in the test setup.
-   * Maps userId to a partial/mock RoomMember object.
-   */
-  let fakeMembersMap: Map<string, Partial<RoomMember>>;
-
-  beforeEach(() => {
-    testScope = new ObservableScope();
-    fakeMembersMap = new Map<string, Partial<RoomMember>>();
-
-    const roomEmitter = new EventEmitter();
-    mockMatrixRoom = {
-      on: roomEmitter.on.bind(roomEmitter),
-      off: roomEmitter.off.bind(roomEmitter),
-      emit: roomEmitter.emit.bind(roomEmitter),
-      // addListener: roomEmitter.addListener.bind(roomEmitter),
-      // removeListener: roomEmitter.removeListener.bind(roomEmitter),
-      getMember: vi.fn().mockImplementation((userId: string) => {
-        const member = fakeMembersMap.get(userId);
-        if (member) {
-          return member as RoomMember;
-        }
-        return null;
-      }),
-      getMembers: vi.fn().mockImplementation(() => {
-        const members = Array.from(fakeMembersMap.values());
-        return members;
-      }),
-      getMembersWithMembership: vi.fn().mockImplementation(() => {
-        const members = Array.from(fakeMembersMap.values());
-        return members;
-      }),
-    } as unknown as MatrixRoom;
-  });
-
-  function fakeMemberWith(data: Partial<RoomMember>): void {
-    const userId = data.userId || "@alice:example.com";
-    const member: Partial<RoomMember> = {
-      userId: userId,
-      rawDisplayName: data.rawDisplayName ?? userId,
-      getMxcAvatarUrl:
-        data.getMxcAvatarUrl ||
-        vi.fn().mockImplementation(() => {
-          return `mxc://example.com/${userId}`;
-        }),
-      ...data,
-    } as unknown as RoomMember;
-    fakeMembersMap.set(userId, member);
-  }
-
-  afterEach(() => {
-    fakeMembersMap.clear();
-  });
-
-  describe("displayname", () => {
-    function updateDisplayName(
-      userId: `@${string}:${string}`,
-      newDisplayName: string,
-    ): void {
-      const member = fakeMembersMap.get(userId);
-      if (member) {
-        member.rawDisplayName = newDisplayName;
-        // Emit the event to notify listeners
-        mockMatrixRoom.emit(
-          RoomStateEvent.Members,
-          {} as unknown as MatrixEvent,
-          {} as unknown as RoomState,
-          member as RoomMember,
-        );
-      } else {
-        throw new Error(`No member found with userId: ${userId}`);
-      }
-    }
-
-    // TODO this is a regression, now there the own user is not always in the map. Ask Timo if fine
-    it("should show our own user if present in rtc session and room", () => {
-      withTestScheduler(({ behavior, expectObservable }) => {
-        fakeMemberWith({
-          userId: "@local:example.com",
-          rawDisplayName: "it's a me",
-        });
-        const memberships$ = behavior("a", {
-          a: [mockCallMembership("@local:example.com", "DEVICE1")],
-        });
-        const metadataStore = createMatrixMemberMetadata$(
-          testScope,
-          memberships$,
-          createRoomMembers$(testScope, mockMatrixRoom),
-        );
-        const dn$ =
-          metadataStore.createDisplayNameBehavior$("@local:example.com");
-
-        expectObservable(dn$).toBe("a", {
-          a: "it's a me",
-        });
-        expectObservable(metadataStore.displaynameMap$).toBe("a", {
-          a: new Map<string, string>([["@local:example.com", "it's a me"]]),
-        });
-      });
-    });
-
-    function setUpBasicRoom(): void {
-      fakeMemberWith({
-        userId: "@local:example.com",
-        rawDisplayName: "it's a me",
-      });
-      fakeMemberWith({ userId: "@alice:example.com", rawDisplayName: "Alice" });
-      fakeMemberWith({ userId: "@bob:example.com", rawDisplayName: "Bob" });
-      fakeMemberWith({ userId: "@carl:example.com", rawDisplayName: "Carl" });
-      fakeMemberWith({ userId: "@evil:example.com", rawDisplayName: "Carl" });
-      fakeMemberWith({ userId: "@bob:foo.bar", rawDisplayName: "Bob" });
-      fakeMemberWith({ userId: "@no-name:foo.bar" });
-    }
-
-    it("should get displayName for users", () => {
-      setUpBasicRoom();
-
-      withTestScheduler(({ behavior, expectObservable }) => {
-        const memberships$ = behavior("a", {
-          a: [
-            mockCallMembership("@alice:example.com", "DEVICE1"),
-            mockCallMembership("@bob:example.com", "DEVICE1"),
-          ],
-        });
-        const metadataStore = createMatrixMemberMetadata$(
-          testScope,
-          memberships$,
-          createRoomMembers$(testScope, mockMatrixRoom),
-        );
-        const aliceDispName$ =
-          metadataStore.createDisplayNameBehavior$("@alice:example.com");
-
-        expectObservable(aliceDispName$).toBe("a", {
-          a: "Alice",
-        });
-
-        expectObservable(metadataStore.displaynameMap$).toBe("a", {
-          a: new Map<string, string>([
-            ["@alice:example.com", "Alice"],
-            ["@bob:example.com", "Bob"],
-          ]),
-        });
-      });
-    });
-
-    it("should use userId if no display name", () => {
-      withTestScheduler(({ behavior, expectObservable }) => {
-        setUpBasicRoom();
-
-        const memberships$ = behavior("a", {
-          a: [mockCallMembership("@no-name:foo.bar", "D000")],
-        });
-        const metadataStore = createMatrixMemberMetadata$(
-          testScope,
-          memberships$,
-          createRoomMembers$(testScope, mockMatrixRoom),
-        );
-
-        expectObservable(metadataStore.displaynameMap$).toBe("a", {
-          a: new Map<string, string>([
-            ["@no-name:foo.bar", "@no-name:foo.bar"],
-          ]),
-        });
-      });
-    });
-
-    it("should disambiguate users with same display name", () => {
-      withTestScheduler(({ behavior, expectObservable }) => {
-        setUpBasicRoom();
-
-        const memberships$ = behavior("a", {
-          a: [
-            mockCallMembership("@bob:example.com", "DEVICE1"),
-            mockCallMembership("@bob:example.com", "DEVICE2"),
-            mockCallMembership("@bob:foo.bar", "BOB000"),
-            mockCallMembership("@carl:example.com", "C000"),
-            mockCallMembership("@evil:example.com", "E000"),
-          ],
-        });
-
-        const metadataStore = createMatrixMemberMetadata$(
-          testScope,
-          memberships$,
-          createRoomMembers$(testScope, mockMatrixRoom),
-        );
-
-        expectObservable(metadataStore.displaynameMap$).toBe("a", {
-          a: new Map<string, string>([
-            // ["@local:example.com", "it's a me"],
-            ["@bob:example.com", "Bob (@bob:example.com)"],
-            ["@bob:example.com", "Bob (@bob:example.com)"],
-            ["@bob:foo.bar", "Bob (@bob:foo.bar)"],
-            ["@carl:example.com", "Carl (@carl:example.com)"],
-            ["@evil:example.com", "Carl (@evil:example.com)"],
-          ]),
-        });
-      });
-    });
-
-    it("should start to disambiguate reactivly when needed", () => {
-      withTestScheduler(({ behavior, expectObservable }) => {
-        setUpBasicRoom();
-
-        const memberships$ = behavior("ab", {
-          a: [mockCallMembership("@bob:example.com", "DEVICE1")],
-          b: [
-            mockCallMembership("@bob:example.com", "DEVICE1"),
-            mockCallMembership("@bob:foo.bar", "BOB000"),
-          ],
-        });
-
-        const metadataStore = createMatrixMemberMetadata$(
-          testScope,
-          memberships$,
-          createRoomMembers$(testScope, mockMatrixRoom),
-        );
-
-        expectObservable(metadataStore.displaynameMap$).toBe("ab", {
-          a: new Map<string, string>([["@bob:example.com", "Bob"]]),
-          b: new Map<string, string>([
-            ["@bob:example.com", "Bob (@bob:example.com)"],
-            ["@bob:foo.bar", "Bob (@bob:foo.bar)"],
-          ]),
-        });
-      });
-    });
-
-    it("should keep disambiguated name when other leave", () => {
-      withTestScheduler(({ behavior, expectObservable }) => {
-        setUpBasicRoom();
-
-        const memberships$ = behavior("ab", {
-          a: [
-            mockCallMembership("@bob:example.com", "DEVICE1"),
-            mockCallMembership("@bob:foo.bar", "BOB000"),
-          ],
-          b: [mockCallMembership("@bob:example.com", "DEVICE1")],
-        });
-
-        const metadataStore = createMatrixMemberMetadata$(
-          testScope,
-          memberships$,
-          createRoomMembers$(testScope, mockMatrixRoom),
-        );
-
-        expectObservable(metadataStore.displaynameMap$).toBe("ab", {
-          a: new Map<string, string>([
-            ["@bob:example.com", "Bob (@bob:example.com)"],
-            ["@bob:foo.bar", "Bob (@bob:foo.bar)"],
-          ]),
-          b: new Map<string, string>([
-            ["@bob:example.com", "Bob (@bob:example.com)"],
-          ]),
-        });
-      });
-    });
-
-    it("should disambiguate on name change", () => {
-      withTestScheduler(({ behavior, schedule, expectObservable }) => {
-        setUpBasicRoom();
-
-        const memberships$ = behavior("a", {
-          a: [
-            mockCallMembership("@bob:example.com", "B000"),
-            mockCallMembership("@carl:example.com", "C000"),
-          ],
-        });
-        const metadataStore = createMatrixMemberMetadata$(
-          testScope,
-          memberships$,
-          createRoomMembers$(testScope, mockMatrixRoom),
-        );
-
-        schedule("-a", {
-          a: () => {
-            updateDisplayName("@carl:example.com", "Bob");
-          },
-        });
-
-        expectObservable(metadataStore.displaynameMap$).toBe("ab", {
-          a: new Map<string, string>([
-            ["@bob:example.com", "Bob"],
-            ["@carl:example.com", "Carl"],
-          ]),
-          b: new Map<string, string>([
-            ["@bob:example.com", "Bob (@bob:example.com)"],
-            ["@carl:example.com", "Bob (@carl:example.com)"],
-          ]),
-        });
-      });
-    });
-
-    it("should track individual member id with createDisplayNameBehavior", () => {
-      withTestScheduler(({ behavior, schedule, expectObservable }) => {
-        setUpBasicRoom();
-        const BOB = "@bob:example.com";
-        const CARL = "@carl:example.com";
-        // for this test we build a mock environment that does all possible changes:
-        // - memberships join/leave
-        // - room join/leave
-        // - disambiguate
-        const memberships$ = behavior("ab-d", {
-          a: [mockCallMembership(CARL, "C000")],
-          b: [
-            mockCallMembership(CARL, "C000"),
-            // bob joins
-            mockCallMembership(BOB, "B000"),
-          ],
-          // c carl gets renamed to BOB
-          d: [
-            // carl leaves
-            mockCallMembership(BOB, "B000"),
-          ],
-        });
-        schedule("--a-", {
-          a: () => {
-            // carl renames
-            updateDisplayName(CARL, "Bob");
-          },
-        });
-
-        const metadataStore = createMatrixMemberMetadata$(
-          testScope,
-          memberships$,
-          createRoomMembers$(testScope, mockMatrixRoom),
-        );
-
-        const bob$ = metadataStore.createDisplayNameBehavior$(BOB);
-        const carl$ = metadataStore.createDisplayNameBehavior$(CARL);
-
-        expectObservable(bob$).toBe("abc-", {
-          a: undefined,
-          b: "Bob",
-          c: "Bob (@bob:example.com)",
-          // bob stays disambiguate even though carl left
-          // d: "Bob (@bob:example.com)",
-        });
-
-        expectObservable(carl$).toBe("a-cd", {
-          a: "Carl",
-          // b: "Carl",
-          // carl gets renamed and disambiguate
-          c: "Bob (@carl:example.com)",
-          d: undefined,
-        });
-      });
-    });
-
-    it("should disambiguate users with invisible characters", () => {
-      withTestScheduler(({ behavior, expectObservable }) => {
-        const bobRtcMember = mockCallMembership("@bob:example.org", "BBBB");
-        const bobZeroWidthSpaceRtcMember = mockCallMembership(
-          "@bob2:example.org",
-          "BBBB",
-        );
-        const bob = mockMatrixRoomMember(bobRtcMember, {
-          rawDisplayName: "Bob",
-        });
-        const bobZeroWidthSpace = mockMatrixRoomMember(
-          bobZeroWidthSpaceRtcMember,
-          {
-            rawDisplayName: "Bo\u200bb",
-          },
-        );
-        fakeMemberWith(bob);
-        fakeMemberWith(bobZeroWidthSpace);
-        fakeMemberWith({ userId: "@carol:example.org" });
-        const memberships$ = behavior("ab", {
-          a: [mockCallMembership("@carol:example.org", "1111"), bobRtcMember],
-          b: [
-            mockCallMembership("@carol:example.org", "1111"),
-            bobRtcMember,
-            bobZeroWidthSpaceRtcMember,
-          ],
-        });
-
-        const metadataStore = createMatrixMemberMetadata$(
-          testScope,
-          memberships$,
-          createRoomMembers$(testScope, mockMatrixRoom),
-        );
-
-        const bob$ =
-          metadataStore.createDisplayNameBehavior$("@bob:example.org");
-        const bob2$ =
-          metadataStore.createDisplayNameBehavior$("@bob2:example.org");
-        const carol$ =
-          metadataStore.createDisplayNameBehavior$("@carol:example.org");
-        expectObservable(bob$).toBe("ab", {
-          a: "Bob",
-          b: "Bob (@bob:example.org)",
-        });
-        expectObservable(bob2$).toBe("ab", {
-          a: undefined,
-          b: "Bo\u200bb (@bob2:example.org)",
-        });
-        expectObservable(carol$).toBe("a-", {
-          a: "@carol:example.org",
-        });
-
-        expectObservable(metadataStore.displaynameMap$).toBe("ab", {
-          // Carol has no displayname - So userId is used.
-          a: new Map([
-            ["@carol:example.org", "@carol:example.org"],
-            ["@bob:example.org", "Bob"],
-          ]),
-          // Other Bob joins, and should handle zero width hacks.
-          b: new Map([
-            ["@carol:example.org", "@carol:example.org"],
-            [bobRtcMember.userId, `Bob (@bob:example.org)`],
-            [
-              bobZeroWidthSpace.userId,
-              `${bobZeroWidthSpace.rawDisplayName} (${bobZeroWidthSpace.userId})`,
-            ],
-          ]),
-        });
-      });
-    });
-
-    it("should strip RTL characters from displayname", () => {
-      withTestScheduler(({ behavior, expectObservable }) => {
-        const daveRtcMember = mockCallMembership("@dave:example.org", "DDDD");
-        const daveRTLRtcMember = mockCallMembership(
-          "@dave2:example.org",
-          "DDDD",
-        );
-        const dave = mockMatrixRoomMember(daveRtcMember, {
-          rawDisplayName: "Dave",
-        });
-        const daveRTL = mockMatrixRoomMember(daveRTLRtcMember, {
-          rawDisplayName: "\u202eevaD",
-        });
-
-        fakeMemberWith({ userId: "@carol:example.org" });
-        fakeMemberWith(daveRTL);
-        fakeMemberWith(dave);
-        const memberships$ = behavior("ab", {
-          a: [mockCallMembership("@carol:example.org", "DDDD")],
-          b: [
-            mockCallMembership("@carol:example.org", "DDDD"),
-            daveRtcMember,
-            daveRTLRtcMember,
-          ],
-        });
-
-        const metadataStore = createMatrixMemberMetadata$(
-          testScope,
-          memberships$,
-          createRoomMembers$(testScope, mockMatrixRoom),
-        );
-
-        expectObservable(metadataStore.displaynameMap$).toBe("ab", {
-          // Carol has no displayname - So userId is used.
-          a: new Map([["@carol:example.org", "@carol:example.org"]]),
-          // Both Dave's join. Since after stripping
-          b: new Map([
-            ["@carol:example.org", "@carol:example.org"],
-            // Not disambiguated
-            ["@dave:example.org", "Dave"],
-            // This one is, since it's using RTL.
-            ["@dave2:example.org", "evaD (@dave2:example.org)"],
-          ]),
-        });
-      });
-    });
-  });
-
-  describe("avatarUrl", () => {
-    function updateAvatarUrl(
-      userId: `@${string}:${string}`,
-      avatarUrl: string,
-    ): void {
-      const member = fakeMembersMap.get(userId);
-      if (member) {
-        member.getMxcAvatarUrl = vi.fn().mockReturnValue(avatarUrl);
-        // Emit the event to notify listeners
-        mockMatrixRoom.emit(
-          RoomStateEvent.Members,
-          {} as unknown as MatrixEvent,
-          {} as unknown as RoomState,
-          member as RoomMember,
-        );
-      } else {
-        throw new Error(`No member found with userId: ${userId}`);
-      }
-    }
-
-    // TODO this is a regression, now there the own user is not always in the map. Ask Timo if fine
-    it("should use avatar url from room members", () => {
-      withTestScheduler(({ behavior, expectObservable }) => {
-        fakeMemberWith({
-          userId: "@local:example.com",
-        });
-        fakeMemberWith({
-          userId: "@alice:example.com",
-          getMxcAvatarUrl: vi.fn().mockReturnValue("mxc://custom.url/avatar"),
-        });
-        const memberships$ = behavior("a", {
-          a: [
-            mockCallMembership("@local:example.com", "DEVICE1"),
-            mockCallMembership("@alice:example.com", "DEVICE1"),
-          ],
-        });
-        const metadataStore = createMatrixMemberMetadata$(
-          testScope,
-          memberships$,
-          createRoomMembers$(testScope, mockMatrixRoom),
-        );
-        const local$ =
-          metadataStore.createAvatarUrlBehavior$("@local:example.com");
-
-        const alice$ =
-          metadataStore.createAvatarUrlBehavior$("@alice:example.com");
-
-        expectObservable(local$).toBe("a", {
-          a: "mxc://example.com/@local:example.com",
-        });
-        expectObservable(alice$).toBe("a", {
-          a: "mxc://custom.url/avatar",
-        });
-        expectObservable(metadataStore.avatarMap$).toBe("a", {
-          a: new Map<string, string>([
-            ["@local:example.com", "mxc://example.com/@local:example.com"],
-            ["@alice:example.com", "mxc://custom.url/avatar"],
-          ]),
-        });
-      });
-    });
-
-    it("should update on avatar change and user join/leave", () => {
-      withTestScheduler(({ behavior, schedule, expectObservable }) => {
-        fakeMemberWith({ userId: "@carl:example.com" });
-        fakeMemberWith({ userId: "@bob:example.com" });
-        const memberships$ = behavior("ab-d", {
-          a: [mockCallMembership("@bob:example.com", "B000")],
-          b: [
-            mockCallMembership("@bob:example.com", "B000"),
-            mockCallMembership("@carl:example.com", "C000"),
-          ],
-          d: [mockCallMembership("@carl:example.com", "C000")],
-        });
-
-        const metadataStore = createMatrixMemberMetadata$(
-          testScope,
-          memberships$,
-          createRoomMembers$(testScope, mockMatrixRoom),
-        );
-
-        schedule("--c-", {
-          c: () => {
-            updateAvatarUrl(
-              "@carl:example.com",
-              "mxc://updated.me/updatedAvatar",
-            );
-          },
-        });
-
-        const bob$ = metadataStore.createAvatarUrlBehavior$("@bob:example.com");
-        const carl$ =
-          metadataStore.createAvatarUrlBehavior$("@carl:example.com");
-        expectObservable(bob$).toBe("a---", {
-          a: "mxc://example.com/@bob:example.com",
-        });
-        expectObservable(carl$).toBe("a-c-", {
-          a: "mxc://example.com/@carl:example.com",
-
-          c: "mxc://updated.me/updatedAvatar",
-        });
-        expectObservable(metadataStore.avatarMap$).toBe("a-c-", {
-          a: new Map<string, string>([
-            ["@bob:example.com", "mxc://example.com/@bob:example.com"],
-            ["@carl:example.com", "mxc://example.com/@carl:example.com"],
-          ]),
-          // expect an update once we update the avatar URL
-          c: new Map<string, string>([
-            ["@bob:example.com", "mxc://example.com/@bob:example.com"],
-            ["@carl:example.com", "mxc://updated.me/updatedAvatar"],
-          ]),
-        });
-      });
-    });
-  });
-});

src/state/CallViewModel/remoteMembers/MatrixMemberMetadata.ts

@@ -1,180 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { type RoomMember, RoomStateEvent } from "matrix-js-sdk";
-import { combineLatest, fromEvent, map } from "rxjs";
-import { type CallMembership } from "matrix-js-sdk/lib/matrixrtc";
-import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
-import {
-  KnownMembership,
-  type Room as MatrixRoom,
-} from "matrix-js-sdk/lib/matrix";
-// eslint-disable-next-line rxjs/no-internal
-
-import { type ObservableScope } from "../../ObservableScope";
-import {
-  calculateDisplayName,
-  shouldDisambiguate,
-} from "../../../utils/displayname";
-import { type Behavior } from "../../Behavior";
-
-const logger = rootLogger.getChild("[MatrixMemberMetadata]");
-
-export type RoomMemberMap = Map<
-  string,
-  Pick<RoomMember, "userId" | "getMxcAvatarUrl" | "rawDisplayName">
->;
-export function roomToMembersMap(matrixRoom: MatrixRoom): RoomMemberMap {
-  const members = matrixRoom
-    .getMembersWithMembership(KnownMembership.Join)
-    .concat(matrixRoom.getMembersWithMembership(KnownMembership.Invite));
-  return members.reduce((acc, member) => {
-    acc.set(member.userId, {
-      userId: member.userId,
-      getMxcAvatarUrl: member.getMxcAvatarUrl.bind(member),
-      rawDisplayName: member.rawDisplayName,
-    });
-    return acc;
-  }, new Map());
-}
-
-export function createRoomMembers$(
-  scope: ObservableScope,
-  matrixRoom: MatrixRoom,
-): Behavior<RoomMemberMap> {
-  return scope.behavior(
-    fromEvent(matrixRoom, RoomStateEvent.Members).pipe(
-      map(() => roomToMembersMap(matrixRoom)),
-    ),
-    roomToMembersMap(matrixRoom),
-  );
-}
-
-/**
- * creates the member that this DM is with in case it is a DM (two members) otherwise null
- */
-export function createDMMember$(
-  scope: ObservableScope,
-  roomMembers$: Behavior<RoomMemberMap>,
-  matrixRoom: MatrixRoom,
-): Behavior<Pick<
-  RoomMember,
-  "userId" | "getMxcAvatarUrl" | "rawDisplayName"
-> | null> {
-  // We cannot use the normal direct check from matrix since we do not have access to the account data.
-  // use primitive member count === 2 check instead.
-  return scope.behavior(
-    roomMembers$.pipe(
-      map((membersMap) => {
-        // primitive appraoch do to no access to account data.
-        const isDM = membersMap.size === 2;
-        if (!isDM) return null;
-        return matrixRoom.getMember(matrixRoom.guessDMUserId());
-      }),
-    ),
-  );
-}
-
-/**
- * Displayname for each member of the call. This will disambiguate
- * any displayname that clashes with another member. Only members
- * joined to the call are considered here.
- *
- * @returns Map<userId, displayname> uses the Matrix user ID as the key.
- */
-// don't do this work more times than we need to. This is achieved by converting to a behavior:
-export const memberDisplaynames$ = (
-  scope: ObservableScope,
-  memberships$: Behavior<Pick<CallMembership, "userId">[]>,
-  roomMembers$: Behavior<RoomMemberMap>,
-): Behavior<Map<string, string>> => {
-  // This map tracks userIds that at some point needed disambiguation.
-  // This is a memory leak bound to the number of participants.
-  // A call application will always increase the memory if there have been more members in a call.
-  // Its capped by room member participants.
-  const shouldDisambiguateTrackerMap = new Set<string>();
-  return scope.behavior(
-    combineLatest([
-      // Handle call membership changes
-      memberships$,
-      // Additionally handle display name changes (implicitly reacting to them)
-      roomMembers$,
-      // TODO: do we need: pauseWhen(this.pretendToBeDisconnected$),
-    ]).pipe(
-      map(([memberships, roomMembers]) => {
-        const displaynameMap = new Map<string, string>();
-        // We only consider RTC members for disambiguation as they are the only visible members.
-        for (const rtcMember of memberships) {
-          const member = roomMembers.get(rtcMember.userId);
-          if (!member) {
-            logger.error(`Could not find member for user ${rtcMember.userId}`);
-            continue;
-          }
-          const disambiguateComputed = shouldDisambiguate(
-            member,
-            memberships,
-            roomMembers,
-          );
-
-          const disambiguate =
-            shouldDisambiguateTrackerMap.has(rtcMember.userId) ||
-            disambiguateComputed;
-          if (disambiguate) shouldDisambiguateTrackerMap.add(rtcMember.userId);
-          displaynameMap.set(
-            rtcMember.userId,
-            calculateDisplayName(member, disambiguate),
-          );
-        }
-        return displaynameMap;
-      }),
-    ),
-  );
-};
-
-export const createMatrixMemberMetadata$ = (
-  scope: ObservableScope,
-  memberships$: Behavior<Pick<CallMembership, "userId">[]>,
-  roomMembers$: Behavior<RoomMemberMap>,
-): {
-  createDisplayNameBehavior$: (userId: string) => Behavior<string | undefined>;
-  createAvatarUrlBehavior$: (userId: string) => Behavior<string | undefined>;
-  displaynameMap$: Behavior<Map<string, string>>;
-  avatarMap$: Behavior<Map<string, string | undefined>>;
-} => {
-  const displaynameMap$ = memberDisplaynames$(
-    scope,
-    memberships$,
-    roomMembers$,
-  );
-  const avatarMap$ = scope.behavior(
-    roomMembers$.pipe(
-      map((roomMembers) =>
-        Array.from(roomMembers.keys()).reduce((acc, key) => {
-          acc.set(key, roomMembers.get(key)?.getMxcAvatarUrl());
-          return acc;
-        }, new Map<string, string | undefined>()),
-      ),
-    ),
-  );
-  return {
-    createDisplayNameBehavior$: (userId: string) =>
-      scope.behavior(
-        displaynameMap$.pipe(
-          map((displaynameMap) => displaynameMap.get(userId)),
-        ),
-      ),
-    createAvatarUrlBehavior$: (userId: string) =>
-      scope.behavior(
-        roomMembers$.pipe(
-          map((roomMembers) => roomMembers.get(userId)?.getMxcAvatarUrl()),
-        ),
-      ),
-    // mostly for testing purposes
-    displaynameMap$,
-    avatarMap$,
-  };
-};

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

@@ -1,228 +0,0 @@
-/*
-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.
-*/
-
-import { test, vi, expect, beforeEach, afterEach } from "vitest";
-import { BehaviorSubject } from "rxjs";
-import { type Room as LivekitRoom } from "livekit-client";
-import EventEmitter from "events";
-import fetchMock from "fetch-mock";
-import { type LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
-import { logger } from "matrix-js-sdk/lib/logger";
-
-import {
-  type Epoch,
-  ObservableScope,
-  trackEpoch,
-} from "../../ObservableScope.ts";
-import { ECConnectionFactory } from "./ConnectionFactory.ts";
-import { type OpenIDClientParts } from "../../../livekit/openIDSFU.ts";
-import {
-  mockCallMembership,
-  mockMediaDevices,
-  withTestScheduler,
-} from "../../../utils/test.ts";
-import { type ProcessorState } from "../../../livekit/TrackProcessorContext.tsx";
-import {
-  areLivekitTransportsEqual,
-  createMatrixLivekitMembers$,
-  type MatrixLivekitMember,
-} from "./MatrixLivekitMembers.ts";
-import { createConnectionManager$ } from "./ConnectionManager.ts";
-import { membershipsAndTransports$ } from "../../SessionBehaviors.ts";
-
-// Test the integration of ConnectionManager and MatrixLivekitMerger
-
-let testScope: ObservableScope;
-let ecConnectionFactory: ECConnectionFactory;
-let mockClient: OpenIDClientParts;
-let lkRoomFactory: () => LivekitRoom;
-
-const createdMockLivekitRooms: Map<string, LivekitRoom> = new Map();
-
-beforeEach(() => {
-  testScope = new ObservableScope();
-  mockClient = {
-    getOpenIdToken: vi.fn().mockReturnValue(""),
-    getDeviceId: vi.fn().mockReturnValue("DEV000"),
-  };
-
-  lkRoomFactory = vi.fn().mockImplementation(() => {
-    const emitter = new EventEmitter();
-    const base = {
-      on: emitter.on.bind(emitter),
-      off: emitter.off.bind(emitter),
-      emit: emitter.emit.bind(emitter),
-      disconnect: vi.fn(),
-      remoteParticipants: new Map(),
-    } as unknown as LivekitRoom;
-
-    vi.mocked(base).connect = vi.fn().mockImplementation(({ url }) => {
-      createdMockLivekitRooms.set(url, base);
-    });
-    return base;
-  });
-
-  ecConnectionFactory = new ECConnectionFactory(
-    mockClient,
-    mockMediaDevices({}),
-    new BehaviorSubject<ProcessorState>({
-      supported: true,
-      processor: undefined,
-    }),
-    undefined,
-    false,
-    lkRoomFactory,
-  );
-
-  //TODO a bit annoying to have to do a http mock?
-  fetchMock.post(`path:/sfu/get`, (url) => {
-    const domain = new URL(url).hostname; // Extract the domain from the URL
-    return {
-      status: 200,
-      body: {
-        url: `wss://${domain}/livekit/sfu`,
-        jwt: "ATOKEN",
-      },
-    };
-  });
-});
-
-afterEach(() => {
-  testScope.end();
-  fetchMock.reset();
-});
-
-test("bob, carl, then bob joining no tracks yet", () => {
-  withTestScheduler(({ expectObservable, behavior, scope }) => {
-    const bobMembership = mockCallMembership("@bob:example.com", "BDEV000");
-    const carlMembership = mockCallMembership("@carl:example.com", "CDEV000");
-    const daveMembership = mockCallMembership("@dave:foo.bar", "DDEV000");
-
-    const eMarble = "abc";
-    const vMarble = "abc";
-    const memberships$ = scope.behavior(
-      behavior(eMarble, {
-        a: [bobMembership],
-        b: [bobMembership, carlMembership],
-        c: [bobMembership, carlMembership, daveMembership],
-      }).pipe(trackEpoch()),
-    );
-
-    const membershipsAndTransports = membershipsAndTransports$(
-      testScope,
-      memberships$,
-    );
-
-    const connectionManager = createConnectionManager$({
-      scope: testScope,
-      connectionFactory: ecConnectionFactory,
-      inputTransports$: membershipsAndTransports.transports$,
-      logger: logger,
-    });
-
-    const matrixLivekitItems$ = createMatrixLivekitMembers$({
-      scope: testScope,
-      membershipsWithTransport$:
-        membershipsAndTransports.membershipsWithTransport$,
-      connectionManager,
-    });
-
-    expectObservable(matrixLivekitItems$).toBe(vMarble, {
-      a: expect.toSatisfy((e: Epoch<MatrixLivekitMember[]>) => {
-        const items = e.value;
-        expect(items.length).toBe(1);
-        const item = items[0]!;
-        expectObservable(item.membership$).toBe("a", {
-          a: bobMembership,
-        });
-        expectObservable(item.connection$).toBe("a", {
-          a: expect.toSatisfy((co) =>
-            areLivekitTransportsEqual(
-              co.transport,
-              bobMembership.transports[0]! as LivekitTransport,
-            ),
-          ),
-        });
-        expectObservable(item.participant$).toBe("a", {
-          a: null,
-        });
-        return true;
-      }),
-      b: expect.toSatisfy((e: Epoch<MatrixLivekitMember[]>) => {
-        const items = e.value;
-        expect(items.length).toBe(2);
-
-        {
-          const item = items[0]!;
-          expectObservable(item.membership$).toBe("a", {
-            a: bobMembership,
-          });
-          expectObservable(item.participant$).toBe("a", {
-            a: null,
-          });
-        }
-
-        {
-          const item = items[1]!;
-
-          expectObservable(item.membership$).toBe("a", {
-            a: carlMembership,
-          });
-          expectObservable(item.participant$).toBe("a", {
-            a: null,
-          });
-          expectObservable(item.connection$).toBe("a", {
-            a: expect.toSatisfy((connection) => {
-              expect(
-                areLivekitTransportsEqual(
-                  connection.transport,
-                  carlMembership.transports[0]! as LivekitTransport,
-                ),
-              ).toBe(true);
-              return true;
-            }),
-          });
-        }
-        return true;
-      }),
-      c: expect.toSatisfy((e: Epoch<MatrixLivekitMember[]>) => {
-        const items = e.value;
-        expect(items.length).toBe(3);
-
-        expectObservable(items[0].membership$).toBe("a", {
-          a: bobMembership,
-        });
-        expectObservable(items[1].membership$).toBe("b", {
-          a: carlMembership,
-        });
-
-        {
-          const item = items[2]!;
-          expectObservable(item.membership$).toBe("a", {
-            a: daveMembership,
-          });
-          expectObservable(item.connection$).toBe("a", {
-            a: expect.toSatisfy((connection) => {
-              expect(
-                areLivekitTransportsEqual(
-                  connection.transport,
-                  daveMembership.transports[0]! as LivekitTransport,
-                ),
-              ).toBe(true);
-              return true;
-            }),
-          });
-          expectObservable(item.participant$).toBe("a", {
-            a: null,
-          });
-        }
-        return true;
-      }),
-      x: expect.anything(),
-    });
-  });
-});

src/state/CallViewModelWidget.test.ts

@@ -1,69 +0,0 @@
-/*
-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.
-*/
-
-import { it, vi, expect } from "vitest";
-import EventEmitter from "events";
-
-// import * as ComponentsCore from "@livekit/components-core";
-import { withCallViewModel } from "./CallViewModel/CallViewModelTestUtils.ts";
-import { type CallViewModel } from "./CallViewModel/CallViewModel.ts";
-import { constant } from "./Behavior.ts";
-import { aliceParticipant, localRtcMember } from "../utils/test-fixtures.ts";
-import { ElementWidgetActions, widget } from "../widget.ts";
-import { E2eeType } from "../e2ee/e2eeType.ts";
-
-vi.mock("@livekit/components-core", { spy: true });
-
-vi.mock("../widget", () => ({
-  ElementWidgetActions: {
-    HangupCall: "HangupCall",
-    // Add other actions if needed
-  },
-  widget: {
-    api: {
-      transport: {
-        send: vi.fn().mockResolvedValue(undefined),
-        reply: vi.fn().mockResolvedValue(undefined),
-      },
-    },
-    lazyActions: new EventEmitter(),
-  },
-}));
-
-it("expect leave when ElementWidgetActions.HangupCall is called", async () => {
-  const pr = Promise.withResolvers<string>();
-  withCallViewModel(
-    {
-      remoteParticipants$: constant([aliceParticipant]),
-      rtcMembers$: constant([localRtcMember]),
-    },
-    (vm: CallViewModel) => {
-      vm.leave$.subscribe((s: string) => {
-        pr.resolve(s);
-      });
-
-      widget!.lazyActions!.emit(
-        ElementWidgetActions.HangupCall,
-        new CustomEvent(ElementWidgetActions.HangupCall, {
-          detail: {
-            action: "im.vector.hangup",
-            api: "toWidget",
-            data: {},
-            requestId: "widgetapi-1761237395918",
-            widgetId: "mrUjS9T6uKUOWHMxXvLbSv0F",
-          },
-        }),
-      );
-    },
-    {
-      encryptionSystem: { kind: E2eeType.PER_PARTICIPANT },
-    },
-  );
-
-  const source = await pr.promise;
-  expect(source).toBe("user");
-});

src/state/GridLikeLayout.ts

@@ -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 Layout, type LayoutMedia } from "./layout-types.ts";
+import { type Layout, type LayoutMedia } from "./CallViewModel";
 import { type TileStore } from "./TileStore";
 
 export type GridLikeLayoutType =

src/state/MediaViewModel.test.ts

@@ -17,8 +17,8 @@ import {
   mockLocalParticipant,
   mockMediaDevices,
   mockRtcMembership,
-  createLocalMedia,
-  createRemoteMedia,
+  withLocalMedia,
+  withRemoteMedia,
   withTestScheduler,
 } from "../utils/test";
 import { getValue } from "../utils/observable";
@@ -42,89 +42,92 @@ vi.mock("../Platform", () => ({
 
 const rtcMembership = mockRtcMembership("@alice:example.org", "AAAA");
 
-test("control a participant's volume", () => {
+test("control a participant's volume", async () => {
   const setVolumeSpy = vi.fn();
-  const vm = createRemoteMedia(rtcMembership, {}, { setVolume: setVolumeSpy });
-  withTestScheduler(({ expectObservable, schedule }) => {
-    schedule("-ab---c---d|", {
-      a() {
-        // Try muting by toggling
-        vm.toggleLocallyMuted();
-        expect(setVolumeSpy).toHaveBeenLastCalledWith(0);
-      },
-      b() {
-        // Try unmuting by dragging the slider back up
-        vm.setLocalVolume(0.6);
-        vm.setLocalVolume(0.8);
-        vm.commitLocalVolume();
-        expect(setVolumeSpy).toHaveBeenCalledWith(0.6);
-        expect(setVolumeSpy).toHaveBeenLastCalledWith(0.8);
-      },
-      c() {
-        // Try muting by dragging the slider back down
-        vm.setLocalVolume(0.2);
-        vm.setLocalVolume(0);
-        vm.commitLocalVolume();
-        expect(setVolumeSpy).toHaveBeenCalledWith(0.2);
-        expect(setVolumeSpy).toHaveBeenLastCalledWith(0);
-      },
-      d() {
-        // Try unmuting by toggling
-        vm.toggleLocallyMuted();
-        // The volume should return to the last non-zero committed volume
-        expect(setVolumeSpy).toHaveBeenLastCalledWith(0.8);
-      },
-    });
-    expectObservable(vm.localVolume$).toBe("ab(cd)(ef)g", {
-      a: 1,
-      b: 0,
-      c: 0.6,
-      d: 0.8,
-      e: 0.2,
-      f: 0,
-      g: 0.8,
-    });
-  });
+  await withRemoteMedia(rtcMembership, {}, { setVolume: setVolumeSpy }, (vm) =>
+    withTestScheduler(({ expectObservable, schedule }) => {
+      schedule("-ab---c---d|", {
+        a() {
+          // Try muting by toggling
+          vm.toggleLocallyMuted();
+          expect(setVolumeSpy).toHaveBeenLastCalledWith(0);
+        },
+        b() {
+          // Try unmuting by dragging the slider back up
+          vm.setLocalVolume(0.6);
+          vm.setLocalVolume(0.8);
+          vm.commitLocalVolume();
+          expect(setVolumeSpy).toHaveBeenCalledWith(0.6);
+          expect(setVolumeSpy).toHaveBeenLastCalledWith(0.8);
+        },
+        c() {
+          // Try muting by dragging the slider back down
+          vm.setLocalVolume(0.2);
+          vm.setLocalVolume(0);
+          vm.commitLocalVolume();
+          expect(setVolumeSpy).toHaveBeenCalledWith(0.2);
+          expect(setVolumeSpy).toHaveBeenLastCalledWith(0);
+        },
+        d() {
+          // Try unmuting by toggling
+          vm.toggleLocallyMuted();
+          // The volume should return to the last non-zero committed volume
+          expect(setVolumeSpy).toHaveBeenLastCalledWith(0.8);
+        },
+      });
+      expectObservable(vm.localVolume$).toBe("ab(cd)(ef)g", {
+        a: 1,
+        b: 0,
+        c: 0.6,
+        d: 0.8,
+        e: 0.2,
+        f: 0,
+        g: 0.8,
+      });
+    }),
+  );
 });
 
-test("toggle fit/contain for a participant's video", () => {
-  const vm = createRemoteMedia(rtcMembership, {}, {});
-  withTestScheduler(({ expectObservable, schedule }) => {
-    schedule("-ab|", {
-      a: () => vm.toggleFitContain(),
-      b: () => vm.toggleFitContain(),
-    });
-    expectObservable(vm.cropVideo$).toBe("abc", {
-      a: true,
-      b: false,
-      c: true,
-    });
-  });
+test("toggle fit/contain for a participant's video", async () => {
+  await withRemoteMedia(rtcMembership, {}, {}, (vm) =>
+    withTestScheduler(({ expectObservable, schedule }) => {
+      schedule("-ab|", {
+        a: () => vm.toggleFitContain(),
+        b: () => vm.toggleFitContain(),
+      });
+      expectObservable(vm.cropVideo$).toBe("abc", {
+        a: true,
+        b: false,
+        c: true,
+      });
+    }),
+  );
 });
 
-test("local media remembers whether it should always be shown", () => {
-  const vm1 = createLocalMedia(
+test("local media remembers whether it should always be shown", async () => {
+  await withLocalMedia(
     rtcMembership,
     {},
     mockLocalParticipant({}),
     mockMediaDevices({}),
+    (vm) =>
+      withTestScheduler(({ expectObservable, schedule }) => {
+        schedule("-a|", { a: () => vm.setAlwaysShow(false) });
+        expectObservable(vm.alwaysShow$).toBe("ab", { a: true, b: false });
+      }),
   );
-  withTestScheduler(({ expectObservable, schedule }) => {
-    schedule("-a|", { a: () => vm1.setAlwaysShow(false) });
-    expectObservable(vm1.alwaysShow$).toBe("ab", { a: true, b: false });
-  });
-
   // Next local media should start out *not* always shown
-  const vm2 = createLocalMedia(
+  await withLocalMedia(
     rtcMembership,
     {},
     mockLocalParticipant({}),
     mockMediaDevices({}),
+    (vm) =>
+      withTestScheduler(({ expectObservable, schedule }) => {
+        schedule("-a|", { a: () => vm.setAlwaysShow(true) });
+        expectObservable(vm.alwaysShow$).toBe("ab", { a: false, b: true });
+      }),
   );
-  withTestScheduler(({ expectObservable, schedule }) => {
-    schedule("-a|", { a: () => vm2.setAlwaysShow(true) });
-    expectObservable(vm2.alwaysShow$).toBe("ab", { a: false, b: true });
-  });
 });
 
 test("switch cameras", async () => {
@@ -161,7 +164,7 @@ test("switch cameras", async () => {
 
   const selectVideoInput = vi.fn();
 
-  const vm = createLocalMedia(
+  await withLocalMedia(
     rtcMembership,
     {},
     mockLocalParticipant({
@@ -176,26 +179,27 @@ test("switch cameras", async () => {
         select: selectVideoInput,
       },
     }),
+    async (vm) => {
+      // Switch to back camera
+      getValue(vm.switchCamera$)!();
+      expect(restartTrack).toHaveBeenCalledExactlyOnceWith({
+        facingMode: "environment",
+      });
+      await waitFor(() => {
+        expect(selectVideoInput).toHaveBeenCalledTimes(1);
+        expect(selectVideoInput).toHaveBeenCalledWith("back camera");
+      });
+      expect(deviceId).toBe("back camera");
+
+      // Switch to front camera
+      getValue(vm.switchCamera$)!();
+      expect(restartTrack).toHaveBeenCalledTimes(2);
+      expect(restartTrack).toHaveBeenLastCalledWith({ facingMode: "user" });
+      await waitFor(() => {
+        expect(selectVideoInput).toHaveBeenCalledTimes(2);
+        expect(selectVideoInput).toHaveBeenLastCalledWith("front camera");
+      });
+      expect(deviceId).toBe("front camera");
+    },
   );
-
-  // Switch to back camera
-  getValue(vm.switchCamera$)!();
-  expect(restartTrack).toHaveBeenCalledExactlyOnceWith({
-    facingMode: "environment",
-  });
-  await waitFor(() => {
-    expect(selectVideoInput).toHaveBeenCalledTimes(1);
-    expect(selectVideoInput).toHaveBeenCalledWith("back camera");
-  });
-  expect(deviceId).toBe("back camera");
-
-  // Switch to front camera
-  getValue(vm.switchCamera$)!();
-  expect(restartTrack).toHaveBeenCalledTimes(2);
-  expect(restartTrack).toHaveBeenLastCalledWith({ facingMode: "user" });
-  await waitFor(() => {
-    expect(selectVideoInput).toHaveBeenCalledTimes(2);
-    expect(selectVideoInput).toHaveBeenLastCalledWith("front camera");
-  });
-  expect(deviceId).toBe("front camera");
 });

src/state/MediaViewModel.ts

@@ -27,6 +27,7 @@ import {
   RoomEvent as LivekitRoomEvent,
   RemoteTrack,
 } from "livekit-client";
+import { type RoomMember } from "matrix-js-sdk";
 import { logger } from "matrix-js-sdk/lib/logger";
 import {
   BehaviorSubject,
@@ -43,9 +44,9 @@ import {
   startWith,
   switchMap,
   throttleTime,
-  distinctUntilChanged,
 } from "rxjs";
 
+import { ViewModel } from "./ViewModel";
 import { alwaysShowSelf } from "../settings/settings";
 import { showConnectionStats } from "../settings/settings";
 import { accumulate } from "../utils/observable";
@@ -55,7 +56,6 @@ import { type ReactionOption } from "../reactions";
 import { platform } from "../Platform";
 import { type MediaDevices } from "./MediaDevices";
 import { type Behavior } from "./Behavior";
-import { type ObservableScope } from "./ObservableScope";
 
 export function observeTrackReference$(
   participant: Participant,
@@ -180,35 +180,29 @@ function observeRemoteTrackReceivingOkay$(
 }
 
 function encryptionErrorObservable$(
-  room$: Behavior<LivekitRoom | undefined>,
+  room: LivekitRoom,
   participant: Participant,
   encryptionSystem: EncryptionSystem,
   criteria: string,
 ): Observable<boolean> {
-  return room$.pipe(
-    switchMap((room) => {
-      if (room === undefined) return of(false);
-      return roomEventSelector(room, LivekitRoomEvent.EncryptionError).pipe(
-        map((e) => {
-          const [err] = e;
-          if (encryptionSystem.kind === E2eeType.PER_PARTICIPANT) {
-            return (
-              // Ideally we would pull the participant identity from the field on the error.
-              // However, it gets lost in the serialization process between workers.
-              // So, instead we do a string match
-              (err?.message.includes(participant.identity) &&
-                err?.message.includes(criteria)) ??
-              false
-            );
-          } else if (encryptionSystem.kind === E2eeType.SHARED_KEY) {
-            return !!err?.message.includes(criteria);
-          }
+  return roomEventSelector(room, LivekitRoomEvent.EncryptionError).pipe(
+    map((e) => {
+      const [err] = e;
+      if (encryptionSystem.kind === E2eeType.PER_PARTICIPANT) {
+        return (
+          // Ideally we would pull the participant identity from the field on the error.
+          // However, it gets lost in the serialization process between workers.
+          // So, instead we do a string match
+          (err?.message.includes(participant.identity) &&
+            err?.message.includes(criteria)) ??
+          false
+        );
+      } else if (encryptionSystem.kind === E2eeType.SHARED_KEY) {
+        return !!err?.message.includes(criteria);
+      }
 
-          return false;
-        }),
-      );
+      return false;
     }),
-    distinctUntilChanged(),
     throttleTime(1000), // Throttle to avoid spamming the UI
     startWith(false),
   );
@@ -222,11 +216,11 @@ export enum EncryptionStatus {
   PasswordInvalid,
 }
 
-abstract class BaseMediaViewModel {
+abstract class BaseMediaViewModel extends ViewModel {
   /**
    * The LiveKit video track for this media.
    */
-  public readonly video$: Behavior<TrackReferenceOrPlaceholder | null>;
+  public readonly video$: Behavior<TrackReferenceOrPlaceholder | undefined>;
   /**
    * Whether there should be a warning that this media is unencrypted.
    */
@@ -241,38 +235,41 @@ abstract class BaseMediaViewModel {
 
   private observeTrackReference$(
     source: Track.Source,
-  ): Behavior<TrackReferenceOrPlaceholder | null> {
+  ): Behavior<TrackReferenceOrPlaceholder | undefined> {
     return this.scope.behavior(
       this.participant$.pipe(
-        switchMap((p) => (!p ? of(null) : observeTrackReference$(p, source))),
+        switchMap((p) =>
+          p === undefined ? of(undefined) : observeTrackReference$(p, source),
+        ),
       ),
     );
   }
 
   public constructor(
-    protected readonly scope: ObservableScope,
     /**
      * An opaque identifier for this media.
      */
     public readonly id: string,
     /**
-     * The Matrix user to which this media belongs.
+     * The Matrix room member to which this media belongs.
      */
-    public readonly userId: string,
+    // TODO: Fully separate the data layer from the UI layer by keeping the
+    // member object internal
+    public readonly member: RoomMember | undefined,
     // We don't necessarily have a participant if a user connects via MatrixRTC but not (yet) through
     // livekit.
     protected readonly participant$: Observable<
-      LocalParticipant | RemoteParticipant | null
+      LocalParticipant | RemoteParticipant | undefined
     >,
 
     encryptionSystem: EncryptionSystem,
     audioSource: AudioSource,
     videoSource: VideoSource,
-    livekitRoom$: Behavior<LivekitRoom | undefined>,
-    public readonly focusUrl$: Behavior<string | undefined>,
+    livekitRoom: LivekitRoom,
     public readonly displayName$: Behavior<string>,
-    public readonly mxcAvatarUrl$: Behavior<string | undefined>,
   ) {
+    super();
+
     const audio$ = this.observeTrackReference$(audioSource);
     this.video$ = this.observeTrackReference$(videoSource);
 
@@ -299,13 +296,13 @@ abstract class BaseMediaViewModel {
           } else if (encryptionSystem.kind === E2eeType.PER_PARTICIPANT) {
             return combineLatest([
               encryptionErrorObservable$(
-                livekitRoom$,
+                livekitRoom,
                 participant,
                 encryptionSystem,
                 "MissingKey",
               ),
               encryptionErrorObservable$(
-                livekitRoom$,
+                livekitRoom,
                 participant,
                 encryptionSystem,
                 "InvalidKey",
@@ -325,7 +322,7 @@ abstract class BaseMediaViewModel {
           } else {
             return combineLatest([
               encryptionErrorObservable$(
-                livekitRoom$,
+                livekitRoom,
                 participant,
                 encryptionSystem,
                 "InvalidKey",
@@ -405,30 +402,24 @@ abstract class BaseUserMediaViewModel extends BaseMediaViewModel {
   public readonly cropVideo$: Behavior<boolean> = this._cropVideo$;
 
   public constructor(
-    scope: ObservableScope,
     id: string,
-    userId: string,
-    participant$: Observable<LocalParticipant | RemoteParticipant | null>,
+    member: RoomMember | undefined,
+    participant$: Observable<LocalParticipant | RemoteParticipant | undefined>,
     encryptionSystem: EncryptionSystem,
-    livekitRoom$: Behavior<LivekitRoom | undefined>,
-    focusUrl$: Behavior<string | undefined>,
+    livekitRoom: LivekitRoom,
     displayName$: Behavior<string>,
-    mxcAvatarUrl$: Behavior<string | undefined>,
     public readonly handRaised$: Behavior<Date | null>,
     public readonly reaction$: Behavior<ReactionOption | null>,
   ) {
     super(
-      scope,
       id,
-      userId,
+      member,
       participant$,
       encryptionSystem,
       Track.Source.Microphone,
       Track.Source.Camera,
-      livekitRoom$,
-      focusUrl$,
+      livekitRoom,
       displayName$,
-      mxcAvatarUrl$,
     );
 
     const media$ = this.scope.behavior(
@@ -543,29 +534,23 @@ export class LocalUserMediaViewModel extends BaseUserMediaViewModel {
     );
 
   public constructor(
-    scope: ObservableScope,
     id: string,
-    userId: string,
-    participant$: Behavior<LocalParticipant | null>,
+    member: RoomMember | undefined,
+    participant$: Behavior<LocalParticipant | undefined>,
     encryptionSystem: EncryptionSystem,
-    livekitRoom$: Behavior<LivekitRoom | undefined>,
-    focusUrl$: Behavior<string | undefined>,
+    livekitRoom: LivekitRoom,
     private readonly mediaDevices: MediaDevices,
     displayName$: Behavior<string>,
-    mxcAvatarUrl$: Behavior<string | undefined>,
     handRaised$: Behavior<Date | null>,
     reaction$: Behavior<ReactionOption | null>,
   ) {
     super(
-      scope,
       id,
-      userId,
+      member,
       participant$,
       encryptionSystem,
-      livekitRoom$,
-      focusUrl$,
+      livekitRoom,
       displayName$,
-      mxcAvatarUrl$,
       handRaised$,
       reaction$,
     );
@@ -655,29 +640,23 @@ export class RemoteUserMediaViewModel extends BaseUserMediaViewModel {
   );
 
   public constructor(
-    scope: ObservableScope,
     id: string,
-    userId: string,
-    participant$: Observable<RemoteParticipant | null>,
+    member: RoomMember | undefined,
+    participant$: Observable<RemoteParticipant | undefined>,
     encryptionSystem: EncryptionSystem,
-    livekitRoom$: Behavior<LivekitRoom | undefined>,
-    focusUrl$: Behavior<string | undefined>,
+    livekitRoom: LivekitRoom,
     private readonly pretendToBeDisconnected$: Behavior<boolean>,
-    displayName$: Behavior<string>,
-    mxcAvatarUrl$: Behavior<string | undefined>,
+    displayname$: Behavior<string>,
     handRaised$: Behavior<Date | null>,
     reaction$: Behavior<ReactionOption | null>,
   ) {
     super(
-      scope,
       id,
-      userId,
+      member,
       participant$,
       encryptionSystem,
-      livekitRoom$,
-      focusUrl$,
-      displayName$,
-      mxcAvatarUrl$,
+      livekitRoom,
+      displayname$,
       handRaised$,
       reaction$,
     );
@@ -756,30 +735,24 @@ export class ScreenShareViewModel extends BaseMediaViewModel {
   );
 
   public constructor(
-    scope: ObservableScope,
     id: string,
-    userId: string,
+    member: RoomMember | undefined,
     participant$: Observable<LocalParticipant | RemoteParticipant>,
     encryptionSystem: EncryptionSystem,
-    livekitRoom$: Behavior<LivekitRoom | undefined>,
-    focusUrl$: Behavior<string | undefined>,
+    livekitRoom: LivekitRoom,
     private readonly pretendToBeDisconnected$: Behavior<boolean>,
-    displayName$: Behavior<string>,
-    mxcAvatarUrl$: Behavior<string | undefined>,
+    displayname$: Behavior<string>,
     public readonly local: boolean,
   ) {
     super(
-      scope,
       id,
-      userId,
+      member,
       participant$,
       encryptionSystem,
       Track.Source.ScreenShareAudio,
       Track.Source.ScreenShare,
-      livekitRoom$,
-      focusUrl$,
-      displayName$,
-      mxcAvatarUrl$,
+      livekitRoom,
+      displayname$,
     );
   }
 }

src/state/MuteStates.ts

@@ -1,213 +0,0 @@
-/*
-Copyright 2023-2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { type IWidgetApiRequest } from "matrix-widget-api";
-import { logger } from "matrix-js-sdk/lib/logger";
-import {
-  BehaviorSubject,
-  combineLatest,
-  distinctUntilChanged,
-  firstValueFrom,
-  fromEvent,
-  map,
-  merge,
-  Observable,
-  of,
-  Subject,
-  switchMap,
-  withLatestFrom,
-} from "rxjs";
-
-import { type MediaDevices, type MediaDevice } from "../state/MediaDevices";
-import { ElementWidgetActions, widget } from "../widget";
-import { Config } from "../config/Config";
-import { getUrlParams } from "../UrlParams";
-import { type ObservableScope } from "./ObservableScope";
-import { type Behavior } from "./Behavior";
-
-interface MuteStateData {
-  enabled$: Observable<boolean>;
-  set: ((enabled: boolean) => void) | null;
-  toggle: (() => void) | null;
-}
-
-export type Handler = (desired: boolean) => Promise<boolean>;
-const defaultHandler: Handler = async (desired) => Promise.resolve(desired);
-
-class MuteState<Label, Selected> {
-  private readonly enabledByDefault$ =
-    this.enabledByConfig && !getUrlParams().skipLobby
-      ? this.joined$.pipe(map((isJoined) => !isJoined))
-      : of(false);
-
-  private readonly handler$ = new BehaviorSubject(defaultHandler);
-  public setHandler(handler: Handler): void {
-    if (this.handler$.value !== defaultHandler)
-      throw new Error("Multiple mute state handlers are not supported");
-    this.handler$.next(handler);
-  }
-  public unsetHandler(): void {
-    this.handler$.next(defaultHandler);
-  }
-
-  private readonly data$ = this.scope.behavior<MuteStateData>(
-    this.device.available$.pipe(
-      map((available) => available.size > 0),
-      distinctUntilChanged(),
-      withLatestFrom(
-        this.enabledByDefault$,
-        (devicesConnected, enabledByDefault) => {
-          if (!devicesConnected)
-            return { enabled$: of(false), set: null, toggle: null };
-
-          // Assume the default value only once devices are actually connected
-          let enabled = enabledByDefault;
-          const set$ = new Subject<boolean>();
-          const toggle$ = new Subject<void>();
-          const desired$ = merge(set$, toggle$.pipe(map(() => !enabled)));
-          const enabled$ = new Observable<boolean>((subscriber) => {
-            subscriber.next(enabled);
-            let latestDesired = enabledByDefault;
-            let syncing = false;
-
-            const sync = async (): Promise<void> => {
-              if (enabled === latestDesired) syncing = false;
-              else {
-                const previouslyEnabled = enabled;
-                enabled = await firstValueFrom(
-                  this.handler$.pipe(
-                    switchMap(async (handler) => handler(latestDesired)),
-                  ),
-                );
-                if (enabled === previouslyEnabled) {
-                  syncing = false;
-                } else {
-                  subscriber.next(enabled);
-                  syncing = true;
-                  sync().catch((err) => {
-                    // TODO: better error handling
-                    logger.error("MuteState: handler error", err);
-                  });
-                }
-              }
-            };
-
-            const s = desired$.subscribe((desired) => {
-              latestDesired = desired;
-              if (syncing === false) {
-                syncing = true;
-                sync().catch((err) => {
-                  // TODO: better error handling
-                  logger.error("MuteState: handler error", err);
-                });
-              }
-            });
-            return (): void => s.unsubscribe();
-          });
-
-          return {
-            set: (enabled: boolean): void => set$.next(enabled),
-            toggle: (): void => toggle$.next(),
-            enabled$,
-          };
-        },
-      ),
-    ),
-  );
-
-  public readonly enabled$: Behavior<boolean> = this.scope.behavior(
-    this.data$.pipe(switchMap(({ enabled$ }) => enabled$)),
-  );
-
-  public readonly setEnabled$: Behavior<((enabled: boolean) => void) | null> =
-    this.scope.behavior(this.data$.pipe(map(({ set }) => set)));
-
-  public readonly toggle$: Behavior<(() => void) | null> = this.scope.behavior(
-    this.data$.pipe(map(({ toggle }) => toggle)),
-  );
-
-  public constructor(
-    private readonly scope: ObservableScope,
-    private readonly device: MediaDevice<Label, Selected>,
-    private readonly joined$: Observable<boolean>,
-    private readonly enabledByConfig: boolean,
-  ) {}
-}
-
-export class MuteStates {
-  public readonly audio = new MuteState(
-    this.scope,
-    this.mediaDevices.audioInput,
-    this.joined$,
-    Config.get().media_devices.enable_audio,
-  );
-  public readonly video = new MuteState(
-    this.scope,
-    this.mediaDevices.videoInput,
-    this.joined$,
-    Config.get().media_devices.enable_video,
-  );
-
-  public constructor(
-    private readonly scope: ObservableScope,
-    private readonly mediaDevices: MediaDevices,
-    private readonly joined$: Observable<boolean>,
-  ) {
-    if (widget !== null) {
-      // Sync our mute states with the hosting client
-      const widgetApiState$ = combineLatest(
-        [this.audio.enabled$, this.video.enabled$],
-        (audio, video) => ({ audio_enabled: audio, video_enabled: video }),
-      );
-      widgetApiState$.pipe(this.scope.bind()).subscribe((state) => {
-        widget!.api.transport
-          .send(ElementWidgetActions.DeviceMute, state)
-          .catch((e) =>
-            logger.warn("Could not send DeviceMute action to widget", e),
-          );
-      });
-
-      // Also sync the hosting client's mute states back with ours
-      const muteActions$ = fromEvent(
-        widget.lazyActions,
-        ElementWidgetActions.DeviceMute,
-      ) as Observable<CustomEvent<IWidgetApiRequest>>;
-      muteActions$
-        .pipe(
-          withLatestFrom(
-            widgetApiState$,
-            this.audio.setEnabled$,
-            this.video.setEnabled$,
-          ),
-          this.scope.bind(),
-        )
-        .subscribe(([ev, state, setAudioEnabled, setVideoEnabled]) => {
-          // First copy the current state into our new state
-          const newState = { ...state };
-          // Update new state if there are any requested changes from the widget
-          // action in `ev.detail.data`.
-          if (
-            ev.detail.data.audio_enabled != null &&
-            typeof ev.detail.data.audio_enabled === "boolean" &&
-            setAudioEnabled !== null
-          ) {
-            newState.audio_enabled = ev.detail.data.audio_enabled;
-            setAudioEnabled(newState.audio_enabled);
-          }
-          if (
-            ev.detail.data.video_enabled != null &&
-            typeof ev.detail.data.video_enabled === "boolean" &&
-            setVideoEnabled !== null
-          ) {
-            newState.video_enabled = ev.detail.data.video_enabled;
-            setVideoEnabled(newState.video_enabled);
-          }
-          widget!.api.transport.reply(ev.detail, newState);
-        });
-    }
-  }
-}

src/state/ObservableScope.test.ts

@@ -1,104 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { describe, expect, it } from "vitest";
-import { BehaviorSubject, combineLatest, Subject } from "rxjs";
-import { logger } from "matrix-js-sdk/lib/logger";
-
-import {
-  Epoch,
-  mapEpoch,
-  ObservableScope,
-  trackEpoch,
-} from "./ObservableScope";
-import { withTestScheduler } from "../utils/test";
-
-describe("Epoch", () => {
-  it("should map the value correctly", () => {
-    const epoch = new Epoch(1);
-    const mappedEpoch = epoch.mapInner((v) => v + 1);
-    expect(mappedEpoch.value).toBe(2);
-    expect(mappedEpoch.epoch).toBe(0);
-  });
-
-  it("should be tracked from an observable", () => {
-    withTestScheduler(({ expectObservable, behavior }) => {
-      const observable$ = behavior("abc", {
-        a: 1,
-        b: 2,
-        c: 3,
-      });
-      const epochObservable$ = observable$.pipe(trackEpoch());
-      expectObservable(epochObservable$).toBe("abc", {
-        a: expect.toSatisfy((e) => e.epoch === 0 && e.value === 1),
-        b: expect.toSatisfy((e) => e.epoch === 1 && e.value === 2),
-        c: expect.toSatisfy((e) => e.epoch === 2 && e.value === 3),
-      });
-    });
-  });
-
-  it("can be mapped without loosing epoch information", () => {
-    withTestScheduler(({ expectObservable, behavior }) => {
-      const observable$ = behavior("abc", {
-        a: "A",
-        b: "B",
-        c: "C",
-      });
-      const epochObservable$ = observable$.pipe(trackEpoch());
-      const derivedEpoch$ = epochObservable$.pipe(
-        mapEpoch((e) => e + "-mapped"),
-      );
-
-      expectObservable(derivedEpoch$).toBe("abc", {
-        a: new Epoch("A-mapped", 0),
-        b: new Epoch("B-mapped", 1),
-        c: new Epoch("C-mapped", 2),
-      });
-    });
-  });
-
-  it("diamonds emits in a predictable order", () => {
-    const sb$ = new BehaviorSubject("initial");
-    const root$ = sb$.pipe(trackEpoch());
-    const derivedA$ = root$.pipe(mapEpoch((e) => e + "-A"));
-    const derivedB$ = root$.pipe(mapEpoch((e) => e + "-B"));
-    combineLatest([root$, derivedB$, derivedA$]).subscribe(
-      ([root, derivedA, derivedB]) => {
-        logger.log(
-          "combined" +
-            root.epoch +
-            root.value +
-            "\n" +
-            derivedA.epoch +
-            derivedA.value +
-            "\n" +
-            derivedB.epoch +
-            derivedB.value,
-        );
-      },
-    );
-    sb$.next("updated");
-    sb$.next("ANOTERUPDATE");
-  });
-
-  it("behavior test", () => {
-    const scope = new ObservableScope();
-    const s$ = new Subject();
-    const behavior$ = scope.behavior(s$, 0);
-    behavior$.subscribe((value) => {
-      logger.log(`Received value: ${value}`);
-    });
-    s$.next(1);
-    s$.next(2);
-    s$.next(3);
-    s$.next(3);
-    s$.next(3);
-    s$.next(3);
-    s$.next(3);
-    s$.complete();
-  });
-});

src/state/ObservableScope.ts

@@ -7,16 +7,9 @@ Please see LICENSE in the repository root for full details.
 
 import {
   BehaviorSubject,
-  catchError,
   distinctUntilChanged,
-  EMPTY,
-  endWith,
-  filter,
-  map,
   type Observable,
-  type OperatorFunction,
-  share,
-  take,
+  Subject,
   takeUntil,
 } from "rxjs";
 
@@ -24,21 +17,15 @@ import { type Behavior } from "./Behavior";
 
 type MonoTypeOperator = <T>(o: Observable<T>) => Observable<T>;
 
-type SplitBehavior<T> = keyof T extends string | number
-  ? { [K in keyof T as `${K}$`]: Behavior<T[K]> }
-  : never;
-
 const nothing = Symbol("nothing");
 
 /**
  * A scope which limits the execution lifetime of its bound Observables.
  */
 export class ObservableScope {
-  private readonly ended$ = new BehaviorSubject(false);
+  private readonly ended$ = new Subject<void>();
 
-  private readonly bindImpl: MonoTypeOperator = takeUntil(
-    this.ended$.pipe(filter((ended) => ended)),
-  );
+  private readonly bindImpl: MonoTypeOperator = takeUntil(this.ended$);
 
   /**
    * Binds an Observable to this scope, so that it completes when the scope
@@ -48,17 +35,6 @@ export class ObservableScope {
     return this.bindImpl;
   }
 
-  private readonly shareImpl: MonoTypeOperator = share({
-    resetOnError: false,
-    resetOnComplete: false,
-    resetOnRefCountZero: false,
-  });
-  /**
-   * Shares (multicasts) the Observable as a hot Observable.
-   */
-  public readonly share: MonoTypeOperator = (input$) =>
-    input$.pipe(this.bindImpl, this.shareImpl);
-
   /**
    * Converts an Observable to a Behavior. If no initial value is specified, the
    * Observable must synchronously emit an initial value.
@@ -90,84 +66,8 @@ export class ObservableScope {
    * Ends the scope, causing any bound Observables to complete.
    */
   public end(): void {
-    this.ended$.next(true);
-  }
-
-  /**
-   * Register a callback to be executed when the scope is ended.
-   */
-  public onEnd(callback: () => void): void {
-    this.ended$
-      .pipe(
-        filter((ended) => ended),
-        take(1),
-      )
-      .subscribe(callback);
-  }
-
-  /**
-   * For the duration of the scope, sync some external state with the value of
-   * the provided Behavior by way of an async function which attempts to update
-   * (reconcile) the external state. The reconciliation function may return a
-   * clean-up callback which will be called and awaited before the next change
-   * in value (or the end of the scope).
-   *
-   * All calls to the function and its clean-up callbacks are serialized. If the
-   * value changes faster than the handlers can keep up with, intermediate
-   * values may be skipped.
-   *
-   * Basically, this is like React's useEffect but async and for Behaviors.
-   */
-  public reconcile<T>(
-    value$: Behavior<T>,
-    callback: (value: T) => Promise<(() => Promise<void>) | void>,
-  ): void {
-    let latestValue: T | typeof nothing = nothing;
-    let reconciledValue: T | typeof nothing = nothing;
-    let cleanUp: (() => Promise<void>) | void = undefined;
-    value$
-      .pipe(
-        catchError(() => EMPTY), // Ignore errors
-        this.bind(), // Limit to the duration of the scope
-        endWith(nothing), // Clean up when the scope ends
-      )
-      .subscribe((value) => {
-        void (async (): Promise<void> => {
-          if (latestValue === nothing) {
-            latestValue = value;
-            while (latestValue !== reconciledValue) {
-              await cleanUp?.(); // Call the previous value's clean-up handler
-              reconciledValue = latestValue;
-              if (latestValue !== nothing)
-                cleanUp = await callback(latestValue); // Sync current value
-            }
-            // Reset to signal that reconciliation is done for now
-            latestValue = nothing;
-          } else {
-            // There's already an instance of the above 'while' loop running
-            // concurrently. Just update the latest value and let it be handled.
-            latestValue = value;
-          }
-        })();
-      });
-  }
-
-  /**
-   * Splits a Behavior of objects with static properties into an object with
-   * Behavior properties.
-   *
-   * For example, splitting a `Behavior<{ name: string; age: number }>` results
-   * in an object of type `{ name$: Behavior<string>; age$: Behavior<number> }`.
-   */
-  public splitBehavior<T extends object>(
-    input$: Behavior<T>,
-  ): SplitBehavior<T> {
-    return Object.fromEntries(
-      Object.keys(input$.value).map((key) => [
-        `${key}$`,
-        this.behavior(input$.pipe(map((input) => input[key as keyof T]))),
-      ]),
-    ) as SplitBehavior<T>;
+    this.ended$.next();
+    this.ended$.complete();
   }
 }
 
@@ -175,108 +75,3 @@ export class ObservableScope {
  * The global scope, a scope which never ends.
  */
 export const globalScope = new ObservableScope();
-
-/**
- * `Epoch`'s can be used to create `Behavior`s and `Observable`s which derivitives can be merged
- * with `combinedLatest` without duplicated emissions.
- *
- * This is useful in the following example:
- * ```
- * const rootObs$ = of("red","green","blue");
- * const derivedObs$ = rootObs$.pipe(
- *   map((v)=> {red:"fire", green:"grass", blue:"water"}[v])
- * );
- * const otherDerivedObs$ = rootObs$.pipe(
- *   map((v)=> {red:"tomatoes", green:"leaves", blue:"sky"}[v])
- * );
- * const mergedObs$ = combineLatest([rootObs$, derivedObs$, otherDerivedObs$]).pipe(
- *   map(([color, a,b]) => color + " like " + a + " and " + b)
- * );
- *
- * ```
- * will result in 6 emissions with mismatching items like "red like fire and leaves"
- *
- * # Use Epoch
- * ```
- * const ancestorObs$ = of(1,2,3).pipe(trackEpoch());
- * const derivedObs$ = ancestorObs$.pipe(
- *   mapEpoch((v)=> "this number: " + v)
- * );
- * const otherDerivedObs$ = ancestorObs$.pipe(
- *   mapEpoch((v)=> "multiplied by: " + v)
- * );
- * const mergedObs$ = combineLatest([derivedObs$, otherDerivedObs$]).pipe(
- *   filter((values) => values.every((v) => v.epoch === values[0].v)),
- *   map(([color, a, b]) => color + " like " + a + " and " + b)
- * );
- *
- * ```
- * will result in 3 emissions all matching (e.g. "blue like water and sky")
- */
-export class Epoch<T> {
-  public readonly epoch: number;
-  public readonly value: T;
-
-  public constructor(value: T, epoch?: number) {
-    this.value = value;
-    this.epoch = epoch ?? 0;
-  }
-  /**
-   * Maps the value inside the epoch to a new value while keeping the epoch number.
-   * # usage
-   * ```
-   * const myEpoch$ = myObservable$.pipe(
-   *   map(trackEpoch()),
-   *   // this is the preferred way using mapEpoch
-   *   mapEpoch((v)=> v+1)
-   *   // This is how inner map can be used:
-   *   map((epoch) => epoch.innerMap((v)=> v+1))
-   *   // It is equivalent to:
-   *   map((epoch) => new Epoch(epoch.value + 1, epoch.epoch))
-   * )
-   * ```
-   * See also `Epoch<T>`
-   */
-  public mapInner<U>(map: (value: T) => U): Epoch<U> {
-    return new Epoch<U>(map(this.value), this.epoch);
-  }
-}
-
-/**
- * A `pipe` compatible map oparator that keeps the epoch in tact but allows mapping the value.
- * # usage
- * ```
- * const myEpoch$ = myObservable$.pipe(
- *   map(trackEpoch()),
- *   // this is the preferred way using mapEpoch
- *   mapEpoch((v)=> v+1)
- *   // This is how inner map can be used:
- *   map((epoch) => epoch.innerMap((v)=> v+1))
- *   // It is equivalent to:
- *   map((epoch) => new Epoch(epoch.value + 1, epoch.epoch))
- * )
- * ```
- * See also `Epoch<T>`
- */
-export function mapEpoch<T, U>(
-  mapFn: (value: T) => U,
-): OperatorFunction<Epoch<T>, Epoch<U>> {
-  return map((e) => e.mapInner(mapFn));
-}
-
-/**
- * # usage
- * ```
- * const myEpoch$ = myObservable$.pipe(
- *   map(trackEpoch()),
- *   map((epoch) => epoch.innerMap((v)=> v+1))
- * )
- * const derived = myEpoch$.pipe(
- *   mapEpoch((v)=>v^2)
- * )
- * ```
- * See also `Epoch<T>`
- */
-export function trackEpoch<T>(): OperatorFunction<T, Epoch<T>> {
-  return map<T, Epoch<T>>((value, number) => new Epoch(value, number));
-}

src/state/OneOnOneLayout.ts

@@ -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 OneOnOneLayout, type OneOnOneLayoutMedia } from "./layout-types";
+import { type OneOnOneLayout, type OneOnOneLayoutMedia } from "./CallViewModel";
 import { type TileStore } from "./TileStore";
 
 /**

src/state/PipLayout.ts

@@ -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 PipLayout, type PipLayoutMedia } from "./layout-types.ts";
+import { type PipLayout, type PipLayoutMedia } from "./CallViewModel";
 import { type TileStore } from "./TileStore";
 
 /**

src/state/ScreenShare.ts

@@ -1,53 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-import { of } from "rxjs";
-import {
-  type LocalParticipant,
-  type RemoteParticipant,
-  type Room as LivekitRoom,
-} from "livekit-client";
-
-import { type ObservableScope } from "./ObservableScope.ts";
-import { ScreenShareViewModel } from "./MediaViewModel.ts";
-import type { EncryptionSystem } from "../e2ee/sharedKeyManagement.ts";
-import type { Behavior } from "./Behavior.ts";
-
-/**
- * A screen share media item to be presented in a tile. This is a thin wrapper
- * around ScreenShareViewModel which essentially just establishes an
- * ObservableScope for behaviors that the view model depends on.
- */
-export class ScreenShare {
-  public readonly vm: ScreenShareViewModel;
-
-  public constructor(
-    private readonly scope: ObservableScope,
-    id: string,
-    userId: string,
-    participant: LocalParticipant | RemoteParticipant,
-    encryptionSystem: EncryptionSystem,
-    livekitRoom$: Behavior<LivekitRoom | undefined>,
-    focusUrl$: Behavior<string | undefined>,
-    pretendToBeDisconnected$: Behavior<boolean>,
-    displayName$: Behavior<string>,
-    mxcAvatarUrl$: Behavior<string | undefined>,
-  ) {
-    this.vm = new ScreenShareViewModel(
-      this.scope,
-      id,
-      userId,
-      of(participant),
-      encryptionSystem,
-      livekitRoom$,
-      focusUrl$,
-      pretendToBeDisconnected$,
-      displayName$,
-      mxcAvatarUrl$,
-      participant.isLocal,
-    );
-  }
-}

src/state/SessionBehaviors.ts

@@ -1,81 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import {
-  type CallMembership,
-  isLivekitTransport,
-  type LivekitTransport,
-  type MatrixRTCSession,
-  MatrixRTCSessionEvent,
-} from "matrix-js-sdk/lib/matrixrtc";
-import { fromEvent } from "rxjs";
-
-import {
-  Epoch,
-  mapEpoch,
-  trackEpoch,
-  type ObservableScope,
-} from "./ObservableScope";
-import { type Behavior } from "./Behavior";
-
-export const membershipsAndTransports$ = (
-  scope: ObservableScope,
-  memberships$: Behavior<Epoch<CallMembership[]>>,
-): {
-  membershipsWithTransport$: Behavior<
-    Epoch<{ membership: CallMembership; transport?: LivekitTransport }[]>
-  >;
-  transports$: Behavior<Epoch<LivekitTransport[]>>;
-} => {
-  /**
-   * Lists the transports used by ourselves, plus all other MatrixRTC session
-   * members. For completeness this also lists the preferred transport and
-   * whether we are in multi-SFU mode or sticky events mode (because
-   * advertisedTransport$ wants to read them at the same time, and bundling data
-   * together when it might change together is what you have to do in RxJS to
-   * avoid reading inconsistent state or observing too many changes.)
-   */
-  const membershipsWithTransport$ = scope.behavior(
-    memberships$.pipe(
-      mapEpoch((memberships) => {
-        return memberships.map((membership) => {
-          const oldestMembership = memberships[0] ?? membership;
-          const transport = membership.getTransport(oldestMembership);
-          return {
-            membership,
-            transport: isLivekitTransport(transport) ? transport : undefined,
-          };
-        });
-      }),
-    ),
-  );
-
-  const transports$ = scope.behavior(
-    membershipsWithTransport$.pipe(
-      mapEpoch((mts) => mts.flatMap(({ transport: t }) => (t ? [t] : []))),
-    ),
-  );
-
-  return {
-    membershipsWithTransport$,
-    transports$,
-  };
-};
-
-export const createMemberships$ = (
-  scope: ObservableScope,
-  matrixRTCSession: MatrixRTCSession,
-): Behavior<Epoch<CallMembership[]>> => {
-  return scope.behavior(
-    fromEvent(
-      matrixRTCSession,
-      MatrixRTCSessionEvent.MembershipsChanged,
-      (_, memberships: CallMembership[]) => memberships,
-    ).pipe(trackEpoch()),
-    new Epoch(matrixRTCSession.memberships),
-  );
-};

src/state/SpotlightExpandedLayout.ts

@@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details.
 import {
   type SpotlightExpandedLayout,
   type SpotlightExpandedLayoutMedia,
-} from "./layout-types";
+} from "./CallViewModel";
 import { type TileStore } from "./TileStore";
 
 /**
@@ -20,7 +20,7 @@ export function spotlightExpandedLayout(
 ): [SpotlightExpandedLayout, TileStore] {
   const update = prevTiles.from(1);
   update.registerSpotlight(media.spotlight, true);
-  if (media.pip !== undefined) update.registerPipTile(media.pip);
+  if (media.pip !== undefined) update.registerGridTile(media.pip);
   const tiles = update.build();
 
   return [

src/state/TileStore.ts

@@ -14,7 +14,7 @@ import { fillGaps } from "../utils/iter";
 import { debugTileLayout } from "../settings/settings";
 
 function debugEntries(entries: GridTileData[]): string[] {
-  return entries.map((e) => e.media.displayName$.value);
+  return entries.map((e) => e.media.member?.rawDisplayName ?? "[👻]");
 }
 
 let DEBUG_ENABLED = false;
@@ -44,6 +44,10 @@ class SpotlightTileData {
     this.maximised$ = new BehaviorSubject(maximised);
     this.vm = new SpotlightTileViewModel(this.media$, this.maximised$);
   }
+
+  public destroy(): void {
+    this.vm.destroy();
+  }
 }
 
 class GridTileData {
@@ -61,10 +65,14 @@ class GridTileData {
     this.media$ = new BehaviorSubject(media);
     this.vm = new GridTileViewModel(this.media$);
   }
+
+  public destroy(): void {
+    this.vm.destroy();
+  }
 }
 
 /**
- * An immutable collection of tiles to be mapped to a layout.
+ * A collection of tiles to be mapped to a layout.
  */
 export class TileStore {
   private constructor(
@@ -110,11 +118,10 @@ export class TileStore {
  */
 export class TileStoreBuilder {
   private spotlight: SpotlightTileData | null = null;
-  private readonly prevSpotlightSpeaker: UserMediaViewModel | null =
+  private readonly prevSpotlightSpeaker =
     this.prevSpotlight?.media.length === 1 &&
-    "speaking$" in this.prevSpotlight.media[0]
-      ? this.prevSpotlight.media[0]
-      : null;
+    "speaking" in this.prevSpotlight.media[0] &&
+    this.prevSpotlight.media[0];
 
   private readonly prevGridByMedia: Map<
     MediaViewModel,
@@ -156,7 +163,7 @@ export class TileStoreBuilder {
   public registerSpotlight(media: MediaViewModel[], maximised: boolean): void {
     if (DEBUG_ENABLED)
       logger.debug(
-        `[TileStore, ${this.generation}] register spotlight: ${media.map((m) => m.displayName$.value)}`,
+        `[TileStore, ${this.generation}] register spotlight: ${media.map((m) => m.member?.rawDisplayName ?? "[👻]")}`,
       );
 
     if (this.spotlight !== null) throw new Error("Spotlight already set");
@@ -180,7 +187,7 @@ export class TileStoreBuilder {
   public registerGridTile(media: UserMediaViewModel): void {
     if (DEBUG_ENABLED)
       logger.debug(
-        `[TileStore, ${this.generation}] register grid tile: ${media.displayName$.value}`,
+        `[TileStore, ${this.generation}] register grid tile: ${media.member?.rawDisplayName ?? "[👻]"}`,
       );
 
     if (this.spotlight !== null) {
@@ -194,9 +201,8 @@ export class TileStoreBuilder {
       if (
         media === this.prevSpotlightSpeaker &&
         this.spotlight.media.length === 1 &&
-        "speaking$" in this.spotlight.media[0] &&
-        this.prevSpotlightSpeaker !==
-          (this.spotlight.media[0] satisfies UserMediaViewModel)
+        "speaking" in this.spotlight.media[0] &&
+        this.prevSpotlightSpeaker !== this.spotlight.media[0]
       ) {
         const prev = this.prevGridByMedia.get(this.spotlight.media[0]);
         if (prev !== undefined) {
@@ -254,33 +260,6 @@ export class TileStoreBuilder {
     this.numGridEntries++;
   }
 
-  /**
-   * Sets up a PiP tile for the given media. This is a special kind of grid tile
-   * that is expected to stand on its own and switch between speakers, so this
-   * method will more eagerly try to reuse an existing tile, replacing its
-   * media, than registerGridTile would.
-   */
-  public registerPipTile(media: UserMediaViewModel): void {
-    if (DEBUG_ENABLED)
-      logger.debug(
-        `[TileStore, ${this.generation}] register PiP tile: ${media.displayName$.value}`,
-      );
-
-    // If there is a single grid tile that we can reuse
-    if (this.prevGrid.length === 1) {
-      const entry = this.prevGrid[0];
-      this.stationaryGridEntries[0] = entry;
-      // Do the media swap
-      entry.media = media;
-      this.prevGridByMedia.delete(entry.media);
-      this.prevGridByMedia.set(media, [entry, 0]);
-    } else {
-      this.visibleGridEntries.push(new GridTileData(media));
-    }
-
-    this.numGridEntries++;
-  }
-
   /**
    * Constructs a new collection of all registered tiles, transferring ownership
    * of the tiles to the new collection. Any tiles present in the previous
@@ -309,6 +288,13 @@ export class TileStoreBuilder {
       );
     }
 
+    // Destroy unused tiles
+    if (this.spotlight === null && this.prevSpotlight !== null)
+      this.prevSpotlight.destroy();
+    const gridEntries = new Set(grid);
+    for (const entry of this.prevGrid)
+      if (!gridEntries.has(entry)) entry.destroy();
+
     return this.construct(this.spotlight, grid);
   }
 }

src/state/TileViewModel.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 { ViewModel } from "./ViewModel";
 import { type MediaViewModel, type UserMediaViewModel } from "./MediaViewModel";
 import { type Behavior } from "./Behavior";
 
@@ -13,17 +14,21 @@ function createId(): string {
   return (nextId++).toString();
 }
 
-export class GridTileViewModel {
+export class GridTileViewModel extends ViewModel {
   public readonly id = createId();
 
-  public constructor(public readonly media$: Behavior<UserMediaViewModel>) {}
+  public constructor(public readonly media$: Behavior<UserMediaViewModel>) {
+    super();
+  }
 }
 
-export class SpotlightTileViewModel {
+export class SpotlightTileViewModel extends ViewModel {
   public constructor(
     public readonly media$: Behavior<MediaViewModel[]>,
     public readonly maximised$: Behavior<boolean>,
-  ) {}
+  ) {
+    super();
+  }
 }
 
 export type TileViewModel = GridTileViewModel | SpotlightTileViewModel;

src/state/UserMedia.ts

@@ -1,200 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { combineLatest, map, type Observable, of, switchMap } from "rxjs";
-import {
-  type LocalParticipant,
-  ParticipantEvent,
-  type RemoteParticipant,
-  type Room as LivekitRoom,
-} from "livekit-client";
-import { observeParticipantEvents } from "@livekit/components-core";
-
-import { type ObservableScope } from "./ObservableScope.ts";
-import {
-  LocalUserMediaViewModel,
-  RemoteUserMediaViewModel,
-  type UserMediaViewModel,
-} from "./MediaViewModel.ts";
-import type { Behavior } from "./Behavior.ts";
-import type { EncryptionSystem } from "../e2ee/sharedKeyManagement.ts";
-import type { MediaDevices } from "./MediaDevices.ts";
-import type { ReactionOption } from "../reactions";
-import { observeSpeaker$ } from "./observeSpeaker.ts";
-import { generateItems } from "../utils/observable.ts";
-import { ScreenShare } from "./ScreenShare.ts";
-
-/**
- * Sorting bins defining the order in which media tiles appear in the layout.
- */
-enum SortingBin {
-  /**
-   * Yourself, when the "always show self" option is on.
-   */
-  SelfAlwaysShown,
-  /**
-   * Participants that are sharing their screen.
-   */
-  Presenters,
-  /**
-   * Participants that have been speaking recently.
-   */
-  Speakers,
-  /**
-   * Participants that have their hand raised.
-   */
-  HandRaised,
-  /**
-   * Participants with video.
-   */
-  Video,
-  /**
-   * Participants not sharing any video.
-   */
-  NoVideo,
-  /**
-   * Yourself, when the "always show self" option is off.
-   */
-  SelfNotAlwaysShown,
-}
-
-/**
- * A user media item to be presented in a tile. This is a thin wrapper around
- * UserMediaViewModel which additionally determines the media item's sorting bin
- * for inclusion in the call layout and tracks associated screen shares.
- */
-export class UserMedia {
-  public readonly vm: UserMediaViewModel = this.participant$.value?.isLocal
-    ? new LocalUserMediaViewModel(
-        this.scope,
-        this.id,
-        this.userId,
-        this.participant$ as Behavior<LocalParticipant | null>,
-        this.encryptionSystem,
-        this.livekitRoom$,
-        this.focusUrl$,
-        this.mediaDevices,
-        this.displayName$,
-        this.mxcAvatarUrl$,
-        this.scope.behavior(this.handRaised$),
-        this.scope.behavior(this.reaction$),
-      )
-    : new RemoteUserMediaViewModel(
-        this.scope,
-        this.id,
-        this.userId,
-        this.participant$ as Behavior<RemoteParticipant | null>,
-        this.encryptionSystem,
-        this.livekitRoom$,
-        this.focusUrl$,
-        this.pretendToBeDisconnected$,
-        this.displayName$,
-        this.mxcAvatarUrl$,
-        this.scope.behavior(this.handRaised$),
-        this.scope.behavior(this.reaction$),
-      );
-
-  private readonly speaker$ = this.scope.behavior(
-    observeSpeaker$(this.vm.speaking$),
-  );
-
-  /**
-   * All screen share media associated with this user media.
-   */
-  public readonly screenShares$ = this.scope.behavior(
-    this.participant$.pipe(
-      switchMap((p) =>
-        p === null
-          ? of([])
-          : observeParticipantEvents(
-              p,
-              ParticipantEvent.TrackPublished,
-              ParticipantEvent.TrackUnpublished,
-              ParticipantEvent.LocalTrackPublished,
-              ParticipantEvent.LocalTrackUnpublished,
-            ).pipe(
-              // Technically more than one screen share might be possible... our
-              // MediaViewModels don't support it though since they look for a unique
-              // track for the given source. So generateItems here is a bit overkill.
-              generateItems(
-                function* (p) {
-                  if (p.isScreenShareEnabled)
-                    yield {
-                      keys: ["screen-share"],
-                      data: undefined,
-                    };
-                },
-                (scope, _data$, key) =>
-                  new ScreenShare(
-                    scope,
-                    `${this.id}:${key}`,
-                    this.userId,
-                    p,
-                    this.encryptionSystem,
-                    this.livekitRoom$,
-                    this.focusUrl$,
-                    this.pretendToBeDisconnected$,
-                    this.displayName$,
-                    this.mxcAvatarUrl$,
-                  ),
-              ),
-            ),
-      ),
-    ),
-  );
-
-  private readonly presenter$ = this.scope.behavior(
-    this.screenShares$.pipe(map((screenShares) => screenShares.length > 0)),
-  );
-
-  /**
-   * Which sorting bin the media item should be placed in.
-   */
-  // This is exposed here rather than by UserMediaViewModel because it's only
-  // relevant to the layout algorithms; the MediaView component should be
-  // ignorant of this value.
-  public readonly bin$ = combineLatest(
-    [
-      this.speaker$,
-      this.presenter$,
-      this.vm.videoEnabled$,
-      this.vm.handRaised$,
-      this.vm instanceof LocalUserMediaViewModel
-        ? this.vm.alwaysShow$
-        : of(false),
-    ],
-    (speaker, presenter, video, handRaised, alwaysShow) => {
-      if (this.vm.local)
-        return alwaysShow
-          ? SortingBin.SelfAlwaysShown
-          : SortingBin.SelfNotAlwaysShown;
-      else if (presenter) return SortingBin.Presenters;
-      else if (speaker) return SortingBin.Speakers;
-      else if (handRaised) return SortingBin.HandRaised;
-      else if (video) return SortingBin.Video;
-      else return SortingBin.NoVideo;
-    },
-  );
-
-  public constructor(
-    private readonly scope: ObservableScope,
-    public readonly id: string,
-    private readonly userId: string,
-    private readonly participant$: Behavior<
-      LocalParticipant | RemoteParticipant | null
-    >,
-    private readonly encryptionSystem: EncryptionSystem,
-    private readonly livekitRoom$: Behavior<LivekitRoom | undefined>,
-    private readonly focusUrl$: Behavior<string | undefined>,
-    private readonly mediaDevices: MediaDevices,
-    private readonly pretendToBeDisconnected$: Behavior<boolean>,
-    private readonly displayName$: Behavior<string>,
-    private readonly mxcAvatarUrl$: Behavior<string | undefined>,
-    private readonly handRaised$: Observable<Date | null>,
-    private readonly reaction$: Observable<ReactionOption | null>,
-  ) {}
-}

src/state/ViewModel.ts

@@ -0,0 +1,23 @@
+/*
+Copyright 2023, 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { ObservableScope } from "./ObservableScope";
+
+/**
+ * An MVVM view model.
+ */
+export abstract class ViewModel {
+  protected readonly scope = new ObservableScope();
+
+  /**
+   * Instructs the ViewModel to clean up its resources. If you forget to call
+   * this, there may be memory leaks!
+   */
+  public destroy(): void {
+    this.scope.end();
+  }
+}

src/state/layout-types.ts

@@ -1,108 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import {
-  type GridTileViewModel,
-  type SpotlightTileViewModel,
-} from "./TileViewModel.ts";
-import {
-  type MediaViewModel,
-  type UserMediaViewModel,
-} from "./MediaViewModel.ts";
-
-export interface GridLayoutMedia {
-  type: "grid";
-  spotlight?: MediaViewModel[];
-  grid: UserMediaViewModel[];
-}
-
-export interface SpotlightLandscapeLayoutMedia {
-  type: "spotlight-landscape";
-  spotlight: MediaViewModel[];
-  grid: UserMediaViewModel[];
-}
-
-export interface SpotlightPortraitLayoutMedia {
-  type: "spotlight-portrait";
-  spotlight: MediaViewModel[];
-  grid: UserMediaViewModel[];
-}
-
-export interface SpotlightExpandedLayoutMedia {
-  type: "spotlight-expanded";
-  spotlight: MediaViewModel[];
-  pip?: UserMediaViewModel;
-}
-
-export interface OneOnOneLayoutMedia {
-  type: "one-on-one";
-  local: UserMediaViewModel;
-  remote: UserMediaViewModel;
-}
-
-export interface PipLayoutMedia {
-  type: "pip";
-  spotlight: MediaViewModel[];
-}
-
-export type LayoutMedia =
-  | GridLayoutMedia
-  | SpotlightLandscapeLayoutMedia
-  | SpotlightPortraitLayoutMedia
-  | SpotlightExpandedLayoutMedia
-  | OneOnOneLayoutMedia
-  | PipLayoutMedia;
-
-export interface GridLayout {
-  type: "grid";
-  spotlight?: SpotlightTileViewModel;
-  grid: GridTileViewModel[];
-  setVisibleTiles: (value: number) => void;
-}
-
-export interface SpotlightLandscapeLayout {
-  type: "spotlight-landscape";
-  spotlight: SpotlightTileViewModel;
-  grid: GridTileViewModel[];
-  setVisibleTiles: (value: number) => void;
-}
-
-export interface SpotlightPortraitLayout {
-  type: "spotlight-portrait";
-  spotlight: SpotlightTileViewModel;
-  grid: GridTileViewModel[];
-  setVisibleTiles: (value: number) => void;
-}
-
-export interface SpotlightExpandedLayout {
-  type: "spotlight-expanded";
-  spotlight: SpotlightTileViewModel;
-  pip?: GridTileViewModel;
-}
-
-export interface OneOnOneLayout {
-  type: "one-on-one";
-  local: GridTileViewModel;
-  remote: GridTileViewModel;
-}
-
-export interface PipLayout {
-  type: "pip";
-  spotlight: SpotlightTileViewModel;
-}
-
-/**
- * A layout defining the media tiles present on screen and their visual
- * arrangement.
- */
-export type Layout =
-  | GridLayout
-  | SpotlightLandscapeLayout
-  | SpotlightPortraitLayout
-  | SpotlightExpandedLayout
-  | OneOnOneLayout
-  | PipLayout;

src/tile/GridTile.test.tsx

@@ -12,10 +12,10 @@ import { axe } from "vitest-axe";
 import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
 
 import { GridTile } from "./GridTile";
-import { mockRtcMembership, createRemoteMedia } from "../utils/test";
+import { mockRtcMembership, withRemoteMedia } from "../utils/test";
 import { GridTileViewModel } from "../state/TileViewModel";
 import { ReactionsSenderProvider } from "../reactions/useReactionsSender";
-import type { CallViewModel } from "../state/CallViewModel/CallViewModel";
+import type { CallViewModel } from "../state/CallViewModel";
 import { constant } from "../state/Behavior";
 
 global.IntersectionObserver = class MockIntersectionObserver {
@@ -25,7 +25,7 @@ global.IntersectionObserver = class MockIntersectionObserver {
 } as unknown as typeof IntersectionObserver;
 
 test("GridTile is accessible", async () => {
-  const vm = createRemoteMedia(
+  await withRemoteMedia(
     mockRtcMembership("@alice:example.org", "AAAA"),
     {
       rawDisplayName: "Alice",
@@ -36,40 +36,41 @@ test("GridTile is accessible", async () => {
       getTrackPublication: () =>
         ({}) as Partial<RemoteTrackPublication> as RemoteTrackPublication,
     },
-  );
-
-  const fakeRtcSession = {
-    on: () => {},
-    off: () => {},
-    room: {
-      on: () => {},
-      off: () => {},
-      client: {
-        getUserId: () => null,
-        getDeviceId: () => null,
+    async (vm) => {
+      const fakeRtcSession = {
         on: () => {},
         off: () => {},
-      },
+        room: {
+          on: () => {},
+          off: () => {},
+          client: {
+            getUserId: () => null,
+            getDeviceId: () => null,
+            on: () => {},
+            off: () => {},
+          },
+        },
+        memberships: [],
+      } as unknown as MatrixRTCSession;
+      const cVm = {
+        reactions$: constant({}),
+        handsRaised$: constant({}),
+      } as Partial<CallViewModel> as CallViewModel;
+      const { container } = render(
+        <ReactionsSenderProvider vm={cVm} rtcSession={fakeRtcSession}>
+          <GridTile
+            vm={new GridTileViewModel(constant(vm))}
+            onOpenProfile={() => {}}
+            targetWidth={300}
+            targetHeight={200}
+            showSpeakingIndicators
+            focusable={true}
+          />
+        </ReactionsSenderProvider>,
+      );
+      expect(await axe(container)).toHaveNoViolations();
+      // Name should be visible
+      screen.getByText("Alice");
     },
-    memberships: [],
-  } as unknown as MatrixRTCSession;
-  const cVm = {
-    reactions$: constant({}),
-    handsRaised$: constant({}),
-  } as Partial<CallViewModel> as CallViewModel;
-  const { container } = render(
-    <ReactionsSenderProvider vm={cVm} rtcSession={fakeRtcSession}>
-      <GridTile
-        vm={new GridTileViewModel(constant(vm))}
-        onOpenProfile={() => {}}
-        targetWidth={300}
-        targetHeight={200}
-        showSpeakingIndicators
-        focusable={true}
-      />
-    </ReactionsSenderProvider>,
   );
-  expect(await axe(container)).toHaveNoViolations();
-  // Name should be visible
-  screen.getByText("Alice");
 });